В этом видео я покажу вам прикольный эффект при скролле, который точно привлечёт внимание на вашем WordPress сайте. Мы создадим анимацию, при которой логотип или текст будут увеличиваться при скролле, а затем вы плавно перейдёте к первому блоку сайта.
Я подробно объясню, как работает код, который мы будем использовать и покажу вам, как легко настроить его под свои нужды, чтобы вы могли адаптировать эффект для любого проекта.
JS код анимации
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>
<style>
Класс блока с логотипом {
transform-origin: calc(50% - 0px) calc(50% - 0px);
}
</style>
<script>
function run_gsap(){
let gsap_loaded = setInterval(function(){
const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
const screenSize = window.screen.width >= 1024;
if(window.gsap && window.ScrollTrigger && !eleBuilder && screenSize){
gsap.registerPlugin(ScrollTrigger);
overlay_zoom();
clearInterval(gsap_loaded);
}
}, 500);
function overlay_zoom(){
const eg = gsap.timeline({
scrollTrigger: {
trigger: 'Класс первого блока с контентом',
start: '0px top',
end: '900px center',
scrub:true,
pin: true
}
});
eg.to('Класс блока с логотипом', {scale: 100, duration:1});
eg.to('Класс блока с логотипом', {display:'none'}, '<');
}
}
run_gsap();
</script>
CSS код страницы
body {
overflow: hidden;
}
Класс блока с логотипом {
position: absolute;
top:0;
left: 0;
width: 100%;
}
Класс первого блока с контентом {
position: relative !important;
transform: translate(0px, 0px) !important;
}
