{"id":37808,"date":"2017-08-30T21:01:07","date_gmt":"2017-08-30T13:01:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37808"},"modified":"2020-06-29T02:10:44","modified_gmt":"2020-06-28T18:10:44","slug":"parallax-scrolling-stickystack-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/parallax-scrolling-stickystack-js\/","title":{"rendered":"Parallax Scrolling Made Easy With StickyStack.js"},"content":{"rendered":"

Parallax effects<\/a><\/strong> grab attention fast. These effects keep certain backgrounds in view<\/strong> while scrolling down the page. You\u2019ll find parallax scrolling on many websites and WordPress themes<\/a> and they\u2019re a large part of modern web design.<\/p>\n

You can also build a unique parallax style<\/strong> using the StickyStack.js<\/a><\/strong> plugin. It\u2019s built on jQuery<\/strong> and keeps each main page section stickied to the top as you scroll down.<\/p>\n

This creates the illusion of a layered website<\/strong> where each page \u201cstacks\u201d on top of the other. It\u2019s really cool and pretty easy to set up on your own.<\/p>\n

While it\u2019s pretty easy to set up, it does require some understanding of frontend development<\/a>.<\/p>\n

You need to first create individual page sections<\/strong> inside the main container. This way you\u2019ll have everything enclosed in the HTML<\/strong>, so you can target everything with the StickyStack jQuery function.<\/p>\n

Read Also:<\/strong> 15 Examples of Scrolling Done Right in Website Designs<\/a><\/p>\n

It also comes with a few options where you can customize the parent container<\/strong>, the elements that should stack<\/strong>, and a possible box shadow<\/strong> if you like that effect.<\/p>\n

Here\u2019s a sample bit of code<\/strong> from the GitHub page:<\/p>\n

\r\n$('.main-content-wrapper').stickyStack({\r\n\tcontainerElement: '.main-content-wrapper',\r\n\tstackingElement: 'section',\r\n\tboxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'\r\n});\r\n<\/pre>\n
While this hasn\u2019t been updated in about two years, it\u2019s still a very reliable plugin. It worked in all the browsers I tested<\/strong> (Chrome, Safari, & Firefox) with support for all versions of jQuery<\/strong>.<\/p>\n
Plus, the minified file is only 2KB<\/strong> which is a decent size for a plugin.<\/p>\n
To learn more, visit the main repo<\/a> and see what StickyStack can offer. I think it works best on single-page websites<\/strong> or landing pages with large fullscreen backgrounds<\/strong>.<\/p>\n
You can also check out a live demo on CodePen<\/strong> if you wanna see how this looks on a live site.<\/p>\n