When browsing the web, you have likely come across sites that utilize parallax web design, which is inspired by video games and their ability to handle varying background image movement. This creates a visually stunning effect, enhancing both presentation and scrolling intuitiveness that can hook website visitors. You can see some great examples of parallax design here. Using the seven tutorials below, developers can begin to master scrolling intuitiveness via parallax web design.
This technique hones in on jQuery, HTML and CSS with a tutorial that developers can use to create a site similar to this example where images and colors cohesively combine, and background images fade in and out of view with each scroll movement. The tutorial is neatly divided between HTML, jQuery and CSS, with the tutorial addressing the importance of each (HTML for page formatting, CSS for the scrolling effect and jQuery for optimization). It also correctly mentions that the jQuery implementation results in faster loading in most browsers.
Many critics of Parallax scrolling claim it’s over-intrusive and distracting. This tutorial keeps that in mind by going for a more subtle approach that will work particularly well on mobile devices. That doesn’t mean this is a simple list of instructions though. This tutorial covers everything from optimizing CSS style sheets by using the .scss file extension instead of .css, to a comprehensive detailing of how to take styling even further by adjusting headings and media queries. This is an extremely comprehensive tutorial that may even teach experienced developers something new.
This tutorial digs into how to create a Flash-based scrolling gallery using parallax, which will create a striking three-dimensional illusion with faster-moving background images over the slower-moving foreground. It looks like this. The tutorial takes a detailed step-by-step approach, starting with designing the floor pattern and wall and eventually exploring more complex maneuvers, like modifying the ActionScript layer and implementing a fade-in “tint” movie clip. The result will provide users with a final SWF file they can easily implement onto their site.
The demo this tutorial works around is a nice fit for aspiring artists who wish to showcase their work in a stimulating way, as it provides a stylish and colorful navigation method that accommodates a variety of media. Going through the how-to’s of HTML markup, CSS coding and snazzy jQuery implementations, this tutorial is ideal to help spice up dull site presentations that rely on traditional slideshows over sleek alternatives with parallax scrolling and sliding, which are always more likely to engage a visitor.
The seven tutorials above are great places to get started if you’re seeking to implement parallax scrolling on your own site. If implemented correctly, the benefits are numerous, from increased visitor engagement to appearing more professional and artistic to anyone who visits your site.
Featured image: Gianni Dominici