In this Elementor tutorial I will show you how to add CSS transitions to your images on scroll.
This tutorial will be using some lightweight JavaScript and CSS code, so this will be a little more advanced of a tutorial. But don’t worry I will walk you through everything and explain how things work as we go.
CSS Transition Website:
https://www.transition.style/
Timestamps:
- 0:00 Introduction
- 1:32 Assign CSS Classes
- 3:09 Add JavaScript Code
- 6:51 Add CSS Code
JavaScript Code:
<script>jQuery(function($){
$(window).scroll(function() {
var $window = $(window),
$panel1 = $('.panel1');
$panel2 = $('.panel2');
$panel3 = $('.panel3');
$image1 = $('.image1');
$image2 = $('.image2');
$image3 = $('.image3');
var scroll = $window.scrollTop() + ($window.height() / 2);
$panel1.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$image1.addClass("imagewipe");
}
});
$panel2.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$image2.addClass("hesitate");
}
});
$panel3.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$image3.addClass("circlegrow");
}
});
// wickydesign.com
}).scroll();
});</script>
CSS Code:
@keyframes wipe-in-up {
to {
clip-path: inset(0 0 0 0);
}
}
.imagewipe {
animation: 5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}
@keyframes square-in-hesitate {
40% {
clip-path: inset(33% 33% 33% 33%);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.hesitate {
animation: 1s cubic-bezier(.25, 1, .30, 1) square-in-hesitate both;
}
@keyframes circle-in-center {
to {
clip-path: circle(100%);
}
}
.circlegrow {
animation: 20s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
}
