Unpeeling the UNC Charlotte Scroll Effect

I have to admit, at first I did not understand the parallax scroll web design craze.  I was vocal in my distaste for what I thought was poor usability and unneeded gimmicks.  Now I look back and see I was just stuck in the past and having a “get off my lawn” moment.  When done correctly, scroll effects can add an extra wow factor to the story you are trying to tell.

All scroll effects are often lumped together and just given the term “parallax”.  This is fine in high level discussions, but when it comes to implementation, more detail is required.  At its core, the parallax effect is where elements move at different speeds as the users scrolls through the page.  This simulates depth, making it seem like there are layers of content at different distances from the screen.  While most sites implement this effect as a user scrolls vertically, it can also be done horizontally.

A variation of parallax design is the peeling effect that many sites have started using.  We used this in our redesign of the UNC Charlotte Admissions homepage.  This effect happens when the user scrolls and a bottom layer of content stays still while a top layer ‘peels’ off and exits to the top of the screen.  Even though multiple elements are not moving at once, this effect adds a nice touch to a site’s functionality, while not distracting the user from what is really important.  This works especially well for UNC Charlotte because the homepage is already broken up into three distinct sections–we are just highlighting where each section begins and ends.  I could keep going, but a Gif is worth 10,000 words:

To achieve this effect, we used a JavaScript library called Waypoints to set triggers at the top of each section of the homepage.  Different styling changes fire when a user scrolls past one of these trigger points. Whether they are scrolling up or down the page also changes how the page reacts.  The peeling effect comes from a section’s changing CSS position property .  The bottom section that is not moving is positioned ‘fixed’, while the top layer is positioned ‘relative’.

Another way to achieve this specific effect is to use Peeler.js.  This library will do most of the heavy lifting for you, although it is harder to customize. For more complex scrolling animations, it’s worth looking into Scrollr or ScrollMagic (this article will help in choosing). Both come with a learning curve, but it’s amazing what these libraries can do.  Some sites that have piqued my interest are Florida Institute of Technology, University of South Carolina, and Sebastien Lempens Design.  As you can see, I’ve come full circle in my opinion of parallax scrolling and I’m excited for where front-end development is going!  Feel free to contact us if you want to talk tech or learn more about scrolling functionality options and adding that wow factor to your site.