{"id":5101,"date":"2018-03-12T01:00:00","date_gmt":"2018-03-12T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-create-tumblr-website-effect\/"},"modified":"2024-02-05T20:10:04","modified_gmt":"2024-02-05T19:10:04","slug":"how-create-tumblr-website-effect","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-create-tumblr-website-effect\/","title":{"rendered":"How to create a website like Tumblr in 10 minutes"},"content":{"rendered":"<p>The <a href=\"https:\/\/www.tumblr.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Tumblr website<\/a> uses a particular scrolling effect that doesn&#8217;t go unnoticed.<br>\nIn this post I&#8217;ll show you how I replicated and clone that exact behaviour in a matter of minutes. And of course, I&#8217;ll also explain how to make it totally responsive. Ready for it?<\/p>\n<h2 class=\"wp-block-heading\" id=\"the-tumblr-effect\">The Tumblr effect<\/h2>\n<p>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! )<\/p>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Tumblr site effect\" width=\"500\" height=\"281\" data-src=\"https:\/\/www.youtube.com\/embed\/gt--t4ckSXY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div>\n<\/figure>\n\n<p>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.<\/p>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to create tumblr effect - My clone website in 10 minutes\" width=\"500\" height=\"281\" data-src=\"https:\/\/www.youtube.com\/embed\/f2I2KGQugK0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div>\n<\/figure>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alvarotrigo.com\/fullPage\/tumblr\/\" target=\"_blank\" title=\"See Demo\" rel=\"noopener\">See Demo<\/a>\n<\/div>\n\n<\/div>\n\n<h2 class=\"wp-block-heading\" id=\"my-cloned-result\">My cloned result<\/h2>\n<div class=\"youtube-video-wrapper\">\n    <div class=\"youtube-image-wrapper\" data-embed=\"\">\n        <div class=\"youtube-play\"><\/div>\n        <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=\" data-src=\"https:\/\/img.youtube.com\/vi\/\/sddefault.jpg\" class=\"youtube-img lazy\">\n    <\/div>\n<\/div>\n<a href=\"\" alt=\"See demo\" title=\"See demo\" class=\"post-button post-button-demo\">Demo<\/a>\n<p>Pretty similar uh? With just a few lines of code and in a matter of minutes you will be able to get <strong>exactly the same result as Tumblr<\/strong>, to the extreme of even using the same easing animation. Pretty cool uh?<\/p>\n<p>Let&#8217;s get a bit more into details.<\/p>\n<h2 class=\"wp-block-heading\" id=\"creating-the-effect\">Creating the effect<\/h2>\n<p>I made use of my <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js library<\/a> that will provide us the fullscreen sections as well as the navigation bullets, the <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js#callbacks\" target=\"_blank\" rel=\"noopener nofollow\">callbacks<\/a> that get fired after reaching a section or leaving it, the <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js#state-classes-added-by-fullpagejs\" target=\"_blank\" rel=\"noopener nofollow\">css state classes<\/a> and the mouse wheel functionality as well as the sliding effect.<\/p>\n<p>Additionally, I made use of the <a href=\"https:\/\/alvarotrigo.com\/fullPage\/extensions\/parallax.html\">parallax extension<\/a> in order to replicate the <em>pilling<\/em> effect.<\/p>\n<p>There&#8217;s no much JS I had to write for it, it only took me like 5 or 10 minutes to get the final layout result. The whole Javascript code you&#8217;ll have to write to get the layout effect looks like this:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">    $(<span class=\"hljs-built_in\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n        <span class=\"hljs-keyword\">var<\/span> animationCont = <span class=\"hljs-number\">0<\/span>;\n\n        $(<span class=\"hljs-string\">'#fullpage'<\/span>).fullpage({\n            <span class=\"hljs-attr\">sectionsColor<\/span>: &#91;<span class=\"hljs-string\">'#36465d'<\/span>, <span class=\"hljs-string\">'#55c598'<\/span>, <span class=\"hljs-string\">'#a77dc2'<\/span>, <span class=\"hljs-string\">'whitesmoke'<\/span>, <span class=\"hljs-string\">'#ccddff'<\/span>, <span class=\"hljs-string\">'#ccc'<\/span>],\n            <span class=\"hljs-attr\">anchors<\/span>: &#91;<span class=\"hljs-string\">'firstPage'<\/span>, <span class=\"hljs-string\">'secondPage'<\/span>, <span class=\"hljs-string\">'3rdPage'<\/span>, <span class=\"hljs-string\">'4thpage'<\/span>],\n            <span class=\"hljs-attr\">menu<\/span>: <span class=\"hljs-string\">'#menu'<\/span>,\n            <span class=\"hljs-attr\">navigation<\/span>: <span class=\"hljs-literal\">true<\/span>,\n            <span class=\"hljs-attr\">navigationPosition<\/span>: <span class=\"hljs-string\">'left'<\/span>,\n            <span class=\"hljs-attr\">easingcss3<\/span>: <span class=\"hljs-string\">'cubic-bezier(.825,0,.5,1)'<\/span>,\n            <span class=\"hljs-attr\">parallax<\/span>: <span class=\"hljs-literal\">true<\/span>,\n            <span class=\"hljs-attr\">parallaxOptions<\/span>: {\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'reveal'<\/span>,\n                <span class=\"hljs-attr\">percentage<\/span>: <span class=\"hljs-number\">100<\/span>,\n                <span class=\"hljs-attr\">property<\/span>: <span class=\"hljs-string\">'translate'<\/span>\n            }\n        });\n    });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Notice I used <code>easingcss3: 'cubic-bezier(.825,0,.5,1)',<\/code>. That&#8217;s because that&#8217;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 <code>easingcss3<\/code> from your fullpage.js initialisation.<\/p>\n<p>Additionally I added a few more lines within fullPage.js callbacks to replicate the Tumblr animations when reaching certain sections:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">onLeave: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">index, nextIndex, direction<\/span>)<\/span>{\n    <span class=\"hljs-keyword\">if<\/span>(nextIndex === <span class=\"hljs-number\">2<\/span>){\n        animationCont++;\n\n        <span class=\"hljs-comment\">\/\/forcing the gift to start again<\/span>\n        $(<span class=\"hljs-string\">'.section-2-animation'<\/span>)\n            .css(<span class=\"hljs-string\">'background-image'<\/span>, <span class=\"hljs-string\">'url(animation3.gif?v='<\/span>+animationCont+<span class=\"hljs-string\">')'<\/span>);\n    }\n},\n<span class=\"hljs-attr\">afterLoad<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">anchorLink, index<\/span>)<\/span>{\n    $(<span class=\"hljs-string\">'.blogs-graphic'<\/span>).toggleClass(<span class=\"hljs-string\">'active'<\/span>, (index === <span class=\"hljs-number\">3<\/span>));\n},\n<span class=\"hljs-attr\">afterRender<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n    <span class=\"hljs-comment\">\/\/forcing visual render of the element to we can apply the transition<\/span>\n    $(<span class=\"hljs-string\">'.section-1-whatIs'<\/span>)&#91;<span class=\"hljs-number\">0<\/span>].clientHeight;\n    $(<span class=\"hljs-string\">'.section-1-bg'<\/span>)&#91;<span class=\"hljs-number\">0<\/span>].clientHeight;\n\n    $(<span class=\"hljs-string\">'.section-1-bg, .section-1-whatIs, .section-1-content'<\/span>).addClass(<span class=\"hljs-string\">'active'<\/span>);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>If you apply the parallax effect like it is suppose, then you&#8217;ll get a the text moving at a different speed than the background, as shown on the <a href=\"https:\/\/alvarotrigo.com\/fullPage\/extensions\/parallax.html\">parallax demo page<\/a>, which isn&#8217;t what we are looking for.<\/p>\n<p>To replicate the piling effect we want the background and the text to move <strong>at the same time<\/strong>. In order to do so, instead of placing the content outside the <code>fp-bg<\/code> element, we will place it inside it.<\/p>\n<p>So, instead of the following:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"section1\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fp-bg\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    Slide content here\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We have to use the following:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"section1\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fp-bg\"<\/span>&gt;<\/span>\n         Slide content here\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>And that&#8217;s it! Now we have the Tumblr piling effect!<\/p>\n<p>The rest is just about styling the site and really cloning Tumblr site as well as making it responsive.<\/p>\n<h2 class=\"wp-block-heading\" id=\"making-it-responsive\">Making it responsive<\/h2>\n<p>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.<\/p>\n<p>The result looks quite good:<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"..\/assets\/imgs\/2018-03-13\/tumblr-responsive.gif\" alt=\"Responsive animation in an iPhone 8\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\"><\/figure>\n<p>As you can see, our responsive site will:<\/p>\n<ul class=\"wp-block-list\">\n<li>Disable scroll hijacking<\/li>\n<li>Disable the parallax \/ tumblr effect<\/li>\n<li>Allow the use of sections bigger than the viewport<\/li>\n<li>Adapt content to a smaller viewport<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"disabling-scroll-hijacking\">Disabling scroll hijacking<\/h2>\n<p>We will be using the responsive options provided by fullpage.js based on the <code>width<\/code> and <code>height<\/code> dimensions of the device:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">responsiveWidth: <span class=\"hljs-number\">800<\/span>,\n<span class=\"hljs-attr\">responsiveHeight<\/span>: <span class=\"hljs-number\">600<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>That way we will enter in &#8220;responsive mode&#8221;, which basically means the auto scrolling behaviour will get disabled, which is one of our goals to make the site responsive.<\/p>\n<h2 class=\"wp-block-heading\" id=\"disabling-parallax-%2F-tumblr-effect\">Disabling parallax \/ tumblr effect<\/h2>\n<p>The parallax extension <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js\/wiki\/Extension---Parallax\" target=\"_blank\" rel=\"noopener nofollow\">provides a <code>destroy<\/code> method<\/a> we can use to achieve this. But when should we fire it?<\/p>\n<p>We can take advantage of the <code>afterResponsive<\/code> 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.<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">afterResponsive: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">isResponsive<\/span>)<\/span>{\n    <span class=\"hljs-keyword\">if<\/span>(isResponsive){\n        $.fn.fullpage.parallax.destroy();\n    }<span class=\"hljs-keyword\">else<\/span>{\n        $.fn.fullpage.parallax.init();\n    }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"allow-the-use-of-sections-bigger-than-the-viewport\">Allow the use of sections bigger than the viewport<\/h2>\n<p>This is quite easy to do. fullPage.js also provides a class called <code>fp-auto-height-responsive<\/code> that will prevent fullPage.js from forcing the height of the sections to the size of the viewport.<\/p>\n<p>So we just have to add it to the sections like this:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section fp-auto-height-responsive\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"section-2\"<\/span>&gt;<\/span>\n        Whatever here\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"adapt-content-to-a-smaller-viewport\">Adapt content to a smaller viewport<\/h2>\n<p>I added a few styles that will only get applied under responsive mode. I made use of the <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js#state-classes-added-by-fullpagejs\" target=\"_blank\" rel=\"noopener nofollow\">fullPage.js state classes<\/a> to easily achieve that. More specifically,  <code>fp-responsive<\/code>, a class that will get added to the <code>body<\/code> element when entering in responsive mode.<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.fp-responsive<\/span> <span class=\"hljs-selector-class\">.fp-bg<\/span>{\n    <span class=\"hljs-attribute\">position<\/span>: relative <span class=\"hljs-meta\">!important<\/span>;\n}\n<span class=\"hljs-selector-class\">.fp-responsive<\/span> <span class=\"hljs-selector-id\">#section-2<\/span>{\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-number\">0<\/span>;\n}\n<span class=\"hljs-selector-class\">.fp-responsive<\/span> <span class=\"hljs-selector-class\">.content<\/span>{\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10%<\/span>;\n}\n<span class=\"hljs-selector-class\">.fp-responsive<\/span> <span class=\"hljs-selector-class\">.section-3-wrapper<\/span>{\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">10%<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"creating-tumblr-animations\">Creating Tumblr animations<\/h2>\n<p>Those are more a matter of CSS than anything else. I&#8217;m not going to explain them in detail here as this post is about creating the Tumblr layout itself and not its secondary animations.<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"..\/assets\/imgs\/2018-03-13\/tumblr-animations.gif\" alt=\"Emulating tumblr animations\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\"><\/figure>\n<p>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.<\/p>\n<p>They basically contain different <code>transition-delay<\/code> properties and look like this:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.blogs-post<\/span> {\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">3px<\/span>;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">300px<\/span>;\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">200px<\/span>);\n}\n<span class=\"hljs-selector-class\">.blogs-post-column<\/span>{\n    <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">0<\/span>);\n    <span class=\"hljs-attribute\">float<\/span>: left;\n    <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">300px<\/span>;\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">100px<\/span>);\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post-column<\/span>,\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post<\/span>{\n    <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">1<\/span>;\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">0<\/span>);\n    <span class=\"hljs-attribute\">transition<\/span>: opacity .<span class=\"hljs-number\">7s<\/span> <span class=\"hljs-built_in\">cubic-bezier<\/span>(.<span class=\"hljs-number\">165<\/span>,.<span class=\"hljs-number\">84<\/span>,.<span class=\"hljs-number\">44<\/span>,<span class=\"hljs-number\">1<\/span>),transform .<span class=\"hljs-number\">7s<\/span> <span class=\"hljs-built_in\">cubic-bezier<\/span>(.<span class=\"hljs-number\">165<\/span>,.<span class=\"hljs-number\">84<\/span>,.<span class=\"hljs-number\">44<\/span>,<span class=\"hljs-number\">1<\/span>);\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post-column<\/span><span class=\"hljs-selector-pseudo\">:first-child<\/span>{\n    <span class=\"hljs-attribute\">transition-delay<\/span>: .<span class=\"hljs-number\">08s<\/span>;\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post-column<\/span><span class=\"hljs-selector-pseudo\">:nth-child(2)<\/span>{\n    <span class=\"hljs-attribute\">transition-delay<\/span>: .<span class=\"hljs-number\">16s<\/span>;\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post-column<\/span><span class=\"hljs-selector-pseudo\">:nth-child(3)<\/span>{\n    <span class=\"hljs-attribute\">transition-delay<\/span>: .<span class=\"hljs-number\">24s<\/span>;\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post-column<\/span><span class=\"hljs-selector-pseudo\">:nth-child(4)<\/span>{\n    <span class=\"hljs-attribute\">transition-delay<\/span>: .<span class=\"hljs-number\">32s<\/span>;\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post<\/span><span class=\"hljs-selector-pseudo\">:first-child<\/span> {\n    <span class=\"hljs-attribute\">transition-delay<\/span>: .<span class=\"hljs-number\">08s<\/span>;\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post<\/span><span class=\"hljs-selector-pseudo\">:nth-child(2)<\/span> {\n    <span class=\"hljs-attribute\">transition-delay<\/span>: .<span class=\"hljs-number\">16s<\/span>;\n}\n<span class=\"hljs-selector-class\">.blogs-graphic<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.blogs-post<\/span><span class=\"hljs-selector-pseudo\">:nth-child(3)<\/span>{\n    <span class=\"hljs-attribute\">transition-delay<\/span>: .<span class=\"hljs-number\">24s<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>You can see them all inspecting the clone of Tumblr I created. The <a href=\"#\">CSS file<\/a> isn&#8217;t too big either in case you want to check it all.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Tumblr website uses a particular scrolling effect that doesn\u2019t go unnoticed. In this post I\u2019ll show you how I replicated and clone that exact behaviour in a matter of minutes. And of course, I\u2019ll also explain how to make it totally responsive. Ready for it?<\/p>\n","protected":false},"author":1,"featured_media":5100,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[40],"class_list":["post-5101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developing","tag-front-end"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5101"}],"version-history":[{"count":8,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5101\/revisions"}],"predecessor-version":[{"id":11799,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5101\/revisions\/11799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5100"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}