視差滾動|讓圖像在您滾動時飛入

有許多網站具有「視差」滾動效果。但我想簡單地通過讓各種圖像在我向下滾動時飛入。視差滾動|讓圖像在您滾動時飛入

一個簡單的例子：

圖像將實際飛行所用的用戶正在滾動（開始飛行中可見，上滾動），但是我還好，如果像蒼蠅的直接當圖像對用戶可見時（觸發器可見）

這怎麼實現？是否有任何演示版，圖書館，tutorails等可用？有沒有一個特定的名稱？

來源

2013-07-16 Mdlc

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

我更喜歡使用lazyload你的問題，所以當它到達視圖像將被加載。

來源

2013-07-16 13:51:25 LittleHoopoe

爲頁面滾動添加一個事件監聽器，當這些對象中的一個變爲可見時，爲它們設置動畫。這可以用這樣的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-16 13:55:36 Adam

有很多偉大的視差工具可用。如果你正在尋找的教程，我的公司，我列出了一些在http://potentpages.com/parallax-tutorials/

一些用於創建視差網站的主要方法有：

的Javascript（沒有任何庫）
的jQuery（和庫這再這樣下去Stellar.js jQuery的頂部）
Skrollr.js
Jarallax
CSS（無任何JavaScript）

我公司還爲http://potentpages.com/parallax-scroll-tutorial/

我希望這可以幫助創建瞭如何用JavaScript創建視差教程（無需額外的庫）的快速和簡單的教程。

來源

2013-12-14 02:32:32 David

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

看一看這兩個教程，以幫助您開始：

來源

2014-02-02 09:46:51 Ihatetomatoes

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-17 09:34:44

+1你的努力 –

視差滾動|讓圖像在您滾動時飛入

回答

相關問題