Many dynamic websites add custom scrolling effects into the layout. These effects can be created using JavaScript which manipulates the page’s default scroll behavior. At times this can be annoying – but when used appropriately custom scrolling can improve a website’s usability.
Most scrolling effects originate from parallax websites using custom plugins. These plugins are often built on top of a library such as jQuery for quicker performance. But the actual process of designing a custom scroll effect is very different than building one from scratch. This post will cover a series of different effects you can duplicate into your own web projects.
Fixed Block Scrolling
Perhaps the most common scrolling effect would be the block-style parallax design. This is created when a layout uses fullscreen content blocks that take up the entirety of a page. When scrolling down there are no small ticks of moment, but rather full sliding pages.
This technique can be used in most parallax websites but it requires careful forethought. Impetuous decision making can lead to a poor quality user experience. If you want to design fixed block scrolling then it’s best to see how other websites use this in real-world examples.
Notice on the HBM FiberSensing webpage that each content area takes up the whole screen. Regardless of your monitor size the design fluidly fills the browser window. Navigation elements can be found along the right side of the page in the shape of circular icons.
But HBM is actually a multi-page site with a sliding navigation menu. The other pages are not parallax and simply behave as traditional HTML/CSS layouts. This is a great example of how to use custom scrolling on a homepage while maintaining default browser scrolling on other pages.
Bagigia is another block-scrolling webpage using the circular dot navigation. By scrolling down the page you’ll find that each section uses a type of parallax animation with the background graphic. I wouldn’t call this a traditional block effect because you can actually scroll in notches rather than huge chunks. Yet this is still a valid use of custom scrolling in web design.
I’d actually argue that this would be the simplest method of custom scrolling to build from scratch. Keep in mind that it works best when you have some elements on the page to animate, but regardless it will always create a distinct user experience.
Horizontal Motion
The vast majority of websites place content streaming down the page in a vertical orientation. Users scroll up/down the screen because the limitation is easier to manage in regards to different monitor sizes. However there are some layouts which rely on horizontal scrolling to create an interesting effect.
Horizontal scrolling is often paired with single-page parallax websites. In parallax design motion is a huge part of the animated effect regarding why users are drawn into the page. Content which is streamed on a single page can feel bland without some aesthetic TLC.
An online infographic for London Skyline uses horizontal scrolling throughout the entire site. The layout itself feels like an animated vector scene with moving parts and dynamic backgrounds. Horizontal motion is a beautiful method of customizing the user experience to display content in a more pronounced manner.
If you’re interested to learn parallax scrolling be sure to check out these free tutorials when you have the chance. Online tutorials are the best way to learn any new skill and they only require some of your time.
Animated Effects
Website animation has come a long way since the early millennium. It used to be a complicated process requiring large blocks of JavaScript, some of which couldn’t be supported in a majority of browsers.
Thanks to newer CSS3 techniques and JS libraries web animation is a lot more powerful. Animated scrolling effects can be added into a site without the use of digital media such as Flash. Modern web design is about dynamic content, and scrolling animation is the perfect companion to any dynamic layout.
The homepage of Casta Diva Interiors uses animated elements on scroll. When moving down the page you’ll notice that images and text fly into the layout from outside the screen. It’s a simple effect to create but not easy to meld nicely into a design.
Casta Diva is a much more complicated website than other examples. It’s a phenomenal layout for an interior design agency, but perhaps not for a commercial bank or printing service. Tailor animation choices to the style of website so they’ll match the audience accordingly.
Dynamic scroll effects are much nicer when paired together with content on the center stage. By focusing directly on page content you’ll notice that animation effects seem to “pop” more than you’d expect.
Pressels is a wonderful site that relies more on simple animation. Images and text move around the page while scrolling based on a path. So when the scrollbar is at a certain point the page content will be located at a specific area of the page. As you move up/down the content animates along this path.
The free jQuery plugin ScrollMagic is a great way to recreate this in your own website. Just be sure that your animated effects are tactful and judicious.
Digital Media & Typography
Scrolling effects can always be tied with media on the page. Although this is a relatively lesser-used design technique, it’s actually quite powerful in leaving a lasting impression on visitors.
Take a look at the homepage for Plugados Games. They use a mix of rendering graphics, pixel art, plus animated motion graphics to create their homepage effect. The design is heavily focused on parallax motion and conditioning users to recognize these features.
Almost any type of digital media studio could benefit from these effects. Animated techniques can be used to showcase your work in a creative and memorable fashion. People like dynamic effects when used tastefully in a layout that places a heavy focus on content.
Related: 10 Great Tips For Improving Your Web Typography
For a more typographic example you may want to check out the homepage for Scotch Digital. This is a digital agency for design/branding created by Scotch.io.
The Scotch Digital landing page uses a variety of typographic styles and techniques. If your design has more typography than imagery consider adding scroll animated text effects. The free jQuery plugin Super Scroll-O-Rama is a shoo-in for the job.
Closing
Designing a unique website is difficult enough but adding your own custom features can be a disaster without some direction. As a creative designer you need to see the project through for what it is, rather than drag it into something that feels forced. Stylish design is about compensating for the user experience so that visitors appreciate the content more than alternative effects such as custom scrolling.
