javascript - 如何在滚动时交换图像以显示在 3d 中

Question

我有一个客户，他有几张幻灯片，他们希望在用户垂直向下滚动页面时无缝播放这些幻灯片。它类似于此页面:

http://www.bagigia.com/

关于如何实现这一点有什么建议吗？如果您熟悉 webflow - 这通常是我用来帮助创建干净代码以进行快速部署的首选程序，但即使是原始代码也是完全受欢迎的，当然!

本质上，他们有一个水瓶，他们在不同的位置拍摄了照片，当他们向下滚动页面时，他们希望水瓶侧翻，然后朝向观看者。他们对所有这些图像进行了拍摄和隔离，但我不知道如何对其进行编码，以使瓶子看起来像动画。

Answer 1

从 Bagigia 的源代码来看，他们似乎有一堆有序的 div s 在父容器内带有背景图像 #rotation .container .每个div有一张倾斜的产品照片集为 background-image .

jQuery 代码绑定(bind)到scroll事件 $window.bind('scroll', function(){/*code*/})更新 .container的 left每次一定数量的属性(property)。这给人的印象是图像在旋转，实际上它只是将图像向左滑动并离开可见区域。

值得注意的是 div元素有它们的 width和 height在页面加载和窗口上设置 resize事件。这有助于确定 left 是什么位置应该更新。

您可以在其格式非常整齐的源代码中看到所有这些内容。在 http://www.bagigia.com/js/bagigia.home.rotation.js?v=d38yhf5 查看他们的主页轮换脚本

您的问题只是关于图像旋转，所以我不会评论其他功能，但是您可以随时根据需要查看其他源代码。

祝你自己构建这个好运。如果您能够分享结果，或者写一篇博文来分享您的方法、学习和成果，我会对结果感兴趣。

如果 Bagigia 更新/删除他们的网站，我在下面粘贴了一些相关代码，这些代码直接来自他们的源代码，而不是我自己的作品。

<div id="rotation">

  <div class="popup">
    <div class="item" id="popup-bag1"></div>
    <div class="item" id="popup-bag5"></div>
    <div class="item" id="popup-bag12"></div>
    <div class="item" id="popup-bag17"></div>
    <div class="item" id="popup-bag21"></div>
  </div>

  <div class="container">
    <div class="bag-angle show" id="bag0" rel="popup-bag1"></div>
    <div class="bag-angle" id="bag1" rel="popup-bag1"></div>
    <div class="bag-angle" id="bag2" rel="popup-bag1"></div>
    <div class="bag-angle" id="bag3"></div>
    <div class="bag-angle" id="bag4"></div>
    <div class="bag-angle" id="bag5" rel="popup-bag5"></div>
    <div class="bag-angle" id="bag6" rel="popup-bag5"></div>
    <div class="bag-angle" id="bag7" rel="popup-bag5"></div>
    <div class="bag-angle" id="bag8"></div>
    <div class="bag-angle" id="bag9"></div>
    <div class="bag-angle" id="bag10"></div>
    <div class="bag-angle" id="bag11"></div>
    <div class="bag-angle" id="bag12" rel="popup-bag12"></div>
    <div class="bag-angle" id="bag13" rel="popup-bag12"></div>
    <div class="bag-angle" id="bag14" rel="popup-bag12"></div>
    <div class="bag-angle" id="bag15"></div>
    <div class="bag-angle" id="bag16"></div>
    <div class="bag-angle" id="bag17" rel="popup-bag17"></div>
    <div class="bag-angle" id="bag18" rel="popup-bag17"></div>
    <div class="bag-angle" id="bag19" rel="popup-bag17"></div>
    <div class="bag-angle" id="bag20"></div>
    <div class="bag-angle" id="bag21" rel="popup-bag21"></div>
    <div class="bag-angle" id="bag22" rel="popup-bag21"></div>
    <div class="bag-angle" id="bag23" rel="popup-bag21"></div>
    <div class="bag-angle" id="bag24"></div>
    <div class="bag-angle" id="bag25"></div>
  </div>

  <div class="content">

  </div>
</div>

$(document).ready(function(){

  var $window = $(window);
  var $introBox = $('#intro');
  var $rotationBox = $('#rotation');
  var $containerBox = $('#rotation .container');
  var $bags = $('#rotation .bag-angle');
  var blankHeight = 200;
  var index = -1;

  var $blankOpen = $('<div class="bag-blank"></div>');
  $blankOpen.height($window.height() + blankHeight).appendTo($('#bag-blank-space'));

  $bags.each(function(index){
    var $blank = $('<div class="bag-blank" rel="bag' + index + '"></div>');
    $blank.height(blankHeight).appendTo($('#bag-blank-space'));
  });

  $('.bag-blank:last').height(blankHeight/2);

  $window.bind('scroll', function(){
    var opacity = ($window.scrollTop()) / (($window.height()));
    if (opacity <= 1){
      if ($window.scrollTop() <= $introBox.height()){
        $rotationBox.css({opacity: opacity});
      }
    }else{
      $rotationBox.css({opacity: 1});
    }

    $('#bag-blank-space .bag-blank').each(function(i){   
      if ($window.scrollTop() > $(this).position().top){
        index = i;
      }   
    });

    if (index < $bags.length){

      var $toShow =  $('#rotation .bag-angle:eq(' + index + ')');
      var $toHide = $('#rotation .bag-angle.show');

      if (!$toShow.hasClass('show')){
        $toShow.addClass('show');
        $toHide.removeClass('show');

        var $popup = $('.popup .item#' + $toShow.attr('rel'));

        if ($popup.length > 0 && !$rotationBox.is(':animated') && $rotationBox.position().top >= 0){
          if (!$popup.hasClass('show') && !$rotationBox.hasClass('hide')){
              $('.popup .item.show').removeClass('show').stop(false,true).animate({opacity:0},'fast');
              if ($rotationBox.position().top >= 0){
                $popup.addClass('show').stop(false,true).animate({opacity:1},'fast');
              }
          }
        }else{
          $('.popup .item.show').removeClass('show').stop(false,true).animate({opacity:0},'fast');
        }

        $containerBox.css({left: -1 * index * $window.width()});
      }

      if ($rotationBox.hasClass('hide')){
        $rotationBox.removeClass('hide');
        $('#payoffs .payoff-item:not(:first)').css({opacity:0});
        $('#payoffs .payoff-item:first').addClass('show').animate({
          opacity:0
        },'slow', function(){
            $('.payoff-bg-text').css({opacity:0});
            $('.popup .item').stop().css({opacity:0}).show();
            $rotationBox.stop(true,true).animate({top: 0},'slow', 'easeInOutBack',function(){$('.popup .item.show').stop().animate({opacity:1})});
        });
      }
    }


  });

  $window.bind('resize', function(){

    $('.bag-blank:first').height($window.height() + blankHeight);
    $('.bag-blank:last').height(blankHeight/2);

    $bags.width($window.width());
    $bags.height($window.height());

    $containerBox.css({left: -1 * index * $window.width()});
  });

  $bags.width($window.width());
  $bags.height($window.height());

});