Certainly one of our well-liked tutorials on Tuts+ teaches readers how you can load in and animate content material with jQuery.
Whereas utilizing jQuery permits us to jot down comparatively much less quantity of code to realize the specified performance, it additionally will increase web page load time and introduces pointless dependency.
Except the web site you’re engaged on is already loading jQuery, you may wish to contemplate loading in and animating content material utilizing pure JavaScript. The unique tutorial was written a very long time in the past and the browser assist in addition to native JavaScript capabilities have improved lots throughout this time.
Webpage Markup and Styling
Since we try to duplicate the impact from the unique tutorial, it is smart to make use of the identical markup and styling for our webpages. Right here is the markup that we used within the authentic tutorial for reference:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<meta http-equiv="X-UA-Suitable" content material="IE=edge"> |
6 |
<meta title="viewport" content material="width=device-width, initial-scale=1.0"> |
7 |
<title>Dwelling</title> |
8 |
<hyperlink rel="stylesheet" href="model.css"> |
9 |
</head>
|
10 |
<physique>
|
11 |
<nav>
|
12 |
<ul>
|
13 |
<li><a href="index.html">Dwelling</a></li> |
14 |
<li><a href="about.html">About Us</a></li> |
15 |
<li><a href="crew.html">Our Group</a></li> |
16 |
<li><a href="contact.html">Contact</a></li> |
17 |
</ul>
|
18 |
</nav>
|
19 |
<span class="loader"></span> |
20 |
<part id="content material"> |
21 |
<img src="canine.svg" /> |
22 |
<h1>Embrace Pawsitivity, Remodel Lives!</h1> |
23 |
<p>Welcome to Pawsitive Care Basis, a devoted group working in direction of the well-being and safety of animals.</p> |
24 |
<p>Our animal Welfare NGO offers a spread of providers to assist animal welfare:</p> |
25 |
<ol>
|
26 |
<li>Rescue and rehabilitation of abused and deserted animals</li> |
27 |
<li>Adoption packages to seek out loving houses for animals in want</li> |
28 |
<li>Training and consciousness campaigns to advertise accountable pet possession</li> |
29 |
<li>Lobbying and advocacy for stronger animal safety legal guidelines</li> |
30 |
<li>Collaboration with native communities to implement spay/neuter packages</li> |
31 |
</ol>
|
32 |
</part>
|
33 |
<script src="load-content.js"></script> |
34 |
</physique>
|
35 |
</html>
|
The one distinction is that we have now removed jQuery and our load-content.js file will now have vanilla JS as a substitute of jQuery.
Right here is the CSS that we’ll be utilizing for our loader in addition to the content material:
1 |
.loader { |
2 |
background: white; |
3 |
width: 30px; |
4 |
peak: 30px; |
5 |
show: inline-block; |
6 |
place: absolute; |
7 |
proper: 2rem; |
8 |
prime: 1.2rem; |
9 |
animation: 0.5s infinite spin; |
10 |
border-radius: 50%; |
11 |
border-top: 5px strong black; |
12 |
border-bottom: 5px strong grey; |
13 |
}
|
14 |
@keyframes spin { |
15 |
0% { |
16 |
rework: rotate(0deg); |
17 |
}
|
18 |
100% { |
19 |
rework: rotate(360deg); |
20 |
}
|
21 |
}
|
22 |
|
23 |
part#content material { |
24 |
width: 100% !essential; |
25 |
}
|
To keep away from repetition, I might suggest you can undergo the authentic submit to see why I used this specific markup construction and CSS guidelines if something appears complicated.
The next picture exhibits what our webpage appears like as soon as all of the CSS is utilized:
Dealing with Web page Load and Hyperlink Clicks
You will need to be sure that our HTML doc has been absolutely parsed earlier than we begin manipulating the DOM. We do that by listening to the DOMContentLoaded occasion. We connect a callback operate to this occasion listener which executes as quickly because the DOMContentLoaded occasion fires. Right here is our preliminary code:
1 |
doc.addEventListener("DOMContentLoaded", () => { |
2 |
const loader = doc.querySelector(".loader"); |
3 |
const content material = doc.getElementById("content material"); |
4 |
const navLinks = doc.querySelectorAll("nav li a"); |
5 |
|
6 |
loader.model.show = "none"; |
7 |
});
|
At this level, we’re merely utilizing the querySelector(), getElementById(), and querySelectorAll() strategies to pick the wanted DOM components. You possibly can learn our tutorial on getting components by class, ID, tag title, or different selectors to find out how these strategies work.
Initially, we would like the loader to remain hidden. We obtain this by merely setting the worth of show property to none.
Place the next code contained in the callback operate now:
1 |
const handleClick = (occasion) => { |
2 |
occasion.preventDefault(); |
3 |
|
4 |
const loadURL = `${occasion.goal.getAttribute("href")}`; |
5 |
|
6 |
content material.model.show = "none"; |
7 |
loader.model.show = "block"; |
8 |
|
9 |
loadContent(loadURL); |
10 |
|
11 |
window.location.hash = occasion.goal.getAttribute("href").slice(0, -5); |
12 |
};
|
13 |
|
14 |
navLinks.forEach((hyperlink) => { |
15 |
hyperlink.addEventListener("click on", handleClick); |
16 |
});
|
We start by defining our click on handler. Inside handleClick, the very first thing we do is forestall the default motion from occurring by calling occasion.preventDefault(). We’re utilizing an arrow operate to outline our click on handler, due to this fact, we should use occasion.goal as a substitute of this with a view to entry our hyperlink aspect.
We get the worth of the href attribute of our navigation hyperlink as a result of we have now to go it to the loadContent() operate a bit later. At this level, we wish to cover the presently seen content material on the webpage and begin displaying the loader. We do that by altering the worth of the show property.
After that, we loop over all of the hyperlinks saved inside navLinks and add a click on occasion listener to them. The handleClick callback is hooked up to every of these occasion listeners on the similar time. This operate will get known as each time a type of hyperlinks is clicked.
Defining the loadContent() Methodology
Now, we have to outline the loadContent() operate. It should settle for our URL as its solely parameter after which make an AJAX request utilizing the Fetch API.
1 |
const loadContent = (url) => { |
2 |
content material.innerHTML = ""; |
3 |
fetch(url) |
4 |
.then((response) => { |
5 |
if (response.okay) { |
6 |
return response.textual content(); |
7 |
}
|
8 |
})
|
9 |
.then((html) => { |
10 |
const tempElement = doc.createElement("div"); |
11 |
tempElement.innerHTML = html; |
12 |
const extractedContent = tempElement.querySelector("#content material").innerHTML; |
13 |
content material.innerHTML = extractedContent; |
14 |
content material.model.show = "block"; |
15 |
loader.model.show = "none"; |
16 |
});
|
17 |
};
|
A name to the fetch() technique returns a Promise object that resolves to the Response of our request as soon as the server responds with headers. We examine if the request was profitable by checking the worth of the okay property of the response object. We return the webpage HTML as a string through the use of the textual content() technique if every thing is okay.
It is best to contemplate studying our tutorial on Promise fundamentals if all that is new to you.
Now that we have now our HTML, we make one other name to then() passing our returned HTML as a parameter. At this level, we solely wish to extract the content material that’s inside our part aspect with id content material. To take action, we create a brief aspect with all of our HTML after which name the querySelector() technique on this aspect to extract the HTML we would like.
Lastly, we set the show property of our content material part to block and the show property of the loader to none.
Including Animation to the Content material
You may need observed that we’re merely altering the worth of the show property for our #content material aspect to both block or none. There isn’t any animation concerned.
You’ll now learn to animate the content material. The simplest means to take action entails using CSS. Add the next traces to your model.css file:
1 |
#content material.fade-in { |
2 |
overflow: hidden; |
3 |
animation: fadeInAnimation 0.4s forwards; |
4 |
}
|
5 |
|
6 |
@keyframes fadeInAnimation { |
7 |
from { |
8 |
opacity: 0; |
9 |
max-height: 0; |
10 |
}
|
11 |
to { |
12 |
opacity: 1; |
13 |
max-height: 100vh; |
14 |
}
|
15 |
}
|
We have now merely outlined a keyframe animation which animates each the opacity and the max-height properties to present the identical impact as our authentic tutorial. The essential factor to notice right here is the forwards key phrase which is able to make our #content material aspect retain the ultimate computed values.
Now, you merely want so as to add the fade-in class to the #content material aspect through the use of the next line:
1 |
content material.classList.add("fade-in"); |
Merely add it beneath the road that units the content material show property to block.
Equally, you should take away the fade-in class from the content material aspect through the use of the next line:
1 |
content material.classList.take away("fade-in"); |
Last Ideas
On this tutorial, we discovered how you can load in and animate content material on a webpage utilizing a bit little bit of CSS and vanilla JavaScript. This can be a little bit trickier in comparison with utilizing jQuery. Nonetheless, you’ll be able to eliminate the overhead of downloading a complete library.
Now, get artistic and animate the web page content material nonetheless you need.
