All the parallax-related tutorials, ideas and various posts in Stampede Constructs
Have you played Firewatch? It is a mystery set in the Wyoming wilderness, where your only emotional lifeline is the person on the other end of a handheld radio. For me it’s definitely therapeutic. If you have, you might as well have visited their website. What do you see? A landscape illustration that moves along a parallax background. But what does parallax mean?
Parallax effects are almost always handled with JavaScript and, more often than not, the result is not very impressive. In his blog post, Keith Clark found a way to achieve pure CSS parallax effect thus removing all the web performance issues. The result is consistent frame rates and perfectly smooth scrolling. You can also combine the effect with other CSS features such as media queries or supports. When used for the right purpose, CSS parallax effect engages user better and gives them that extra delight while scrolling down your website. Learn more on how Keith does it, along with some demos.
Two months ago, I’ve posted about creating a simple parallax scrolling. Now I would like to share a jQuery plugin called JInvertScroll to create horizontal parallax scrolling written by Alex Franzelin featured in Pixxelfactory.
The plugin is lightweight, allowing you to move in horizontal with a parallax effect while scrolling down. It’s extremely easy to setup and requires nearly no configuration.
However, take note that there are limitations of horizontal parallax scrolling – every content must have limited height as the page scrolls to left and right to prevent some content not visible.
Stampede Design