{"id":294,"date":"2026-02-18T13:08:33","date_gmt":"2026-02-18T13:08:33","guid":{"rendered":"https:\/\/kirstenalice.uk\/journal\/?p=294"},"modified":"2026-02-25T11:16:39","modified_gmt":"2026-02-25T11:16:39","slug":"how-the-css-scroll-function-can-be-used-to-create-animation-effects-such-as-parallax","status":"publish","type":"post","link":"https:\/\/kirstenalice.uk\/journal\/how-the-css-scroll-function-can-be-used-to-create-animation-effects-such-as-parallax\/","title":{"rendered":"How the CSS scroll() function can be used to create animation effects, such as parallax"},"content":{"rendered":"\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/seminar-slides-css-scroll-animations-2.pdf\" type=\"application\/pdf\" style=\"width:100%;height:490px\" aria-label=\"Embed of seminar-slides-css-scroll-animations.\"><\/object><a id=\"wp-block-file--media-0421eb6e-0289-49cd-8db3-b20e786fcbf4\" href=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/seminar-slides-css-scroll-animations-2.pdf\">seminar-slides-css-scroll-animations<\/a><a href=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/seminar-slides-css-scroll-animations-2.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-0421eb6e-0289-49cd-8db3-b20e786fcbf4\">Download<\/a><\/div>\n\n\n\n<p class=\"has-text-align-left\"><a href=\"https:\/\/www.canva.com\/design\/DAHBb4UIYY0\/ewHVnIqmZsjT8Jf6dnLtlg\/view?utm_content=DAHBb4UIYY0&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=uniquelinks&amp;utlId=h553a91aa0f\"><em>View seminar slides online (working codepens!)<\/em><\/a> <\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">So, what actually is the css scroll function?<\/h2>\n\n\n\n<p>The CSS scroll() function works within CSS to transform a regular animation into a scroll-driven animation. We can use this function to create animation effects, including parallax, scroll progress bars, and image fade-ins.<\/p>\n\n\n\n<p>It works by telling the browser: run this animation when the user scrolls the page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why should we use it?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Enhanced User Experience<\/h3>\n\n\n\n<p>By tying the animation to a user&#8217;s scroll position, it can enhance the user&#8217;s experience by giving them a sense of control. It feels interactive! As they scroll down the page, they are the ones making things happen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">No JavaScript!<\/h3>\n\n\n\n<p>Until recently, these kinds of effects were only achievable with the use of JavaScript. So by using only CSS, we can make our websites more <strong>reliable and load faster.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Parallax<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" data-id=\"333\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-18-123208-1-1024x597.png\" alt=\"\" class=\"wp-image-333\" style=\"width:475px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-18-123208-1-1024x597.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-18-123208-1-300x175.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-18-123208-1-768x448.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-18-123208-1-1536x895.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-18-123208-1-2048x1194.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" data-id=\"334\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-8-1024x586.png\" alt=\"\" class=\"wp-image-334\" style=\"width:476px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-8-1024x586.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-8-300x172.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-8-768x439.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-8-1536x879.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-8-2048x1171.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/codepen.io\/kirstenalice\/pen\/ByzbJxd\"><em>See parallax in action<\/em><\/a><\/p>\n\n\n\n<p>One of the animation effects that the scroll function can be used to create is Parallax. <\/p>\n\n\n\n<p>The parallax effect is an illusion created when background and foreground content move at different speeds relative to one another. When the background is moving more slowly, it tricks our eyes into thinking it is further away; this gives the page a sense of depth as there is a clear divide between the background and foreground.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scroll Progress Bar<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" data-id=\"322\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-2-1024x502.png\" alt=\"\" class=\"wp-image-322\" style=\"width:437px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-2-1024x502.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-2-300x147.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-2-768x376.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-2-1536x753.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-2-2048x1003.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"544\" data-id=\"303\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-1-1024x544.png\" alt=\"\" class=\"wp-image-303\" style=\"width:474px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-1-1024x544.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-1-300x159.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-1-768x408.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-1-1536x816.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-1-2048x1088.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/codepen.io\/kirstenalice\/pen\/azZXaqo\"><em>See scroll progress bar in action<\/em><\/a><\/p>\n\n\n\n<p>The scroll progress bar is a horizontal bar that sticks to the top of the screen, filling up across the width as you scroll down the page. It is used to show the user how far down the page they are.<\/p>\n\n\n\n<p>It is useful for long chunks of text, like an article or even a book. By giving our users a visual aid, we are providing them with an enhanced user experience and encouraging them to actually read to the bottom of the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fade-in images<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" data-id=\"325\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-4-1024x620.png\" alt=\"\" class=\"wp-image-325\" style=\"width:405px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-4-1024x620.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-4-300x182.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-4-768x465.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-4-1536x929.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-4.png 1770w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" data-id=\"327\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-6-1024x573.png\" alt=\"\" class=\"wp-image-327\" style=\"width:408px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-6-1024x573.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-6-300x168.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-6-768x430.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-6-1536x860.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-6.png 1759w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/codepen.io\/kirstenalice\/pen\/zxBXGNx\"><em>See the fade-in animation in action<\/em><\/a><\/p>\n\n\n\n<p>More commonly used is the image fade-in, where the image fades in as you scroll down the page. This can help to draw attention to the image and make it feel more interactive for the user.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How does it actually work?<\/h2>\n\n\n\n<p>We can create scroll-driven animations by changing the <strong>animation timeline<\/strong> to <strong>scroll()<\/strong>, which tells the browser to play them as the user scrolls rather than over time.<\/p>\n\n\n\n<p>A basic CSS animation consists of <strong>keyframes <\/strong>to define <em>what changes<\/em> in the animation, and <strong>animation properties<\/strong> to define <em>when<\/em> and <em>how <\/em>the animation takes place. The animation is tied to the keyframes with a unique name (<em>&#8216;fade-in<\/em>&#8216; in the example below).<\/p>\n\n\n\n<p><strong>So if a basic CSS fade-in animation looked like this:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<pre class=\"wp-block-code has-background-color has-body-text-background-color has-text-color has-background has-link-color wp-elements-d64e8ff6ddba3f229f78453385062733\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><code><strong>@keyframes fade-in {\nfrom { opacity: 0; }\nto { opacity: 1; }\n}\nimg {\nanimation: fade-in 4s forwards;\n}<\/strong><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Untitled\" src=\"https:\/\/codepen.io\/kirstenalice\/embed\/preview\/yyJwjQR?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=yyJwjQR#?secret=S854SObJZI\" data-secret=\"S854SObJZI\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<p><strong>A CSS scroll-driven fade-in animation would look like this:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<pre class=\"wp-block-code has-background-color has-body-text-background-color has-text-color has-background has-link-color wp-elements-b1c788db533394e72677d2da80b1c29d\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><code><strong>@keyframes fade-in {\nfrom { opacity: 0; }\nto { opacity: 1; }\n}\nimg {\nanimation: fade-in;\nanimation-timeline: scroll();\n}\nbody {\nmargin-bottom: 200px;\n}<\/strong><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Untitled\" src=\"https:\/\/codepen.io\/kirstenalice\/embed\/preview\/zxBXGNx?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=zxBXGNx#?secret=onMnQc1gxB\" data-secret=\"onMnQc1gxB\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Zoom out to 0.5 for best results<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<p><strong>The key differences in the code:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Addition of <strong>animation-timeline<\/strong> property<\/li>\n\n\n\n<li><em>Most<\/em> animation properties other than the animation name become redundant and can be removed (some exceptions)<\/li>\n\n\n\n<li>Additional margin to ensure <strong>scrollability<\/strong> (only if the page doesn&#8217;t have enough content yet to scroll)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">How can we use it to create <strong>Parallax<\/strong>?<\/h3>\n\n\n\n<p>To create the parallax effect shown earlier, we need to create a separate background element. This can be done either with an empty &lt;div&gt; element in our HTML or with a pseudo-element in our CSS. To keep it more semantic and reduce presentational markup, it is better to keep this in the CSS; either will work.<\/p>\n\n\n\n<p style=\"padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)\"><em>We don&#8217;t want to just apply the background to the body on this occasion, as the body is not an element, it will not behave as we want it to.<\/em><\/p>\n\n\n\n<p style=\"padding-right:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\"><\/p>\n\n\n\n<p>We need to apply a few properties to this new element to ensure it acts as a background:<\/p>\n\n\n\n<pre class=\"wp-block-code has-background-color has-body-text-background-color has-text-color has-background has-link-color wp-elements-21359b0c1cac03e0056a625fab435b9d\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><code>    <strong>position: absolute;<\/strong> <em>\/*Removes from normal flow*\/<\/em>\n    <strong>inset: 0;<\/strong> <em>\/*Starts at the top*\/<\/em>\n    <strong>z-index: -1;<\/strong> <em>\/*Sits behind content*\/<\/em>\n    <strong>min-height: 200vh;<\/strong><em> \/*scrollable*\/<\/em><\/code><\/pre>\n\n\n\n<p>Once the element itself is set up, we can set the <strong>background image,<\/strong> add the <strong>animation property<\/strong> and apply the <strong>scroll() function<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-background-color has-body-text-background-color has-text-color has-background has-link-color wp-elements-10d3ef46ee4ebd31882dc973d205bc40\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><code>    <strong>background: url(scene.jpeg) no-repeat;\n    background-size: 140%;\n    animation: bg-shift;\n    animation-timeline: scroll();<\/strong><\/code><\/pre>\n\n\n\n<p>Our animation <strong>keyframes<\/strong> need to be used to <em>move our background up at a slower pace than the foreground content when we scroll.<\/em> This will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-background-color has-body-text-background-color has-text-color has-background has-link-color wp-elements-00cc15e443326718eac3bd7206224e7d\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><code><strong>@keyframes bg-shift {\n  from { background-position: 0 0; }\n  to   { background-position: 0 -300px; }\n}<\/strong><\/code><\/pre>\n\n\n\n<p>With background-position, we can shift the background along the Y axis by -300px.<\/p>\n\n\n\n<p class=\"has-text-align-center\" style=\"padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)\"><em>This only works because it is scroll-activated!<\/em><\/p>\n\n\n\n<p>So let&#8217;s say the page is 2000px tall. As we scroll the entire page, the main contents will naturally shift along the Y axis by -2000px, so if simultaneously the background is only shifting -300px, it will be moving a lot slower. (which is what we are trying to achieve)<\/p>\n\n\n\n<p>This difference in speed is what creates the sense of depth in our page.<\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/kirstenalice\/pen\/ByzbJxd\">View the parallax effect in action here<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Scroll Parameters<\/h2>\n\n\n\n<pre class=\"wp-block-code has-background-color has-body-text-background-color has-text-color has-background has-link-color has-moderate-font-size wp-elements-876a376af880e819e01e5a0f553bbba0\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--80)\"><code>animation-timeline: scroll(<strong><em>What Goes Here?<\/em><\/strong>)<\/code><\/pre>\n\n\n\n<p>We can control the scroll parameters in these brackets. In most cases, we can leave it empty; this tells the browser to find the nearest scrollable ancestor and use the Y axis of this as our scroll parameter. <\/p>\n\n\n\n<p>So, for example, if we have an &lt;img> element inside of a &lt;section> element that spans just beyond the height of the viewport, this would work perfectly for the fade-in animation. The animation will begin as we start scrolling that section and end when we get to the end of the section. Whereas if we used scroll(root), or if our &lt;img> doesn&#8217;t have a parent element before &lt;body>, the &lt;img> element would only reach the end of its animation timeline when we reach the end of the page, so we likely won&#8217;t even see it, as it will no longer be in the viewport.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-9-1024x577.png\" alt=\"\" class=\"wp-image-357\" style=\"aspect-ratio:1.774710323727029;width:538px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-9-1024x577.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-9-300x169.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-9-768x432.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-9-1536x865.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/image-9-2048x1153.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>There are some accessibility hurdles with these animations that we must consider. Millions of users worldwide suffer from motion sensitivity. For these users, any motion driven by a scroll can cause them discomfort or nausea. If they come across our site with these scroll() animations, they will just click off the page &#8211; they are not sticking around to read all of our content.<\/p>\n\n\n\n<p>Most modern browsers now have an accessibility setting to &#8216;reduce motion&#8217; for these users. We can make use of this and wrap all of our scroll-driven animations inside of a media query. This tells the browser to only apply the animations if the user has no preference set up.<\/p>\n\n\n\n<pre class=\"wp-block-code has-background-color has-body-text-background-color has-text-color has-background has-link-color has-moderate-font-size wp-elements-d9876b1d6b846c6163792b37e8af3a15\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--80)\"><code>@media (prefers-reduced-motion: no-preference) { \n<em>scroll animations go here<\/em>\n }<\/code><\/pre>\n\n\n\n<p><br>So by default, everyone will receive the animations but anyone who has set their preference to &#8216;prefers reduced motion&#8217; will still be able to enjoy our sites without these animations. We want everyone to be able to view our content and have a positive experience on our website, which is why this is so important.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Browser Support<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"484\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-10-211240-1024x484.png\" alt=\"\" class=\"wp-image-359\" style=\"aspect-ratio:2.115691421083555;width:732px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-10-211240-1024x484.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-10-211240-300x142.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-10-211240-768x363.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-10-211240-1536x726.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-10-211240-2048x968.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><br><\/strong>The scroll() function only started to roll out in 2023 so is still a fairly new feature. Although it is widely supported now, it is still considered experimental within Firefox. We can manually enable it within Firefox by going to our configuration settings and setting <strong>layout.css.scroll-driven-animations.enabled<\/strong> to <strong><em>true<\/em><\/strong>. It&#8217;s worth setting this up if you will be testing it in Firefox.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"208\" src=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-13-194328-1024x208.png\" alt=\"\" class=\"wp-image-360\" style=\"aspect-ratio:4.923317319430411;width:694px;height:auto\" srcset=\"https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-13-194328-1024x208.png 1024w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-13-194328-300x61.png 300w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-13-194328-768x156.png 768w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-13-194328-1536x312.png 1536w, https:\/\/kirstenalice.uk\/journal\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-13-194328.png 1657w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It is important to keep in mind that there will still be many users who will not see our scroll-driven animations, so we must design for them as well.<\/p>\n\n\n\n<p><a href=\"https:\/\/caniuse.com\/?search=scroll%28%29\">Check the most recent browser support for scroll() here<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>View seminar slides online (working codepens!) So, what actually is the css scroll function? The CSS scroll() function works within CSS to transform a regular animation into a scroll-driven animation. We can use this function to create animation effects, including parallax, scroll progress bars, and image fade-ins. It works by telling the browser: run this [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-294","post","type-post","status-publish","format-standard","hentry","category-graded-work"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/posts\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/comments?post=294"}],"version-history":[{"count":19,"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/posts\/294\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/posts\/294\/revisions\/363"}],"wp:attachment":[{"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/media?parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/categories?post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kirstenalice.uk\/journal\/wp-json\/wp\/v2\/tags?post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}