Question

我有一个客户端，其中有几张PowerPoint幻灯片，当用户垂直向下滚动页面时，它们希望无缝地制作动画。与此页面相似：

http://www.bagigia.com/

有关如何实现此目标的任何建议？如果您熟悉Webflow，通常这是我选择用来帮助创建清晰代码以进行快速部署的程序，当然，甚至原始代码也完全受欢迎！

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

Answer 1

通过查看Bagigia源代码，似乎它们在父容器div中有一堆有序#rotation .container并带有背景图像。每个div都有一张成角度的产品照片，设为background-image。

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

值得注意的是，left元素的div和width分别在页面加载和窗口height事件中设置。这有助于确定应该更新resize职位的位置。

您可以在其格式整齐的源代码中看到所有这些内容。在http://www.bagigia.com/js/bagigia.home.rotation.js?v=d38yhf5

上查看其脚本以进行主页轮换

您的问题只是关于图像旋转，因此我不会在其他功能上发表评论，但是您始终可以根据需要查看其他源代码。

祝您自己建立自己。如果您能够分享结果，或者可能写一篇博客文章来分享您的方法，学习和成果，我会对结果感兴趣。

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

left

<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>

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

1 个答案: