Question

有很多网站都有“视差”滚动效果。但是，当我向下滚动时，我想通过让各种图像飞进来开始简单。

一个简单的例子：

图像实际上会在用户滚动时飞入（开始在可见，滚动时飞入），但如果图像对用户可见时图像直接飞入，则可以正常飞行（触发器在可见时飞入））

如何实现这一目标？有没有可用的演示版，图书馆版，tutorails等？这是否有特定的名称？

Answer 1

有很多很棒的视差工具可供使用。如果您正在寻找教程，我和我的公司会在http://potentpages.com/parallax-tutorials/

列出一些

用于创建视差网站的一些主要方法是：

Javascript（没有任何库）
jQuery（以及像Stellar.js这样的jQuery之上的库）
Skrollr.js
Jarallax
CSS（没有任何javascript）

我的公司还创建了一个快速简单的教程，介绍如何使用javascript创建视差教程（不需要额外的库）http://potentpages.com/parallax-scroll-tutorial/

我希望这会有所帮助。

Answer 2

HTML：

<body>
 <div id="section1"><h1>section1</h1></div>
 <div id="section2"><h1>section2</h1></div>
 <div id="section3"><h1>section3</h1></div>
  </body>

的CSS：

*{ margin: 0; padding: 0;}
 #section1{ width: 100%; height: 650px; background: url("http://www.wallsave.com/wallpapers/1280x960/abstact-red/186157/abstact-red-abstract-balls-186157.jpg");}
 #section2{ width: 100%; height: 650px; background: url("http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg");}
 #section3{ width: 100%; height: 650px; background: url("http://wonderfulengineering.com/wp-content/uploads/2014/01/Technology-Wallpaper-6.jpg");}
 h1{ color: chartreuse; text-align: center; line-height: 650px;} 
 #section2 h1{ color: #fff;}

JS：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script>
 $( window ).scroll(function() {
 var val = $(window).scrollTop();
 $("#val").text(val);
 $("#section1").css({"background-position":"-"+val*2+"px 50%"});
 $("#section2").css({"background-position":"50% -"+val*2+"px"});
 $("#section3").css({"background-position":val*2+"px 50%"}); });
 </script>

按照这种方式帮助您创建和了解parallax网站

http://learning-day.blogspot.in/2014/04/how-to-create-own-parallax-website.html

Answer 3

看一下本教程：http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

我更喜欢使用lazyload来解决您的问题，因此图片会在到达视口时加载。

Answer 4

为页面滚动添加一个eventlistener，当其中一个对象变为可见时，为它们设置动画。这可以使用jQuery实现：

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    $('.flyIns').each(function(i, element){
        if($(element).offset().top < scrollTop + 400){
            $(element).animate({left:'50px'}, 300);
        }
    });
});

Answer 5

我建议你看看Skrollr.js。它有一个非常好的文档，你可以很容易地用Skrollr.js完成你的效果。

看看这两个教程可以帮助您入门：

视差滚动|滚动时让图像飞入

5 个答案: