Horizontal Smooth Scroll Layouts

Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.
HorizontalScroll_featured

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

If you use Locomotive Scroll, you might have heard about the new update that includes support for horizontal layouts. I’m a big fan of the library, so I couldn’t wait to try out some layouts and animations with the new feature.

The main concept behind these layouts is to play around with animations that feel and work well for scrolling to the sides. This includes animating images and text depending on the direction we scroll. Moving things up and down for example or skewing them can create a really interesting dynamic effect.

By using a structure of the images where an outer element has overflow: hidden and the inner one moves, we can create a cool parallaxed motion that adds depth to the whole layout.

I really hope you enjoy these experiments and find them useful 🙂 Thank you for stopping by and let me know what you create with Locomotive Scroll @crnacura.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.