{"id":4059,"date":"2015-02-05T17:08:13","date_gmt":"2015-02-05T17:08:13","guid":{"rendered":"http:\/\/www.crimsondesigns.com\/blog\/?p=4059"},"modified":"2019-07-31T16:19:35","modified_gmt":"2019-07-31T16:19:35","slug":"parallax-web-design-to-scroll-or-not-to-scroll","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/parallax-web-design-to-scroll-or-not-to-scroll\/","title":{"rendered":"Parallax Web Design: To Scroll or Not to Scroll"},"content":{"rendered":"

If you spend much time on the internet, sooner or later you’re going to come across\u00a0Parallax Web Design.<\/strong>\u00a0 Someone has asked you to create a website with Parallax Scrolling\u00a0or you may just be\u00a0curious. Here’s a basic overview of the parallax effect used in web design.\u00a0We’ll include some simple examples, pros and cons, and things you’ll need to get started\u00a0on your Parallax journey.
\n<\/p>\n

What does a Parallax Website look like?<\/h3>\n

\"Parallax<\/a>In many parallax web designs, the visitor moves up and down the same web page, instead of navigating from one web page to another. As the visitor scrolls down the page, the images in the background move more slowly than the content in the foreground. This gives the page depth.<\/p>\n

Parallax Scrolling<\/strong> creates a hypnotic animated effect. By having images glide up on the page and exit as the visitor scrolls, you can “wow”<\/span> your audience, draw them into your narrative and entice them scene-by-scene to the bottom of the page. Your website will have a storytelling quality to it.<\/p>\n

Parallax Scrolling<\/strong> is not just vertical. It can also have horizontal effects or be used to move different icons, images or other elements around the page, each one growing and shrinking while visitors scroll.<\/p>\n

Great Parallax Examples<\/h3>\n

1. NASA Prospect<\/a>\u00a0is a light-hearted entertaining narrative with a space theme. It includes music.
\n2. Too Young to Wed<\/a>\u00a0is an educational website dealing with a very serious subject.\u00a0Images\u00a0and text alternate in the browser as the visitor scrolls. This site\u2019s sidebar navigation lets you jump ahead (or back) to different sections.
\n4. Sketchtravel<\/a>\u00a0is a creative\u00a0parallax web design\u00a0with\u00a0helpful icons that help visitors navigate easily from the top to the bottom of the page.<\/p>\n

\"Parallax<\/a><\/p>\n

What You’ll Need<\/h3>\n

Parallax Scrolling typically involves combinations of HTML5, CSS3,<\/strong> jQuery<\/a> , and JavaScript to power the parallax scrolling effects. You’ll also need some high-quality images. The actual parallax scrolling magic comes from JavaScript. You can write the JavaScript on your own or include a JavaScript plug-in to do the work.<\/p>\n

Skrollr.js<\/a> is an example of a JavaScript plug-in designed for creating Parallax Websites. It does not use jQuery<\/strong> and is instead a stand-alone library. Skrollr doesn\u2019t require much more than including the library and adding data attributes.<\/strong>\u00a0You can add scrolling effects to your site without even exploring how the JavaScript<\/strong> works.<\/p>\n

\"Parallax<\/a><\/p>\n

PROS<\/h3>\n