Lo que intento realizar es un scroll reveal al llegar a cierto punto de mi página web, sin embargo, no quiero hacerlo con jQuery, ¿Por qué?, sencillamente porque creo que hay una mejor forma de realizar lo que quiero hacer, verán principalmente hice lo siguiente en jQuery:
class objects {
constructor(object1, object2, state) {
this.object1 = object1;
this.object2 = object2;
this.state = state;
}
get objects1() {
return this.object1;
}
get objects2() {
return this.object2;
}
get state1() {
return this.state;
}
}
function altura(objectsAnimated) {
$(document).ready(function () {
var altura = $(`${objectsAnimated.objects1}`).offset().top;
$(window).on(`scroll`, function () {
if ($(window).scrollTop() > altura) {
$(`${objectsAnimated.objects2}`).addClass(`${objectsAnimated.state1}`);
}
});
});
}
let objectsAnimated1 = new objects("#after-images", ".image-1", "active-1");
altura(objectsAnimated1);
let objectsAnimated2 = new objects("#after-images", ".image-2", "active-2");
altura(objectsAnimated2);
let objectsAnimated3 = new objects("#after-images", ".image-3", "active-3");
altura(objectsAnimated3);
let objectsAnimated4 = new objects("#after-images", ".image-4", "active-4");
altura(objectsAnimated4);
Después en mi css realice las animaciones correspondientes a el estado activo del 1 al 4, entonces realice lo siguiente:
.active-1{animation: entradaImagen1 0.5s 0.6s ease-out forwards;}
.active-2{animation: entradaImagen2 0.5s 0.6s ease-out forwards;}
.active-3{animation: entradaImagen3 0.5s 1s ease-out forwards;}
.active-4{animation: entradaImagen4 0.5s 1s ease-out forwards;}
@keyframes entradaImagen1{
from{
opacity: 0;
transform: translateY(-20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes entradaImagen2{
from{
opacity: 0;
transform: translateY(20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes entradaImagen3{
from{
opacity: 0;
transform: translateX(-20px);
}
to{
opacity: 1;
transform: translateX(0);
}
}
@keyframes entradaImagen4{
from{
opacity: 0;
transform: translateX(20px);
}
to{
opacity: 1;
transform: translateX(0);
}
}
El html no es nada especial, texto de relleno hasta que pueda hacer suficiente scroll para poder apeciar el efecto.
Ahora mi duda es ¿Puedo realizar el mismo efecto sin jQuery?, ¿Mi codigo realizado con jQuery esta bien hecho?