1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 9 <title> 10 Parallax scrolling - CSS Animation 11 </title> 12 <meta 13 name="description" 14 content="Animate with parallax scrolling and Rellax" 15 /> 16 17 <link rel="stylesheet" href="//fast.fonts.net/cssapi/ac2fb2fd-d7da-40b3-b713-85f23384b3af.css" /> 18 <link rel="stylesheet" href="/css/main.css" /> 19 20 21 <link rel="canonical" href="/parallax/" /> 22 <link rel="alternate" type="application/rss+xml" title="CSS Animation" href="/feed.xml" /> 23 24 25 <meta property="twitter:card" content="summary" /> 26 <meta property="twitter:site" content="@cssanimation" /> 27 <meta property="twitter:creator" content="@donovanh" /> 28 <meta property="og:title" content="Parallax scrolling - CSS Animation" /> 29 <meta property="og:description" content="Animate with parallax scrolling and Rellax" /> 30 <meta property="og:image" content="/images/posts/moonrocks/home.png" /> 31 <meta property="og:url" content="/parallax/" /> 32 33 34 <meta name="mobile-web-app-capable" content="yes" /> 35 <link rel="icon" sizes="192x192" href="/images/favicons/favicon-192x192.png" /> 36 <meta name="apple-mobile-web-app-title" content="CSS Animation" /> 37 <meta name="apple-mobile-web-app-capable" content="yes" /> 38 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 39 <link rel="apple-touch-icon-precomposed" href="/images/favicons/apple-touch-icon-152x152.png" /> 40 <meta name="msapplication-TileImage" content="/images/favicons/apple-touch-icon-144x144.png" /> 41 <meta name="msapplication-TileColor" content="#fcf5f2" /> 42 43 <link rel="shortcut icon" href="/images/favicons/favicon.ico" /> 44 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" /> 45 46 47 <meta name="google-site-verification" content="5imT8mOKPjwxAqlEs9aU4uh4jBcsYQyMNdlKgU1Dja8" /> 48 49 <style> 50 .wow { 51 visibility: hidden; 52 } 53 </style> 54</head> 55 56 57 <body class=""> 58 59 60 <section class="post-header"> 61 62 <section class="logo"> 63 <a href="/"> 64 <section class="svg-logo"> 65 <a href="/"><img src="/images/rocky.svg" alt="CSS Animation"></a> 66 </section> 67 </a> 68 </section> 69 70 <section class="demo"> 71 <div class="post-header-container"> 72 <header class="header rellax" data-rellax-speed="14"> 73 <svg 74 class="example-logo" 75 width="2000px" 76 height="2000px" 77 viewBox="-400 -400 1000 1000" 78 version="1.1" 79 xmlns="http://www.w3.org/2000/svg" 80 xmlns:xlink="http://www.w3.org/1999/xlink" 81 > 82 <g 83 id="icon-1" 84 stroke="none" 85 stroke-width="1" 86 fill="none" 87 fill-rule="evenodd" 88 > 89 <circle 90 class="rellax" 91 data-rellax-speed="-1" 92 stroke="#000000" 93 stroke-width="3" 94 fill="#333333" 95 style="opacity:.5" 96 cx="100.5" 97 cy="100.5" 98 r="100.5" 99 ></circle> 100 <circle 101 class="rellax" 102 data-rellax-speed="-.5" 103 stroke="#000000" 104 stroke-width="3" 105 fill="#aaa" 106 style="opacity:.5" 107 opacity="0.9" 108 cx="100.5" 109 cy="99.225" 110 r="79.875" 111 ></circle> 112 <g class="rellax" data-rellax-speed="2"> 113 <g class="large-boulder" transform="translate(33.000000, 57.000000)"> 114 <polygon 115 fill="#E6E7E8" 116 points="36 0.15 83.025 0.15 99 12.525 102.6 24.9 134.1 68.775 106.275 78.6 61.275 73.425 8.625 75.45 0.9 61.125 0.9 44.475 12.225 37.8 23.625 16.2" 117 ></polygon> 118 <path 119 d="M8.25,74.325 L31.425,59.7 L47.85,58.5 L64.95,60.6 L83.025,50.325 L108.3,57.15 L134.1,68.775 L106.275,78.6 L61.275,73.425 L37.05,74.1 L8.25,74.325 Z M18.15,27.45 L34.425,28.125 L39.075,33.15 L22.05,39.375 L7.425,51.3 L0.9,45.45 L10.5,38.775 L18.15,27.45 Z M71.175,25.875 L73.875,19.2 L83.85,15.9 L97.5,27.225 L84.375,23.1 L75.825,27.225 L71.175,25.875 Z M37.425,38.85 L58.725,33.15 L70.95,36.375 L79.2,42.525 L74.55,48.225 L59.175,49.275 L45.75,51 L32.85,50.325 L27.225,56.4 L16.35,52.8 L37.425,38.85 Z" 120 fill="#D1D3D4" 121 ></path> 122 <polygon 123 id="body" 124 stroke="#000000" 125 stroke-width="3" 126 points="36 0.15 83.025 0.15 99 12.525 102.6 24.9 134.1 68.775 106.275 78.6 61.275 73.425 8.625 75.45 0.9 61.125 0.9 44.475 12.225 37.8 23.625 16.2" 127 ></polygon> 128 </g> 129 </g> 130 <g class="rellax" data-rellax-speed="1.5"> 131 <g 132 class="medium-boulder"
133 transform="translate(108.750000, 125.250000)" 134 > 135 <polygon 136 fill="#F1F2F2" 137 points="0.525 14.025 10.5 3.3 30.675 0.15 38.925 7.05 43.05 20.85 24.45 27.375 4.575 24.75" 138 ></polygon> 139 <polygon 140 fill="#D1D3D4" 141 points="0.525 13.8 18.6 19.35 30.975 18.225 40.275 11.55 43.05 20.625 24.45 27.225 4.575 24.525" 142 ></polygon> 143 <polygon 144 stroke="#000000" 145 stroke-width="3" 146 points="0.525 13.8 10.5 3.075 30.675 0 38.925 6.9 43.05 20.625 24.45 27.225 4.575 24.525" 147 ></polygon> 148 </g> 149 </g> 150 <g class="rellax" data-rellax-speed="1.25"> 151 <g class="small-boulder" transform="translate(70.500000, 123.750000)"> 152 <polygon 153 fill="#F1F2F2" 154 points="8.85 2.925 20.025 0 31.125 8.475 33.9 19.425 11.025 26.1 0.225 16.725 5.1 3.825" 155 ></polygon> 156 <polygon 157 fill="#E6E7E8" 158 points="3.9 6.975 14.325 17.625 26.1 12 32.025 12.075 33.9 19.425 11.025 26.1 0.525 15.6" 159 ></polygon> 160 <polygon 161 stroke="#000000" 162 stroke-width="3" 163 points="8.85 2.925 20.025 0 31.125 8.475 33.9 19.425 11.025 26.1 0.225 16.725 5.1 3.825" 164 ></polygon> 165 </g> 166 </g> 167 </g> 168 </svg> 169 </header> 170</div> 171
172<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>
vendor: 1 bytes, line 172
172
173<script> 174 var rellax = new Rellax(".rellax"); 175</script>
175 176 177<style> 178 .post-header-container { 179 background: #000; 180 } 181 .post-header nav a { 182 color: #aaa !important; 183 } 184 185 .post-header nav a:hover { 186 color: #00194e !important; 187 } 188 189 header { 190 align-items: center; 191 background: #000 192 url(https://cssanimation.rocks/levelup/public/03/04-end/images/moon.jpg) 193 center no-repeat; 194 background-size: 100% auto; 195 display: flex; 196 height: 28em; 197 position: relative; 198 overflow: hidden; 199 justify-content: center; 200 width: 100vw; 201 } 202 203 header:after { 204 content: ""; 205 background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 206 position: absolute; 207 top: 0; 208 right: 0; 209 bottom: 0; 210 left: 0; 211 } 212 213 .example-logo { 214 z-index: 10; 215 } 216 217 .heading { 218 color: white; 219 font-size: 6em; 220 line-height: 1; 221 margin: 0; 222 position: absolute; 223 right: 0; 224 left: 0; 225 bottom: 10vh; 226 text-align: center; 227 } 228</style> 229 230 </section> 231 232 <div class="absolute-nav"> 233 <nav> 234 <ul> 235 <li><a href="/courses/">Learn CSS Animation</a></li> 236 <li><a href="https://weekly.cssanimation.rocks">Weekly Newsletter</a></li> 237 </ul> 238</nav> 239 240 </div> 241 </section> 242 243<section class="container page-content"> 244 <section class="row"> 245 <article class="post-content nine columns "> 246 <h1 class="post-title" style="margin-bottom:4px;">Parallax scrolling</h1> 247 <p style="font-size: 14px;margin-top: 0;color: #aaa;" class="date">May 26, 2019</p> 248 249
249<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
249 250<p>Let's have some fun with parallax scrolling, using a handy JavaScript plugin called "Rellax" to animate a page with lots of elements scrolling at different speeds.</p> 251<p>For this tutorial you'll find the HTML and CSS you need to get started in <a href="https://cssanimation.rocks/levelup/public/03/03.zip">this sample code file</a>. Look for folder <code>03-start</code>. A completed version of this lesson's code is in the folder <code>03-end</code>.</p> 252<div class="videoWrapper"> 253```html 254<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vYhmUe3nEqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 255``` 256</div> 257<h2 id="what-is-parallax%3F" tabindex="-1">What is parallax?</h2> 258<p>Parallax movement is when things move at different speeds relative to each other. It's a popular effect that can be used to create an illusion of depth. If we're moving, we see objects close to us move faster than objects further away.</p> 259<p>The technique is popular in many places including video games, where it's usually seen in the layered backgrounds.</p> 260<p>In this example we see how parallax works when scrolling a website.</p> 261<p data-height="600" data-theme-id="light" data-slug-hash="zwdBzP" data-default-tab="result" data-user="donovanh" data-embed-version="2" data-pen-title="" class="codepen"> </p> 262<p>Each of these boxes scrolls upward as I scroll down the page. The box in the middle, marked "No parallax" is scrolling at the same speed as the page. To it's left is a box that scrolls faster, and the box on the right scrolls slower.</p> 263<p>This means that if I was to scroll the page up by 100 pixels, the "faster" box actually scrolls something like 130 pixels, and the "slower" box moves about 70 pixels.</p> 264<p>In this example I'm using a tool called <a href="https://dixonandmoe.com/rellax/">Rellax</a>.</p> 265<h2 id="rellax" tabindex="-1">Rellax</h2> 266<p>The JavaScript utility Rellax is a handy, and quite simple plugin created by the design agency Dixon and Moe. It's lightweight and has no need for jQuery, and we can call it in from either local file or by using a CDN.</p> 267<p>Looking into <a href="https://github.com/dixonandmoe/rellax/blob/master/rellax">the code</a> we find that it's using a very similar approach to our "show-on-scroll" code. It sets up a <code>loop</code> variable using "requestAnimationFrame", and then in each iteration uses CSS to <code>translate</code> each object by a calculated offset.</p> 268<p>It's worth taking a look through how this was built if you'd like to see how a nice simple JavaScript utility can be written and shared.</p> 269<p>Let's use it to bring our page some parallax movement.</p> 270<h2 id="starting-page" tabindex="-1">Starting page</h2> 271<p>To get started we have a space-themed page taking us on a trip to the moon. Along the way we pass a bunch of rocks. We can use Rellax to have these elements scroll at different speeds.</p> 272<p data-height="600" data-theme-id="light" data-slug-hash="gWxMLJ" data-default-tab="result" data-user="donovanh" data-embed-version="2" data-pen-title="" class="codepen"> </p> 273<p>We begin by adding Rellax to our page. In our <code>index.html</code> file, just before the closing <code>body</code> tag, add a reference to the script.</p> 274<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./javascripts/rellax.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 275<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 276 <span class="token keyword">var</span> rellax <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Rellax</span><span class="token punctuation">(</span><span class="token string">'.rellax'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 277</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre> 278<p>We also put in some JavaScript to activate Rellax. We pass the <code>Rellax</code> method a string that will be used to identify the elements it'll need to animate. In this case, we're going to use the class "rellax" on our elements.</p> 279<p>With this in place we can add the "rellax" class. Scrolling back up the HTML we can look for each of the <code>floating-rocks</code> elements.</p> 280<p>We add the <code>rellax</code> class to each like so.</p> 281<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>floating-rocks front-one rellax<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 282 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/rock1.svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 283<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre> 284<p>With the class applied to each of the rocks we can see the effect in the browser.</p> 285<p data-height="600" data-theme-id="light" data-slug-hash="xdXYKv" data-default-tab="result" data-user="donovanh" data-embed-version="2" data-pen-title="" class="codepen"> </p> 286<p>So it's working, the rocks are scrolling at a slower speed than the text, but it's not right yet. All the rocks are moving at the same speed as each other. We'd like to have some sit in front of the text and some behind, so let's achieve this using some Rellax settings.</p> 287<h2 id="rellax-settings" tabindex="-1">Rellax settings</h2> 288<p>When working with Rellax we have two pieces of data we can pass in that will change the way the movement occurs. The first is speed.</p> 289<p>We can tell each image to scroll at a different speed. The value is an integer where a negative number means it'll move more slowly than the normal scroll speed, and a positive number means it'll move at the same speed or faster.</p> 290<p>In our HTML we again go to each of the images but this time add a speed. It's written as a <code>data</code> attribute <code>data-rellax-speed</code>.</p> 291<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>floating-rocks front-one rellax<span class="token punctuation">"</span></span> <span class="token attr-name">data-rellax-speed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 292 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/rock1.svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 293<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre> 294<p>The first rock is a small one that sits in front so we'll give it a fast speed of "8". The second one is far back so it's going to have a speed of "-2". The next one in front again, so we'll give a positive value of "3". The next rock is also far back so we'll give it a speed of "-3".</p> 295<p>Lastly for planet earth we'll set it far back into the scene with a speed of "-4".</p> 296<p>There's one more thing, "centering".</p> 297<p>When Rellax calculates how far to move the elements it does so based on the height of the page. This means that elements further down the page will have moved more than elements at the top, as by the time we've scrolled all the way down there, they've been parallaxed to somewhere we may
297not expect.</p> 298<p>We can get around this using centering. This will adjust the element's position so that when we scroll to it, it'll still be visible on the page. We can either do this by adding a <code>data-rellax-percentage</code> value to each of the rocks, or we can set this globally in our original JavaScript at the bottom of the page.</p> 299<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 300 <span class="token keyword">var</span> rellax <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Rellax</span><span class="token punctuation">(</span><span class="token string">'.rellax'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> 301 <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token boolean">true</span> 302 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 303</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre> 304<p>In our JavaScript we add an object to be passed in to the <code>Rellax</code> method and in it we specify "center" be true. Back in our browser we can see the results.</p> 305<p data-height="600" data-theme-id="light" data-slug-hash="PmJQPj" data-default-tab="result" data-user="donovanh" data-embed-version="2" data-pen-title="" class="codepen"> </p> 306<p>The rocks now float in front as well as far away behind the text.</p> 307<p>Before we finish up this example, let's also see how Rellax can bring our header and footer elements to life.</p> 308<h2 id="animating-the-header-and-footer" tabindex="-1">Animating the header and footer</h2> 309<p>At the top our document we have a <code>header</code> element containing an SVG logo and heading text. The SVG is inline so we can apply Rellax to each of the individual parts. That way on scroll, the logo will come apart as it scrolls away.</p> 310<p>We start with the two <code>circle</code> elements.</p> 311<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rellax<span class="token punctuation">"</span></span> <span class="token attr-name">data-rellax-speed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-1<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000000<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#333333<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">opacity</span><span class="token punctuation">:</span>.5</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100.5<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100.5<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span> 312<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rellax<span class="token punctuation">"</span></span> <span class="token attr-name">data-rellax-speed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-.5<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000000<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#aaa<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">opacity</span><span class="token punctuation">:</span>.5</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">opacity</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.9<span class="token punctuation">"</span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100.5<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>99.225<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>79.875<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span></code></pre> 313<p>Adding a class of "rellax" to each we can specify speeds. These two are farthest away so we'll use negative values of "-1" and "-.5" so they move quite slowly.</p> 314<p>Next we have some <code><g></code> groups we can use to hook Rellax onto. The first contains the large boulder. We'll use this containing <code><g></code> rather than the <code>large-boulder</code> group as there's already a <code>transform</code> on that group. Since Rellax uses transforms, this would cause a clash so it's safest to use the container.</p> 315<p>We'll add the "rellax" class and give this a speed of "2".</p> 316<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rellax<span class="token punctuation">"</span></span> <span class="token attr-name">data-rellax-speed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> 317<p>We then do the same for the "medium-boulder" and "small-boulder" containers, giving them a speed of "1.5" and "1.25" so that they move a little slower than the large boulder.</p> 318<p>With that done lets add parallax to the heading. There's a gradient on the <code>header</code> element at the bottom that makes it fade to black. It would be cool if this text was to scroll in behind that gradient. We can do this by giving the title a very slow scroll speed.</p> 319<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heading rellax<span class="token punctuation">"</span></span> <span class="token attr-name">data-rellax-speed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>MOON ROCKS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre> 320<p>Lastly let's do the same with the header at the bottom of the page. Inside the <code>footer</code> element we apply the same thing but a speed of "-2" to the heading.</p> 321<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heading rellax<span class="token punctuation">"</span></span> <span class="token attr-name">data-rellax-speed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>MOON ROCKS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre> 322<p>Let's see how this is looking.</p> 323<p data-height="600" data-theme-id="light" data-slug-hash="ZKJOBe" data-default-tab="result" data-user="donovanh" data-embed-version="2" data-pen-title="" class="codepen"> </p> 324<h2 id="fixing-the-header" tabindex="-1">Fixing the header</h2> 325<p>After recording this lesson I noticed that the "center" setting caused the header and footer elements to position wrongly. Turns out the header elements don't need this to be set, and we can get around this by declaring another set of "Rellax" elements in the JavaScript.</p> 326<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> rellaxNonCentered <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Rellax</span><span class="token punctuation">(</span><span class="token string">'.rellax-non-centered'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> 327 <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token boolean">
327false</span> 328<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 329<p>By using the class "rellax-non-centered" on the header and footer elements instead of "rellax", this should fix the issue! The code in the <a href="https://cssanimation.rocks/levelup/public/03/03.zip">download zip file</a> has been updated with this change.</p> 330<h2 id="parallax-using-css" tabindex="-1">Parallax using CSS</h2> 331<p>While this example uses CSS and JavaScript for the positioning of the elements on scroll, it's possible to create a parallax effect using pure CSS. There's a <a href="https://developers.google.com/web/updates/2016/12/performant-parallaxing">great write-up of this approach</a> by Paul Lewis and Robert Flack that goes into more detail. It's a great approach and seems to perform well.</p> 332<h2 id="what-we-learned" tabindex="-1">What we learned</h2> 333<p>In this lesson we made use of a great JavaScript tool to create parallax movement on our page. Along the way we saw how this tool uses CSS transforms to move elements on scroll, using a similar <code>requestAnimationFrame</code> approach we've used ourselves. We also learned how to use Rellax with various speeds to create the illusion of depth on the page.</p> 334<h2 id="level-up-your-css-animation-skills!" tabindex="-1">Level up your CSS animation skills!</h2> 335<p>If you like this, you'll love my <a href="https://www.udemy.com/course/level-up-your-css-animation-skills/?referralCode=D358C1EDAB25E718B07A">video course on CSS animation</a>. As a fan of this site you can save over 90% on the course today.</p> 336<p><a href="https://www.udemy.com/course/level-up-your-css-animation-skills/?referralCode=D358C1EDAB25E718B07A">Save over 90% and Level Up Your CSS Animation Skills</a> today!</p> 337 338 339 <section class="post-footer"> 340 <section class="quote-container"> 341 <section class="rocky"> 342 <img src="/images/rocky.svg"> 343 </section> 344 <blockquote> 345 <p>Make sure to <a href="https://twitter.com/cssanimation">follow on Twitter</a> for all the latest updates!</p> 346 </blockquote> 347 </section> 348 </section> 349 </article> 350 351 <aside class="post-aside three columns"> 352 353 <section class="demo-link"> 354 <a href="https://codepen.io/donovanh/pen/ZKJOBe" class="button primary-button">Demo</a> 355 </section> 356 357 358 359 360 361 362 <section class="esteemed-benefactors"> 363
363<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBICK7W&placement=cssanimationrocks" id="_carbonads_js"></script>
363 364 </section> 365 </aside> 366 </section> 367</section> 368 369 <div class="email-signup" id="email-signup" style="max-width: 500px; margin: 0 auto"> 370 <h2>CSS Animation Weekly</h2> 371 <p>The latest tutorials and inspiration every week!</p> 372 <iframe 373 src="https://embeds.beehiiv.com/5c8b2503-5d81-4b56-8dd8-da3a39a1d3be?slim=true" 374 data-test-id="beehiiv-embed" 375 frameborder="0" 376 scrolling="no" 377 style="margin: 0; border-radius: 0px !important; background-color: transparent;" 378 ></iframe> 379</div> 380 381<footer class="footer"> 382 <section class="container"> 383 <section class="row"> 384 <p> 385 <a href="/cdn-cgi/l/email-protection#e58d8089898aa5869696848b8c8884918c8a8bcb978a868e96">Get in touch</a> 386 ⢠387 <a href="/courses/">CSS Courses</a> 388 </p> 389 </section> 390 <section class="row" style="text-align: center"> 391 <p> 392 393 394 395 <a href="/ar/">Ø§ÙØ¹Ø±Ø¨ÙØ©</a> 396 397 | 398 <a href="/cn/">䏿</a> 399 400 | 401 <a href="/da/">Danske</a> 402 403 | 404 <a href="/de/">Deutsch</a> 405 406 | 407 <a href="/es/">Español</a> 408 409 | 410 <a href="/fr/">Français</a> 411 412 | 413 <a href="/jp/">æ¥æ¬èª</a> 414 415 | 416 <a href="/nl/">Nederlands</a> 417 418 | 419 <a href="/pt/">Português</a> 420 421 | 422 <a href="/pl/">Polski</a> 423 424 | 425 <a href="/ru/">Ð ÑÌÑÑкий</a> 426 427 | 428 <a href="/tr/">Türkçe</a> 429 430 | 431 <a href="/id/">Bahasa Indonesia</a> 432 433 | 434 <a href="/bg/">бÑлгаÑÑки</a> 435 436 437 </p> 438 </section> 439 <section class="row"> 440 <p>© CSS Animation. Site by <a href="http://hop.ie">Donovan</a></p> 441 </section> 442 </section> 443</footer>
vendor: 110 bytes, lines 443-445
443 444 445<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
445<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
vendor: 1 bytes, line 445
445
446<script src="/javascript/site.js"></script>
vendor: 1 bytes, line 446
446
447<script src="/javascript/vendor/wow.min.js"></script>
447 448 449 450 451 452 453 454 455 456
457<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
vendor: 1 bytes, line 457
457
458<script>hljs.initHighlightingOnLoad();</script>
458 459
460<script>new WOW().init();</script>
460 461 462
462<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"fac2063444bc4e22981edbdf34a35def","r":1,"spa":2}' crossorigin="anonymous"></script>
462 463</body> 464</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.