In this video I will show you how I like to add page transitions to a WordPress website. This will be a more advanced tutorial as it will require custom coding. I won’t be using any page transition plugins as I find them very limiting when it comes to customization and performance.
The method I will be using is 100% CSS code so there won’t be any extra JavaScript bloat to your website.
Code Snippets Plugin:
https://wordpress.org/plugins/code-snippets/
Timestamps:
- 0:00 Introduction
- 1:50 Global Page Transitions
- 11:35 Target Certain Pages
Global Page Transitions Code:
add_action('wp_body_open', 'add_code_on_body_open');
function add_code_on_body_open() {
if ( is_single() || is_page() || is_front_page() || is_home() ) {
echo '
<style>
.page-transition{
display: block;
background: #5D9CC5;
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
z-index: 9999;
animation: loading 1.5s normal;}
#wickylogo {
animation: fadeOut 1s ease-in-out;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#wickylogo img{
position: absolute;
top: 50%;
left: 50%;
width: 40%;
transform: translate(-50%, -50%);
}
@keyframes loading {
0% {
height: 100%
}
60% {
height: 100%
}
100% {
height: 0%;
}
}
@keyframes fadeOut {
30% {opacity: 1;}
100% {opacity: 0;}
}
/* Small devices (mobile/tablets, 767px and below) */
@media only screen and (max-width: 766px) {
#wickylogo img{width: 75%;}
}
</style>
<div class="page-transition">
<div id="wickylogo">
<img decoding="async" src="image.svg" alt="alt text here">
</div>
</div>';
}
}
Target Certain Pages Code:
if ( is_page( array('services','resources','contact','about','portfolio')) ) { // for specific page
