Sup guys. I’m trying to recreate this intro ([https://abianalvarez.com](https://abianalvarez.com)) to a website I’m creating in WordPress but can’t really figure it out. I’ve tried using ChatGPT but haven’t gotten any luck.
As far as it looks like to me it’s kind of like a “divi theme home page intro reveal” type things, but I can’t find anything online that can achieve this effect.
Effect I’m trying to achieve is the intro to a page. Kind of like a layer, introducing the name of the site and it scrolls up automatically after a few seconds introducing the contents underneath it which would be the Home page.
If anyone has any idea on how to achieve this, I’d be eternally grateful. Currently working with DIVI theme builder. My coding is minimal. But I try. I doubt I’m going to learn the hard stuff. I just know how to get around the basics. Please don’t take the piss out of my bad coding skills, hence me looking for help.
Thanks once again in advance to all of you.
[ad_2]
Firstly, the site’s not using WordPress.It was hard coded.
This is the code that’s pulling off the effect that you’re after:[https://abianalvarez.com/js/intro.js])
Here’s the same code unminified, so you can read it better; Feed it into GPT and it should be able to help you out more.
anime.timeline({ loop: true })
.add({
targets: ‘.ml3 .letter’,
opacity: [0, 1],
easing: “easeInOutQuad”,
duration: 2250,
delay: function(el, i) {
return 150 * (i + 1)
}
})
.add({
targets: ‘.ml3’,
opacity: 0,
duration: 1000,
easing: “easeOutExpo”,
delay: 1000
});
TweenMax.from(“.overlay”, 2, { ease: Power2.easeInOut });
TweenMax.to(“.overlay”, 2, {
delay: 2.6,
top: “-110%”,
ease: Expo.easeInOut,
onComplete: function() {}
});
TweenMax.to(“.overlay-2”, 2, {
delay: 2.8,
top: “-110%”,
ease: Expo.easeInOut,
onComplete: function() {
$(“body”).css(“overflow-y”, “scroll”);
$(“.fondo-intro”).css(“visibility”, “hidden”);
$(“.fondo-intro”).css(“display”, “none”);
}
});
Pay close attention to the bottom: it’s waiting 2.8 seconds, then moving it -110% (off the screen) to the top. And it’s using the “ease” effect. And then just outright adding css to hide it.
GPT should be able to help you from here. good luck!