0

有许多网站具有“视差”滚动效果。但是我想通过让各种图像在我向下滚动时飞入来开始简单。

一个简单的例子：

插图

图像实际上会在用户滚动时飞入（在可见时开始飞入，在滚动时），但是如果图像在用户可见时直接飞入，我没关系（在可见时触发飞入）

如何实现？是否有任何演示、图书馆、教程等可用？这个有具体的名字吗？

4

5 回答 5

1

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

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

  • Javascript（没有任何库）
  • jQuery（以及在 jQuery 之上的库，例如 Stellar.js）
  • Skrollr.js
  • 贾拉拉克斯
  • CSS（没有任何 javascript）

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

我希望这有帮助。

于 2013-12-14T02:32:32.287 回答
1

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>

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

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

于 2014-04-17T09:34:44.533 回答
0

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

我更喜欢使用延迟加载来解决您的问题，因此图像将在到达视口时加载。

于 2013-07-16T13:51:25.090 回答
0

为页面滚动添加一个事件监听器，当其中一个对象变得可见时，为它们设置动画。这可以用 jQuery 来实现，如下所示：

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    $('.flyIns').each(function(i, element){
        if($(element).offset().top < scrollTop + 400){
            $(element).animate({left:'50px'}, 300);
        }
    });
});
于 2013-07-16T13:55:36.893 回答
0

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

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

于 2014-02-02T09:46:51.473 回答