The Tumblr website uses a particular scrolling effect that doesn’t go unnoticed. In this post I’ll show you how I replicated and clone that exact behaviour in a matter of minutes. And of course, I’ll also explain how to make it totally responsive. Ready for it?
The Tumblr effect
The effect is created by the vertical sliding of different sections within the viewport. Each of the sections is full width and full height. The effect gets fired by scrolling with the mousewheel, trackpad or even with the arrow keys. (They are missing the space bar tho! )
The effect is in fact an implementation of scroll hijacking. A controversial technique loved by some and hated by others (mainly developers), but nevertheless, a technique used by big brands that seem to work quite good for certain scenarios.
My cloned result
Pretty similar uh? With just a few lines of code and in a matter of minutes you will be able to get exactly the same result as Tumblr, to the extreme of even using the same easing animation. Pretty cool uh?
Let’s get a bit more into details.
Creating the effect
I made use of my fullPage.js library that will provide us the fullscreen sections as well as the navigation bullets, the callbacks that get fired after reaching a section or leaving it, the css state classes and the mouse wheel functionality as well as the sliding effect.
Additionally, I made use of the parallax extension in order to replicate the pilling effect.
Notice I used
easingcss3: 'cubic-bezier(.825,0,.5,1)',. That’s because that’s the easing effect used by Tumblr website, but it would look good as well if you leave the default fullPage.js easing and just omit
easingcss3 from your fullpage.js initialisation.
Additionally I added a few more lines within fullPage.js callbacks to replicate the Tumblr animations when reaching certain sections:
If you apply the parallax effect like it is suppose, then you’ll get a the text moving at a different speed than the background, as shown on the parallax demo page, which isn’t what we are looking for.
To replicate the piling effect we want the background and the text to move at the same time. In order to do so, instead of placing the content outside the
fp-bg element, we will place it inside it.
So, instead of the following:
We have to use the following:
And that’s it! Now we have the Tumblr piling effect!
The rest is just about styling the site and really cloning Tumblr site as well as making it responsive.
Making it responsive
I would suggest to completely remove the effect in mobile or even tablet devices. Tumblr opted to just show a a login screen with a popup asking to download the mobile app. A solution we can easily copy, but I went for a different approach to keep all content and to provide a better example of what we could do taking advantage of the library we use.
The result looks quite good:
As you can see, our responsive site will:
- Disable scroll hijacking
- Disable the parallax / tumblr effect
- Allow the use of sections bigger than the viewport
- Adapt content to a smaller viewport
Disabling scroll hijacking
We will be using the responsive options provided by fullpage.js based on the
height dimensions of the device:
That way we will enter in “responsive mode”, which basically means the auto scrolling behaviour will get disabled, which is one of our goals to make the site responsive.
Disabling parallax / tumblr effect
The parallax extension provides a
destroy method we can use to achieve this. But when should we fire it?
We can take advantage of the
afterResponsive callback provided by fullPage.js that will get fired when we enter in the responsive mode based on the dimensions we specified in the previous point.
Allow the use of sections bigger than the viewport
This is quite easy to do. fullPage.js also provides a class called
fp-auto-height-responsive that will prevent fullPage.js from forcing the height of the sections to the size of the viewport.
So we just have to add it to the sections like this:
Adapt content to a smaller viewport
I added a few styles that will only get applied under responsive mode. I made use of the fullPage.js state classes to easily achieve that. More specifically,
fp-responsive, a class that will get added to the
body element when entering in responsive mode.
Creating Tumblr animations
Those are more a matter of CSS than anything else. I’m not going to explain them in detail here as this post is about creating the Tumblr layout itself and not its secondary animations.
But if you are curious, they are made using CSS 3 animations and fired by using the callbacks you could see on the fullpage.js initialisation above.
They basically contain different
transition-delay properties and look like this:
You can see them all inspecting the clone of Tumblr I created. The CSS file isn’t too big either in case you want to check it all.
Join 2,000+ readers and learn something new every month!