--- title: Get Started with Parallax Scrolling description: The strides made in website design since the inception of the Internet are often taken for granted t... image: https://www.websitemagazine.com/hubfs/Imported_Blog_Media/mariokart-4-1-1-1.jpg --- [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) [![Website Magazine Logo](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x-1.png?width=586&height=145&name=gradient-regular@3x-1.png "Website Magazine Logo")](http://Website%20Services,%20Inc.) - [About](https://www.websitemagazine.com/about) - [FAQs](https://www.websitemagazine.com/about/faq) - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial Staff](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Resources](https://websitemagazine.tradepub.com) - [Newsletter](https://www.websitemagazine.com/newsletter-sign-up) - More - [Contact Us](https://www.websitemagazine.com/contact) [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) Search - [Latest](https://www.websitemagazine.com) - [Design](https://www.websitemagazine.com/web-design) - [Development](https://www.websitemagazine.com/web-development) - [SEO](https://www.websitemagazine.com/seo) - [Ecommerce](https://www.websitemagazine.com/ecommerce) - [Content](https://www.websitemagazine.com/content) - [Marketing](https://www.websitemagazine.com/marketing) - [Advertising](https://www.websitemagazine.com/advertising) - [Email](https://www.websitemagazine.com/email) - [Infographics](https://www.websitemagazine.com/infographics) - [View All Topics](https://www.websitemagazine.com/channels) # Get Started with Parallax Scrolling ![Michael Garrity](https://www.websitemagazine.com/hubfs/Author%20Photos/Michael%20Garrity.jpg) [by Michael Garrity](https://www.websitemagazine.com/marketing/author/michael-garrity) 23 Aug, 2012 - - - [mailto:?Body=https://www.websitemagazine.com/marketing/get-started-with-parallax-scrolling](mailto:?Body=https://www.websitemagazine.com/marketing/get-started-with-parallax-scrolling) - Link Copied! ![Get Started with Parallax Scrolling](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/mariokart-4-1-1-1.jpg) **The strides made in website design since the inception of the Internet are often taken for granted these days. But if one actually takes the time to consider how much more advanced some site's are today, it's actually pretty mind blowing.** One such development is parallax scrolling, a popular trend in modern Web design in which the different layers of a Web page move across the screen at different speeds as the user scrolls up or down, allowing for a site contained entirely in a single vertical page (or horizontal, as you'll see in some examples) with sectional transitions taking place through the act of scrolling. Parallax scrolling gives webmasters the opportunity to add unique and engaging visual effects to their sites. And although it may not be ideal for every type of website - specifically those that are content heavy - it can be a great way to show off new products, develop a brand's image, improve time-on-site and more.   ## Five Awesome Examples of Parallax Scrolling If you want to get an idea of how parallax scrolling can be used to enhance the experience of a website visitor, check out these five awesome sites:   ### Air Jordan 2012 The official page for this year's Air Jordan shoes from Nike features multi-faceted parallax scrolling.   ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/parallax-1-4-1-1-1.jpg?width=550&height=350&name=parallax-1-4-1-1-1.jpg)   ### Cantilever Fish & Chips The website for [this English restaurant](https://cantilever-chippy.co.uk/) allows visitors to scroll down to view its four different pages, each accompanied with its own unique background that changes as the user moves down the page.   ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/parallax-2-4-1-1-1.jpg?width=550&height=350&name=parallax-2-4-1-1-1.jpg)   ### David Beckham Believe it or not, this fancy site isn't actually the English soccer star's official website, but rather a tribute made by a big (and very talented) fan of his.   ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/parallax-3-4-1-1-1.jpg?width=550&height=350&name=parallax-3-4-1-1-1.jpg)   ### International Watch Company Many may think that the wristwatch industry is in decline, but the website for the IWC proves that it certainly has what it takes to keep up with the times.   ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/parallax-4-4-1-1-1.jpg?width=550&height=350&name=parallax-4-4-1-1-1.jpg)   ### Mario Kart Wii My personal favorite - the official site for the Wii version of the popular Mario Kart video game series takes a second to get used to, because as you scroll down with your mouse, the site actually begins to move to the right (or left when you scroll up), with each "page" acting as a checkpoint along the virtual track.   ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/parallax-5-4-1-1-1.jpg?width=550&height=350&name=parallax-5-4-1-1-1.jpg)   ## Six jQuery Parallax Scrolling Plugins   Typically, parallax scrolling is implemented on a site in one of two ways: using either a combination of CSS and JavaScript or using jQuery plugins, which is probably the simpler method, especially for those of us who aren't professional Web designers. Here are six of the Web's best jQuery plugins that make it easy to incorporate parallax scrolling onto your website:   #### Stellar.js [Stellar.js](https://markdalgleish.com/projects/stellar.js/) is probably the most popular and highly regarded plugin available and allows users to add parallax scrolling effects to any type of scrolling element.   #### Scrollorama Use Scrollorama if you want to animate different elements on a Web page based on a browser window's scroll position.   #### Arctext.js The [Arctext.js](https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/) jQuery plugin was made to help designers rotate letters (it's based on the Lettering.js plugin) by calculating the "right rotation" of each letter and distributing them equally across the arc of a given radius.   #### Scrolldeck.js Scrolldeck.js provides an (almost) static background that moves slower than a visitor scrolls by changing the top position of the background for every pixel of the page that is scrolled.   #### Curtain.js Create Web pages with multiple fixed panels that unroll using [Curtain.js](https://www.victorcoulon.fr/), which helps your page move, as the name implies, in the same way that a curtain rises.   #### Spritely The [Spritely](https://www.spritely.net/) plugin from Artlogic allows you to create dynamic character and background animations (known as "sprites") using HTML and JavaScript.   ![Michael Garrity](https://www.websitemagazine.com/hubfs/Author%20Photos/Michael%20Garrity.jpg) [Michael Garrity](https://www.websitemagazine.com/marketing/author/michael-garrity) Michael Garrity, Director of Marketing for Francis Lofts & Bunks, is an accomplished writer with a rich background in marketing, communications, and community engagement. With expertise in content creation and management, marketing strategy, digital advertising, SEO, social media management, and proficiency in various tools including Microsoft Office, Adobe InDesign, and Adobe Photoshop, he is well equipped to deliver outstanding results. Holding a BA in English Literature from St. Joseph's College (IN), Michael graduated Summa Cum Laude with a 3.92 GPA, honing his strong communication skills. His diverse experience makes him a valuable asset to any team. - - #### Popular Post ### [31 Back-to-School Keyword Targets ![31 Back-to-School Keyword Targets](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/schoolbus-1-1-1-1.jpg)](https://www.websitemagazine.com/marketing/31-back-to-school-keyword-targets) ### [GoDaddy Goes .XXX ![GoDaddy Goes .XXX](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-12-15-39-1451-AM-Apr-10-2023-01-36-09-0977-PM-3-1.png)](https://www.websitemagazine.com/marketing/godaddy-goes-xxx) ### [23 Cool Tech Facts ![23 Cool Tech Facts](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/fact_100x100-2-1-1-1.png)](https://www.websitemagazine.com/marketing/23-cool-tech-facts) #### Subscribe to Our Newsletter! [![](https://a.impactradius-go.com/display-ad/13053-1438301)](https://semrush.sjv.io/c/3976891/1438301/13053)![](https://imp.pxf.io/i/3976891/1438301/13053) #### Latest in Marketing [![3 Tips to Make Your Website More User-Friendly in 2023](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-2284350-1-1.jpg) 3 Tips to Make Your Website More User-Friendly in 2023](https://www.websitemagazine.com/marketing/3-tips-to-make-your-website-more-user-friendly) [![Web.com Launches New Professional QuickStart Website Service](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-4348404-1.jpg) Web.com Launches New Professional QuickStart Website Service](https://www.websitemagazine.com/marketing/web-com-launches-new-professional-quickstart-website-service) [![6 Ways to Stretch Your Marketing Budget](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Feb-07-2023-03-32-33-0828-PM-Apr-25-2023-03-10-37-2214-AM-1.png) 6 Ways to Stretch Your Marketing Budget](https://www.websitemagazine.com/marketing/6-ways-to-stretch-your-marketing-budget) [![5 Reasons Visitors Leave Your Website and Website Tracking Tools to Track Website Visitors](https://www.websitemagazine.com/hubfs/pexels-photo-1008155.jpg) 5 Reasons Visitors Leave Your Website and Website Tracking Tools to Track Website Visitors](https://www.websitemagazine.com/marketing/5-reasons-visitors-leave-your-website) [![5 Lessons About Workplace Energy](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/distress-1-1-1-1.png) 5 Lessons About Workplace Energy](https://www.websitemagazine.com/marketing/5-lessons-about-workplace-energy) [![Y Combinator Startups to #WebTechWatch](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/startup-funding-4-1-1-1.jpg) Y Combinator Startups to #WebTechWatch](https://www.websitemagazine.com/marketing/y-combinator-startups-to-webtechwatch) [![gradient-regular@3x](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x.png?width=128&height=128&name=gradient-regular@3x.png)](https://www.websitemagazine.com/) 999 E Touhy Ave, Des Plaines, IL 60018   [info@websitemagazine.com](mailto:info@websitemagazine.com) [(888) 7WEBMAG](tel:18887932624) [(312) 313-6576](tel:13123136576) About - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Contact Us](https://www.websitemagazine.com/contact) Resources Membership - Login - Subscribe Signup for our newsletter © 2026 Website Magazine. All Rights Reserved - [Privacy Policy](https://www.websitemagazine.com/about/privacy) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Michael Garrity", "url" : "https://www.websitemagazine.com/marketing/author/michael-garrity" }, "dateModified" : "2023-05-01T21:27:08.783Z", "datePublished" : "2012-08-23T05:00:00.000Z", "headline" : "Get Started with Parallax Scrolling", "image" : [ "https://www.websitemagazine.com/hubfs/Imported_Blog_Media/mariokart-4-1-1-1.jpg" ], "mainEntityOfPage" : { "@id" : "https://www.websitemagazine.com/marketing/get-started-with-parallax-scrolling", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.websitemagazine.com/hubfs/gradient-regular@3x-1.png" }, "name" : "Website Services, Inc." } } ``` ```json { "@context" : "https://schema.org", "@type" : "NewsArticle", "author" : [ { "@type" : "Person", "name" : "Michael Garrity" } ], "headline" : "Get Started with Parallax Scrolling", "publisher" : { "name" : "Website Magazine", "url" : "https://www.websitemagazine.com/" } } ```