
Here’s a simple example of an animation you can add to your WordPress website (and how to make it triggered by scrolling into view).
This is done using only code (so if your sick of adding new plugins don’t worry you won’t need any).
A Simple Animation
So here’s a simple animation that triggers as soon as a page/post is loaded:
Custom HTML
This is added to a page/post with a couple simple classes in a Custom HTML block:
<div class="at-container">
<div class="at-item1">Animation</div>
</div>
Additional CSS
Those classes are then styled/animated with some Additional CSS:
/**
* ANIMATION
* EXPERIMENTS
*/
div.at-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.at-item1 {
color: #3079ed;
font-weight:bold;
font-size:3em;
animation-name: focus-in-zoomout;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
}
@keyframes focus-in-zoomout {
0% {
letter-spacing:1em;
transform:translateY(300px);
filter:blur(12px);
opacity:0;
}
100% {
transform:translateY(0px);
filter:blur(0);
opacity:1;
}
}
Triggering On Scroll
To trigger an animation when it scrolls into view you will need to use some JavaScript.
But don’t worry if you aren’t any good with this sort of thing, I have jammed it into a simple function.
JavaScript In A Function
This code is simply added to your theme/child-theme in “functions.php”.
/**
* Animation Triggered When Scroll Into View!
* (Triggers only on specific page/post!)
* Post: 4703
*/
function wpb_hook_javascript() {
if (is_single ('4703')) {
?>
<script type="text/javascript">
// your javscript code goes here
function scrollTrigger(selector){
let els = document.querySelectorAll(selector)
els = Array.from(els)
els.forEach(el => {
addObserver(el)
})
}
function addObserver(el){
// We are creating a new IntersectionObserver instance
let observer = new IntersectionObserver((entries, observer) => { // This takes a callback function that receives two arguments: the elements list and the observer instance.
entries.forEach(entry => {
// `entry.isIntersecting` will be true if the element is visible
if(entry.isIntersecting) {
entry.target.classList.add('active')
// We are removing the observer from the element after adding the active class
observer.unobserve(entry.target)
}
})
})
// Adding the observer to the element
observer.observe(el)
}
scrollTrigger('.at-item2')
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Additional CSS
You will want to split the animation from the basic styling of the classes like this:
/**
* ANIMATION
* EXPERIMENTS
*/
div.at-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.at-item2 {
color: #3079ed;
font-weight:bold;
font-size:3em;
}
@keyframes focus-in-zoomout {
0% {
letter-spacing:1em;
transform:translateY(300px);
filter:blur(12px);
opacity:0;
}
100% {
transform:translateY(0px);
filter:blur(0);
opacity:1;
}
}
.at-item2.active {
animation-name: focus-in-zoomout;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
}
Custom HTML
And then simply add the Custom HTML block to your page/post (not I have changed the name of one of the classes to show the difference here):
<div class="at-container">
<div class="at-item2">Animation</div>
</div>
Result
And this results in an animation that only runs when you scroll until it’s visible:
If this was helpful for you please leave a comment.
And feel free to suggest any other similar topics you would like explained!