My goal here is to trigger an animated icon that floats around the screen when we hit the end of our scrolling. I’m going to add an icon I found on icones.js in a div with the id “mask”. My index.html now looks like: Document

Fun, fun fun!

In main.css, I’ll start the mask hidden (using the visibility property) and bind it to the animation that I’ll call mask-move. I’m also going to have the animation paused to begin with. In the @keyframe block, I’ll move the mask across the screen from the top left to the bottom right and I’ll change the color from blue to coral. My css looks like: body{ background-color:plum; } #container{ height:150vh; overflow:scroll; } #output{ height:100%; } #mask{ animation-name:mask-move; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: paused; visibility: hidden; filter:drop-shadow(1vw 1vw 1vw); } @keyframes mask-move{ 100%{ transform: translateY(100vh) translateX(100vw); color:coral; } 0%{ transform: translateY(10vh); color:blue; } } Finally, in the app.js file, we’ll select the mask element and change the event function to modify the visibility property on the mask to visible, and we’ll change the animation-play-stateto running. const element = document.querySelector("div#container"); const output = document.querySelector("div#output") const mask = document.querySelector("div#mask") element.addEventListener("scrollend", (event)=>{ mask.style["visibility"] = "visible"; mask.style["-moz-animation-play-state"]="running" }) Lets try it out! Sick!

Wat It Do Dot Dev

A technical blog

Posts tagged experimentation

Let's Screw Around with Scrollend