--- title: Do You Parallax? description: By the time you read this, there will be some new, bleeding edge, blow-yourmind type design trend... image: https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-12-07-01-0416-AM-Apr-10-2023-01-28-06-2748-PM-3-3.png --- [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) # Do You Parallax? ![Peter Devereaux](https://www.websitemagazine.com/hubfs/Peter_Devereaux.png) [by Peter Devereaux](https://www.websitemagazine.com/marketing/author/peter-devereaux) 17 Dec, 2012 - - - [mailto:?Body=https://www.websitemagazine.com/marketing/do-you-parallax](mailto:?Body=https://www.websitemagazine.com/marketing/do-you-parallax) - Link Copied! ![Do You Parallax?](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-12-07-01-0416-AM-Apr-10-2023-01-28-06-2748-PM-3-3.png) By the time you read this, there will be some new, bleeding edge, blow-yourmind type design trend that you'll desperately want to include on your Web presence and that other designers have seemingly already mastered and from which they are seeing positive results. The problem is, by the time you get around to it, it may just be more "tired" than "wired." The pace of innovation in digital design is phenomenally fast as you more than likely know (as Heidi Klum says, "One day you're in, the next day you're out"). Thus, every digital designer - and every enterprise that employs them - needs to be aware of what's possible and feasible to deploy within the visual experience developed and provided to users through a company's website presence. One of the more innovative and engaging trends of the recent past has been that of parallax design. Parallax refers to the design of two parallel objects that move at different speeds. The practice is not new by any means (it was used in 1980s video games, for example). What is new are the countless examples of parallax design in action on the Web today. This popularity is bringing the practice into much greater focus and increasing its use by the design digerati. Websites that employ parallax design are disruptive in that they force users to shift away from the predominant, linear paradigm of scrolling (the traditional up and down style) and into a more immersive, nearly 3D browsing experience (or at least something with more dimension and depth). That can be frightening for some users, but if the aim is to create a useful, and more importantly, more memorable and engaging experience for users, implementing parallax scrolling is one sure-fire way to do that. Let's look at a few examples: Krystalrae.com: Contemporary clothing retailer Krystralrae has an equally contemporary design thanks to its use of parallax scrolling. The entire site is actually built using a parallax effect, but where it really stands out is when viewing the actual clothing collection. As a user scrolls down with their mouse, a static image of a model wearing the clothes (as seen below) changes outfits as they progress. Saucony.com: To promote its new Kinvara 3 running shoe line, Saucony leveraged parallax design to detail the physical construction of the shoe and the technology behind it. As a user scrolls through the website, they virtually experience the shoe in its various stages of production (see sidebar) - from the shoe's engineering and cushioning technology, to treads and colors. ### Making Parallax Work To create your own parallax design, you'll be pleased to discover that there are numerous tutorials, scripts and resources available on the Web. With experience in some form of Javascript (such as jQuery), and a familiarity with HTML5 and CSS3, going parallax is increasingly simple. Here are a few of the most popular jQuery plugins to add some parallax effects to your current (or soon to be redesigned) website: **Stellar.js:** This is probably the most popular and highly regarded plugin available. It 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:** This 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, which helps your page move, as the name implies, in the same way that a curtain rises. **Spritely:** This plugin from Artlogic allows you to create dynamic character and background animations (known as "sprites") using HTML and JavaScript. Parallax scrolling is currently one of the most popular effects in the Web design community, and slowly but surely, the Web is seeing some boundary-breaking implementations. The problem is, these are boundarybreaking implementations and that alone can cause some virtual discomfort within an organization. Keep in mind that the Parallax design trend is not well suited to those websites (or individual pages) that require an abundance of information, because users will scroll through and scan, rather than read the information presented. Its best use is when images and visual graphics can express meaning and evoke positive sentiment far more than words alone. Parallax scrolling is an immersive way to present simple content in a dynamic fashion, particularly for websites based on artistic or creative expression. As always, make sure that the site's functionality is adequate to the content being presented and appropriate for its audience. ![Peter Devereaux](https://www.websitemagazine.com/hubfs/Peter_Devereaux.png) [Peter Devereaux](https://www.websitemagazine.com/marketing/author/peter-devereaux) As the Editor-in-Chief of Website Magazine and President of Website Services, Peter has established himself as a prominent figure in the digital marketing industry. With a wealth of experience and knowledge, Peter has been a driving force in shaping the landscape of digital marketing. His leadership in creating innovative and targeted marketing campaigns has helped numerous businesses achieve their revenue growth goals. Under his direction, Website Magazine has become a trusted source of information and insights for digital marketers worldwide. As President of Website Services, Peter oversees a team of talented professionals who specialize in SEO/SEM, email marketing, social media, and digital advertising. Through his hands-on approach, he ensures that his team delivers exceptional results to their clients. With a passion for digital marketing, Peter is committed to staying up-to-date with the latest industry trends and technologies, making him a sought-after thought leader in the field. - - - - - [mailto:peter.devereaux@websitemagazine.com](mailto:peter.devereaux@websitemagazine.com) #### 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" : "Peter Devereaux", "url" : "https://www.websitemagazine.com/marketing/author/peter-devereaux" }, "dateModified" : "2023-05-01T21:27:42.969Z", "datePublished" : "2012-12-17T06:00:00.000Z", "headline" : "Do You Parallax?", "image" : [ "https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-12-07-01-0416-AM-Apr-10-2023-01-28-06-2748-PM-3-3.png" ], "mainEntityOfPage" : { "@id" : "https://www.websitemagazine.com/marketing/do-you-parallax", "@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" : "Peter Devereaux" } ], "headline" : "Do You Parallax?", "publisher" : { "name" : "Website Magazine", "url" : "https://www.websitemagazine.com/" } } ```