视差滚动(Parallax Scrolling)效果的原理和实现

素颜马尾好姑娘i 2021-10-23 14:28 376阅读 0赞

[视差滚动(Parallax Scrolling)效果的原理和实现][Parallax Scrolling]

**视差滚动（Parallax Scrolling）**是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

可以先看看效果：[http://www.ok-studios.de/home/][http_www.ok-studios.de_home]

**一、什么是视差滚动？**

视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

目前这种视差滚动效果被越来越多的国外网站所应用， 成为网页设计的热点趋势。

通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不放一试。

就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。

**二、视差滚动效果的主要特点：**

1、直观的设计，快速的响应速度，更合适运用于单页面

2、差异滚动 分层视差  
页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层。

**三、原理**

通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果

页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层

**差异滚动的实现规则：**

*  　　背景层的滚动(最慢)
 *  　　贴图层(内容层和背景层之间的元素)的滚动(次慢)
 *  　　内容层的滚动(可以和页面的滚动速度一致)

我们让三个图层的滚动速度不一致，就做出了漂亮的差异滚动效果

![08042206-04026f450dd94bb88c532d9fecb988f5.jpg][]

![08042215-a093f73cbfcc4eadb7185ee08622cbec.jpg][]

![08042312-6022fb0a83d44f678bc8d0163c299693.jpg][]

![08042328-a51a3ae051604b6b80b82798b80b9d8b.jpg][]

1、运用大背景

这些背景图像一般是高分辨率，大图，覆盖整个网站。高清照片是一个迅速抓住观众的好方式，可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

注意：

1. 1、背景图的色彩、内容在选择时要十分讲究，前提是不要破坏用户的体验，不然再漂亮的照片也是枉然。

图片类型最好选取趋向于一些比较柔和、略带透明的一类，不要影响到网站主体内容的阅读，识别，讲究协调。

1.2、以大量图片为特色的页面应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验.

2、你也可以用简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式，一个视差区间内颜色最好保持使用2到3种，我们可以调整颜色的透明度，来达到各种视觉效果

3、定位好背景层，贴图层和内容层之间的关系

根据页面自身的功能来定义是否需要贴图层，贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷

内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的

4、讲故事

有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话：内容是王道，技术只是实现内容的一种工具。当你能够成功地把有力的信息和漂亮的执行力结合起来，你就能创造出人们喜欢并且享受其中的体验。　————Wieden+Kennedy

TWO 数据可视化——信息图形设计　故事1 传统水银体温计和大字母水银体温计

![1911343354-13.jpg][]

**四、实现方法和工具**

**1、在CSS中定义背景滚动方式的属性是backgroud-attacthment**

**background-attachment** -- 定义背景图片随滚动轴的移动方式

*  取值: scroll | fixed | inherit
    
     *  scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
     *  fixed: 当页面的其余部分滚动时，背景图像不会移动。
     *  inherit: 规定应该从父元素继承 background-attachment 属性的设置。
     *  初始值: scroll
     *  继承性: 否
     *  适用于: 所有元素

附带w3c的链接：[http://www.w3school.com.cn/css/pr\_background-attachment.asp][http_www.w3school.com.cn_css_pr_background-attachment.asp]

浏览器的支持性：

测试了chrome,opera,safari,firefox,ie7-8都是可以的，所以就是说IE6下不行~

在IE6下使用这个属性，需要把background-attachment:fixed放置于body或html当中，就是说你说在其它标签里面是没用。上面的w3c里可以看得到效果就是因为它是放在body里的。

![复制代码][copycode.gif]

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>滚动视觉差示例</title>
            <style>
                *{
         
                    padding:0;
                    margin:0
                }
                body{
         
                    text-align:center;
                    background-attachment:fixed;
                }
                #main{
         
                    width: 1280px;
                    margin:auto
                }
                .header{
         
                    background:#fff;
                    padding: 10px 0
                }
                .bg-attachment{
         
                    background:url(6.jpg) center center no-repeat;
                    box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                    -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                    -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                    -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                    -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                    background-attachment:fixed;
                }
                .bg-attachment .shadow{
         
                    width:80%;
                    height:700px;
                    overflow:hidden;
                    margin:auto;
                }
                .div2{
         
                    background:url(qingz.jpg) center center no-repeat;
                    background-attachment:fixed;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class="header">
                    <img src="5.jpg">
                </div>
                <div class="bg-attachment">
                    <div class="shadow"></div>
                </div>
                <div class="header">
                    <img src="qi.jpg">
                </div>
                <div class="bg-attachment div2">
                    <div class="shadow"></div>
                </div>
            </div>
        </body>
    </html>

![复制代码][copycode.gif]

**2、插件**

[Scrollorama][]

[![滚动视差网站工具与教程][154136Ehk.jpg]][Scrollorama]

### [curtain.js][]  **类似于幕布升起的效果** ###

[![滚动视差网站工具与教程][154137qp7.jpg]][curtain.js]

### [jQuery-Parallax][] ###

[![滚动视差网站工具与教程][154137UPI.jpg]][jQuery-Parallax]

### [stellar.js][] ###

[![滚动视差网站工具与教程][154137tdh.jpg]][stellar.js]

### [jparallax][] ###

[![滚动视差网站工具与教程][1541376Su.jpg]][jparallax]

### [Skrollr][] ###

[![滚动视差网站工具与教程][154137yG4.jpg]][Skrollr]

### [Parallax.js][] ###

[![滚动视差网站工具与教程][154137org.jpg]][Parallax.js]

### [A Simple Parallax Scrolling Technique via Nettuts+][A Simple Parallax Scrolling Technique via Nettuts] ###

[![滚动视差网站工具与教程][154137RvI.jpg]][A Simple Parallax Scrolling Technique via Nettuts]

**[Parallax Slider][]**

**3、教程**

*  **[Javascript视差效果][Javascript]**
 *  **[Nike Better World场景的背后][Nike Better World]** 一份为那些急切想重现NIKE网站滚动效果的设计师准备的教程。 
 *  **[用jQuery和CSS构建一个具有视差滚动效果的网站界面][jQuery_CSS] **一份为那些想在此领域了解的更深的设计师准备的例子和教程。 
 *  **[用JQuery创建一个时尚的具有视差背景的效果][JQuery]** 一份教程，在背景上帮你添加一些滚动的云彩。 
 *  **[动画背景式的网页头部][Link 1]** 用一个动画式的网页头部来让你的访问者为你欢呼吧！
 *  **[视差滚动教程][Link 2]** 一份视差效果和内容同时出现的有趣的教程。

**四、超炫的视差滚动效果网站设计欣赏**

[**divups**][divups]

[**![28224211-f7637a00f8ba465b8f18b2c0cf32a0c2.png][]**][divups]

##### [New ebay][] #####

[![New ebay][New ebay 1]][New ebay]

[360 Long Road Zurich][]

![08041851-003fc97359bc4f518842cb28113d9c57.jpg][]

##### [Q Music Titanic][] #####

[![Q music Titanic][]][Q Music Titanic]

##### [Putzengel][] #####

[![Putzengel][Putzengel 1]][Putzengel]

##### [OK Studios][http_www.ok-studios.de_home] #####

[![OK Studios][]][http_www.ok-studios.de_home]

##### [Nike Better World][Nike Better World 1] #####

[![Nike Better World][Nike Better World 2]][Nike Better World 1]

##### [Ben the Bodyguard][] #####

[![Ben the Body Guard][]][Ben the Bodyguard]

##### [Egopop Creative Studio][] #####

[![Egopop Creative Studio][Egopop Creative Studio 1]][Egopop Creative Studio]

##### [Smokey Bones][] #####

[![Smokey Bones][Smokey Bones 1]][Smokey Bones]

##### [Cultural Solutions][] #####

[![Cultural Solutions][Cultural Solutions 1]][Cultural Solutions]

##### [The Beatles Rock Band][] #####

[![The Beatles Rock Band][The Beatles Rock Band 1]][The Beatles Rock Band]

##### [XHTML Slicing][] #####

[![XHTML Slicing][XHTML Slicing 1]][XHTML Slicing]

##### [Farmhouse Fare][] #####

[![Farmhouse Fare][Farmhouse Fare 1]][Farmhouse Fare]

##### [Sullivan NYC][] #####

[![Sullivan NYC][Sullivan NYC 1]][Sullivan NYC]

##### [I to Sie Ceni][] #####

[![I to Sie Ceni][I to Sie Ceni 1]][I to Sie Ceni]

##### [Grab and Go][] #####

[![Grab and Go][Grab and Go 1]][Grab and Go]

##### [Micro-Site for Mario Kart Wii][] #####

[![Micro-site for Mario Kart Wii][]][Micro-Site for Mario Kart Wii]

##### [Air Jordan 2012][] #####

[![Air Jordan 2012][Air Jordan 2012 1]][Air Jordan 2012]

##### [Micro-site for Mario Kart Wii][Micro-site for Mario Kart Wii 1] #####

[![Micro-site for Mario Kart Wii][Micro-site for Mario Kart Wii 2]][Micro-site for Mario Kart Wii 1]

##### [Unfold][] #####

[![Unfold][Unfold 1]][Unfold]

##### [Dentsu Network][] #####

[![Dentsu Network][Dentsu Network 1]][Dentsu Network]

##### [ResIm][] #####

[![ResIm][ResIm 1]][ResIm]

##### [Jan Ploch][] #####

[![Jan Ploch][Jan Ploch 1]][Jan Ploch]

##### [Kry-Ptis][] #####

[![Kry-Ptis][Kry-Ptis 1]][Kry-Ptis]

##### [Anna Safroncik][] #####

[![Anna Safroncik][Anna Safroncik 1]][Anna Safroncik]

##### [Unfinished Business][] #####

[![Unfinished Business][Unfinished Business 1]][Unfinished Business]

##### [Volkswagen-Beetle][] #####

[![Volkswagen-Beetle][Volkswagen-Beetle 1]][Volkswagen-Beetle]

##### [Appmiral][] #####

[![Appmiral][Appmiral 1]][Appmiral]

##### [Atlantis World’s Fair][Atlantis World_s Fair] #####

[![Atlantis World's Fair][Atlantis World_s Fair 1]][Atlantis World_s Fair]

##### [Johan Reinhold][] #####

[![Johan Reinhold][Johan Reinhold 1]][Johan Reinhold]

##### [Iutopi][] #####

[![Iutopi][Iutopi 1]][Iutopi]

##### [Beautiful Explorer][] #####

[![Beautiful Explorer][Beautiful Explorer 1]][Beautiful Explorer]

##### [Bagigia][] #####

[![Bagigia][Bagigia 1]][Bagigia]

##### [Activate Drinks][] #####

[![Activate Drinks][Activate Drinks 1]][Activate Drinks]

##### [Tokyu Agency Recruit 2013][] #####

[![Tokyu Agency Recruit 2013][Tokyu Agency Recruit 2013 1]][Tokyu Agency Recruit 2013]

##### [Von Dutch][] #####

[![Von Dutch][Von Dutch 1]][Von Dutch]

##### [Playtend][] #####

[![Playtend][Playtend 1]][Playtend]

##### [Phase 2 Design Studio][] #####

[![Phase 2 Design Studio][Phase 2 Design Studio 1]][Phase 2 Design Studio]

##### [Friendly Gents][] #####

[![Friendly Gents][Friendly Gents 1]][Friendly Gents]

##### [TokioLab][] #####

[![TokioLab][TokioLab 1]][TokioLab]

##### [Krystalrae][] #####

[![Krystalrae][Krystalrae 1]][Krystalrae]

##### [No leath][] #####

[![No leath][No leath 1]][No leath]

##### [Dangers of Fracking][] #####

[![Dangers of Fracking][Dangers of Fracking 1]][Dangers of Fracking]

##### [Mo’s & Bows][Mo_s _ Bows] #####

[![Mo's and Bow's][Mo_s and Bow_s]][Mo_s _ Bows]

##### [Tinke][] #####

[![Tinke][Tinke 1]][Tinke]

##### [Whiteboard][] #####

[![Parallax Scrolling in Web Design][]][Whiteboard]

##### [New Zealand][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 1]][New Zealand]

##### [Marcus Thomas][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 2]][Marcus Thomas]

##### [Fishy][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 3]][Fishy]

##### [Soleil Noir][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 4]][Soleil Noir]

##### [kinvara3][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 5]][kinvara3]

##### [Smokey Bones][Smokey Bones 2] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 6]][Smokey Bones 2]

##### [Laurentius : Jaarverslag 2010][Laurentius _ Jaarverslag 2010] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 7]][Laurentius _ Jaarverslag 2010]

##### [ala][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 8]][ala]

##### [Bomb Girls][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 9]][Bomb Girls]

##### [Head2Heart][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 10]][Head2Heart]

##### [Michelberger Booze<][Michelberger Booze] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 11]][Michelberger Booze]

##### [Ascensión Latorre][Ascensi_n Latorre] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 12]][Ascensi_n Latorre]

##### [Biamar][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 13]][Biamar]

##### [inTacto 10 Years][] #####

[![Parallax Scrolling in Web Design][Parallax Scrolling in Web Design 14]][inTacto 10 Years]

[Parallax Scrolling]: http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html
[http_www.ok-studios.de_home]: http://www.ok-studios.de/home/
[08042206-04026f450dd94bb88c532d9fecb988f5.jpg]: /images/20211023/fe2111e4b6c34218a43e14659d69aeac.png
[08042215-a093f73cbfcc4eadb7185ee08622cbec.jpg]: /images/20211023/40735d19bf2a4d80bcd731a2801a34f0.png
[08042312-6022fb0a83d44f678bc8d0163c299693.jpg]: /images/20211023/ee042bbaca8746e2ba68c5a7382ce9b1.png
[08042328-a51a3ae051604b6b80b82798b80b9d8b.jpg]: /images/20211023/92e6b56a1ca444da8a9b2a7e03574470.png
[1911343354-13.jpg]: /images/20211023/dfc10257fff7437195f8be53ab0ba8dc.png
[http_www.w3school.com.cn_css_pr_background-attachment.asp]: http://www.w3school.com.cn/css/pr_background-attachment.asp
[copycode.gif]: /images/20211023/94cfd56cf95947bf90ce331c4ee43d3a.png
[Scrollorama]: http://johnpolacek.github.com/scrollorama/
[154136Ehk.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/154136Ehk.jpg
[curtain.js]: https://github.com/victa/curtain.js
[154137qp7.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/154137qp7.jpg
[jQuery-Parallax]: /images/20211023/7b1f8ff4e421453cb83905be73fd1147.png
[154137UPI.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/154137UPI.jpg
[stellar.js]: /images/20211023/ee2c2bbfe758458bbcbd8d2aec1355c2.png
[154137tdh.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/154137tdh.jpg
[jparallax]: /images/20211023/3727a3aba3934fff9805698891c18ef5.png
[1541376Su.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/1541376Su.jpg
[Skrollr]: http://prinzhorn.github.com/skrollr/
[154137yG4.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/154137yG4.jpg
[Parallax.js]: http://stolksdorf.github.com/Parallaxjs/
[154137org.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/154137org.jpg
[A Simple Parallax Scrolling Technique via Nettuts]: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
[154137RvI.jpg]: http://www.qianduan.net/wp-content/uploads/image/2012/12/154137RvI.jpg
[Parallax Slider]: http://tympanus.net/Tutorials/ParallaxSlider/
[Javascript]: http://www.ianlunn.co.uk/blog/code-tutorials/javascript-parallax-effects-a-deeper-look/
[Nike Better World]: http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
[jQuery_CSS]: http://f6design.com/projects/parallax-scrolling/
[JQuery]: http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/
[Link 1]: http://www.jquery4u.com/animation/jquery-parallax-tutorial/
[Link 2]: http://www.richardshepherd.com/smashing/parallax/background.html
[divups]: http://www.divups.com/
[28224211-f7637a00f8ba465b8f18b2c0cf32a0c2.png]: /images/20211023/5744fb6b6c954d968735af62a0eabc33.png
[New ebay]: /images/20211023/63f336c69b1641018122119184ba77f2.png
[New ebay 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling0.jpg
[360 Long Road Zurich]: http://www.360langstrasse.sf.tv/page/
[08041851-003fc97359bc4f518842cb28113d9c57.jpg]: /images/20211023/ef017f4aa7e04dec99f6d702a59bf8f1.png
[Q Music Titanic]: http://titanic.q-music.be/
[Q music Titanic]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling2.jpg
[Putzengel]: http://www.putzengel.at/#moveto_contact
[Putzengel 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling3.jpg
[OK Studios]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling4.jpg
[Nike Better World 1]: /images/20211023/1053964e599443c0858ad056bb7ca7c5.png
[Nike Better World 2]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling5.jpg
[Ben the Bodyguard]: http://benthebodyguard.com/index.php
[Ben the Body Guard]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling6.jpg
[Egopop Creative Studio]: /images/20211023/15d41a98fc1d4ce9872a0abcc016eeac.png
[Egopop Creative Studio 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling7.jpg
[Smokey Bones]: http://smokeybones.com/
[Smokey Bones 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling8.jpg
[Cultural Solutions]: /images/20211023/2df7978e8f9e414682b2a9edc7139985.png
[Cultural Solutions 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling9.jpg
[The Beatles Rock Band]: http://www.thebeatlesrockband.com/
[The Beatles Rock Band 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling10.jpg
[XHTML Slicing]: /images/20211023/fc6b8b68904c48cc9b1cb05eed1e56a9.png
[XHTML Slicing 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling11.jpg
[Farmhouse Fare]: /images/20211023/51036b86d25a476dbb0d970be355e88c.png
[Farmhouse Fare 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling12.jpg
[Sullivan NYC]: http://www.sullivannyc.com/
[Sullivan NYC 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling13.jpg
[I to Sie Ceni]: /images/20211023/1b97151c8068483a890fbd11cbcb5600.png
[I to Sie Ceni 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling14.jpg
[Grab and Go]: /images/20211023/2b9214f41dc84ea6a4d40376a33ab917.png
[Grab and Go 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling15.jpg
[Micro-Site for Mario Kart Wii]: http://www.nintendo.com.au/gamesites/mariokartwii/#competition
[Micro-site for Mario Kart Wii]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling16.jpg
[Air Jordan 2012]: /images/20211023/fb9e0115c4fe4305b1f33c19ab3a9a26.png
[Air Jordan 2012 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling17.jpg
[Micro-site for Mario Kart Wii 1]: /images/20211023/ed97fd651d47448d8af4af424914f549.png
[Micro-site for Mario Kart Wii 2]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling18.jpg
[Unfold]: http://unfold.no/
[Unfold 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling19.jpg
[Dentsu Network]: /images/20211023/d8eccdf8c6a44d2483b623dbd743ad38.png
[Dentsu Network 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling20.jpg
[ResIm]: http://www.resolutionim.com/speed
[ResIm 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling21.jpg
[Jan Ploch]: /images/20211023/4a685a50e7a840f8bdbc7b933e42d700.png
[Jan Ploch 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling22.jpg
[Kry-Ptis]: /images/20211023/c88b367bedd84076b2c81237f2d298cd.png
[Kry-Ptis 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling23.jpg
[Anna Safroncik]: /images/20211023/f4b52e052552439583482c483e523831.png
[Anna Safroncik 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling24.jpg
[Unfinished Business]: http://www.unfinishedbusiness.is/
[Unfinished Business 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling25.jpg
[Volkswagen-Beetle]: http://www.beetle.com/
[Volkswagen-Beetle 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling26.jpg
[Appmiral]: /images/20211023/afd6bbd397044c3fbbcbb32716e00245.png
[Appmiral 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling27.jpg
[Atlantis World_s Fair]: /images/20211023/166d665d846f464f8e410dbb924a99bc.png
[Atlantis World_s Fair 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling28.jpg
[Johan Reinhold]: /images/20211023/b0af6d105c8d487fa6b3634236733128.png
[Johan Reinhold 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling29.jpg
[Iutopi]: /images/20211023/546f851cdf2e4e2999b659155c598491.png
[Iutopi 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling30.jpg
[Beautiful Explorer]: http://www.beautifulexplorer.com/main.html?skip=1
[Beautiful Explorer 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling31.jpg
[Bagigia]: http://www.bagigia.com/
[Bagigia 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling32.jpg
[Activate Drinks]: /images/20211023/9a37988006de4fbc9841998174b0658a.png
[Activate Drinks 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling33.jpg
[Tokyu Agency Recruit 2013]: http://www.tokyu-agc.co.jp/recruit/2013/special/
[Tokyu Agency Recruit 2013 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling34.jpg
[Von Dutch]: /images/20211023/029f14495bb94646ace6925c50352d97.png
[Von Dutch 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling35.jpg
[Playtend]: /images/20211023/b81ee5bd1a8740d396361f9ce4c70f54.png
[Playtend 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling36.jpg
[Phase 2 Design Studio]: /images/20211023/8c35d88ea65d449585634d6fc0408382.png
[Phase 2 Design Studio 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling37.jpg
[Friendly Gents]: /images/20211023/1ee2e9ed74d94bfb87d2ae8564780977.png
[Friendly Gents 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling38.jpg
[TokioLab]: /images/20211023/744cc8355cc0403cac7e81b1c0780ab3.png
[TokioLab 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling39.jpg
[Krystalrae]: /images/20211023/fcb48fe71259403a8d803a733af09f81.png
[Krystalrae 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling40.jpg
[No leath]: /images/20211023/da9ff03b009a4ff5bf4e192510e7abe5.png
[No leath 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling41.jpg
[Dangers of Fracking]: http://dangersoffracking.com/
[Dangers of Fracking 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling42.jpg
[Mo_s _ Bows]: /images/20211023/99dbad1f0ba0476697ccfef7792c72a4.png
[Mo_s and Bow_s]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling43.jpg
[Tinke]: http://www.zensorium.com/tinke/
[Tinke 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling44.jpg
[Whiteboard]: http://whiteboard.is/
[Parallax Scrolling in Web Design]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling45.jpg
[New Zealand]: /images/20211023/6b32af2549934a64b41fbe0300c9a466.png
[Parallax Scrolling in Web Design 1]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling46.jpg
[Marcus Thomas]: /images/20211023/b43b3669b4bf403387cbe2ae85d7faad.png
[Parallax Scrolling in Web Design 2]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling47.jpg
[Fishy]: http://www.fishy.com.br/
[Parallax Scrolling in Web Design 3]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling48.jpg
[Soleil Noir]: /images/20211023/9e3c4238c3cf438694bd863384afc351.png
[Parallax Scrolling in Web Design 4]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling49.jpg
[kinvara3]: /images/20211023/695fb8f56c8f4681b41e47b1b3a9b887.png
[Parallax Scrolling in Web Design 5]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling50.jpg
[Smokey Bones 2]: http://www.smokeybones.com/
[Parallax Scrolling in Web Design 6]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling51.jpg
[Laurentius _ Jaarverslag 2010]: http://www.laurentiuswonen.com/jaarverslag2010/
[Parallax Scrolling in Web Design 7]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling52.jpg
[ala]: /images/20211023/d265d91a04ae4f829305ed5fb83184a1.png
[Parallax Scrolling in Web Design 8]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling53.jpg
[Bomb Girls]: /images/20211023/e4fa8f55842142228af1ef0b21a969d7.png
[Parallax Scrolling in Web Design 9]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling54.jpg
[Head2Heart]: /images/20211023/5a421918241d49b0957e1ab980c51cc3.png
[Parallax Scrolling in Web Design 10]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling55.jpg
[Michelberger Booze]: /images/20211023/6dd476b808eb4fb8bf30a4e177106544.png
[Parallax Scrolling in Web Design 11]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling56.jpg
[Ascensi_n Latorre]: /images/20211023/e973e8aa4c164ff79d6be9e0a9d49fde.png
[Parallax Scrolling in Web Design 12]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling57.jpg
[Biamar]: /images/20211023/9111003599c64ceb9a8273865d51d359.png
[Parallax Scrolling in Web Design 13]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling58.jpg
[inTacto 10 Years]: http://www.intacto10years.com/index_start.php
[Parallax Scrolling in Web Design 14]: http://img.qianduan.net/uploads/2012/10/parallaxscrolling59.jpg