如何使图像在滚动以 3D 显示时交换

Question

我有一个客户，他有几个PowerPoint幻灯片，他们希望在用户垂直向下滚动页面时无缝地制作动画。它类似于此页面：

http://www.bagigia.com/

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

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

Answer 1

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

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

值得注意的是，div元素在页面加载和窗口resize事件时设置了其width和height。这有助于确定应通过什么更新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());
});