PageSourceSearch

https://cssanimation.rocks/parallax/

html cssanimation.rocks collected 2026-09-24 18:24:26 UTC 35,161 bytes, 464 lines download raw bytes

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 &quot;Rellax&quot; 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">&nbsp;</p>
262<p>Each of these boxes scrolls upward as I scroll down the page. The box in the middle, marked &quot;No parallax&quot; 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 &quot;faster&quot; box actually scrolls something like 130 pixels, and the &quot;slower&quot; 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 &quot;show-on-scroll&quot; code. It sets up a <code>loop</code> variable using &quot;requestAnimationFrame&quot;, 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">&nbsp;</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">&lt;</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">&lt;/</span>script</span><span class="token punctuation">></span></span>
275<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;/</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 &quot;rellax&quot; on our elements.</p>
279<p>With this in place we can add the &quot;rellax&quot; 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">&lt;</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">&lt;</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">&lt;/</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">&nbsp;</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">&lt;</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">&lt;</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">&lt;/</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 &quot;8&quot;. The second one is far back so it's going to have a speed of &quot;-2&quot;. The next one in front again, so we'll give a positive value of &quot;3&quot;. The next rock is also far back so we'll give it a speed of &quot;-3&quot;.</p>
295<p>Lastly for planet earth we'll set it far back into the scene with a speed of &quot;-4&quot;.</p>
296<p>There's one more thing, &quot;centering&quot;.</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">&lt;</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">&lt;/</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 &quot;center&quot; 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">&nbsp;</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">&lt;</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">&lt;/</span>circle</span><span class="token punctuation">></span></span>
312<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;/</span>circle</span><span class="token punctuation">></span></span></code></pre>
313<p>Adding a class of &quot;rellax&quot; to each we can specify speeds. These two are farthest away so we'll use negative values of &quot;-1&quot; and &quot;-.5&quot; so they move quite slowly.</p>
314<p>Next we have some <code>&lt;g&gt;</code> groups we can use to hook Rellax onto. The first contains the large boulder. We'll use this containing <code>&lt;g&gt;</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 &quot;rellax&quot; class and give this a speed of &quot;2&quot;.</p>
316<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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 &quot;medium-boulder&quot; and &quot;small-boulder&quot; containers, giving them a speed of &quot;1.5&quot; and &quot;1.25&quot; 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">&lt;</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">&lt;/</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 &quot;-2&quot; 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">&lt;</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">&lt;/</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">&nbsp;</p>
324<h2 id="fixing-the-header" tabindex="-1">Fixing the header</h2>
325<p>After recording this lesson I noticed that the &quot;center&quot; 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 &quot;Rellax&quot; 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 &quot;rellax-non-centered&quot; on the header and footer elements instead of &quot;rellax&quot;, 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>&copy; 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.