How to implement a scrolling jigsaw effect

Add an effect that animates individual elements in response to the user scrolling the webpage

1.InitiatetheHTMLdocument ThefirststepoftheprojectistoinitiatetheHTML document. This consists of definitions of the HTML document container, which contains a head and body section.Whiletheheadsectionisprimarilyusedto referenceexternalCSSandJavaScriptresources,the body section is used to store the visible HTML content.

<!DOCTYPE html> <html>
<head>

<title>Animated Scrolling Shapes</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

<script src=”code.js” type=”text/ javascript”></script>
</head>
<body>

*** STEP 2 HERE </body>

</html>

2. Body content
The main content consists of a container that stores the elements that are to be animated. For this example, these are span elements that present individual numbers, with styling being defined later in the CSS. You can change them to another element type such as img elements for your own project.

<article class=”jigsawAnim”> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span>

</article>

3. JavaScript styling
With the HTML now complete, create a new file called code.js. The first part of this code is responsible for attaching some style properties to each element inside the container defined in step 2. Take note of how this is all executed inside a function applied to a ‘load’ event listener of the window; the code will fail if it executes before the page has fully loaded.

window.addEventListener(“load”,function(){ var cssRef = “.jigsawAnim > *”;
var nodes = document.

querySelectorAll(cssRef);

for(var i=0; i<nodes.length; i++){ nodes[i].style.top = “0”; nodes[i].setAttribute(“data-speed”,Math.

floor(Math.random()*10)+2); }

*** STEP 4 HERE });

4. Scroll interactions
The explosion e ect occurs in response to the user scrolling the page, hence the requirement to define these visual changes via JavaScript. This step applies a ‘scroll’ event listener to the window, upon which will update the rotation, position and opacity of elements referenced in step 3 with new calculations based on the page window scroll position.

window.addEventListener(“scroll”,functi on(){

var nodes = document. querySelectorAll(cssRef);

for(var i=0; i<nodes.length; i++){

var speed = window.scrollY/ parseInt(nodes[i].getAttribute(“data- speed”));

nodes[i].style.transform = “rotate(“+speed+”deg)”;

nodes[i].style.top = speed+”px”; nodes[i].style.opacity = 1-(speed/100); if(i >= (nodes.length-2)/2)nodes[i].

style.left = speed+”px”; else nodes[i].style.left =

“-“+speed+”px”; }

});

5. CSS initiation
With the JavaScript code now complete, the next step is to initiate the CSS stylesheet; create a new file called styles.css. The first rule sets the page size to a minimum of four times the height of the browser screen to guarantee scrolling – which is required for the e ect to work.

html,body{ min-height: 400vh;

}

6. General jigsaw style
The jigsaw consists of two types of element: the parent container and its children. The parent is set with fixed positioning in relation to the browser window now, not the page document. The children use relative positioning,

for(var i=0; i<nodes.length; i++){ nodes[i].style.top = “0”; nodes[i].setAttribute(“data-speed”,Math.

floor(Math.random()*10)+2); }

*** STEP 4 HERE });

4. Scroll interactions
The explosion e ect occurs in response to the user scrolling the page, hence the requirement to define these visual changes via JavaScript. This step applies a ‘scroll’ event listener to the window, upon which will update the rotation, position and opacity of elements referenced in step 3 with new calculations based on the page window scroll position.

window.addEventListener(“scroll”,functi on(){

var nodes = document. querySelectorAll(cssRef);

for(var i=0; i<nodes.length; i++){

var speed = window.scrollY/ parseInt(nodes[i].getAttribute(“data- speed”));

nodes[i].style.transform = “rotate(“+speed+”deg)”;

nodes[i].style.top = speed+”px”; nodes[i].style.opacity = 1-(speed/100); if(i >= (nodes.length-2)/2)nodes[i].

style.left = speed+”px”; else nodes[i].style.left =

“-“+speed+”px”; }

});

5. CSS initiation
With the JavaScript code now complete, the next step is to initiate the CSS stylesheet; create a new file called styles.css. The first rule sets the page size to a minimum of four times the height of the browser screen to guarantee scrolling – which is required for the e ect to work.

html,body{ min-height: 400vh;

}

6. General jigsaw style
The jigsaw consists of two types of element: the parent container and its children. The parent is set with fixed positioning in relation to the browser window now, not the page document. The children use relative positioning,

Leave a Reply

Your email address will not be published. Required fields are marked *