- Главная
- Анимация блоков сайта на ScrollMagik
Анимация блоков сайта на ScrollMagik
27 января 2023
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>
JS
//паралакс анимация
(function () {
$(document).ready(function () {
var controller = new ScrollMagic.Controller();
//интро
var tween = new TimelineMax()
.add(TweenMax.to(".intro .title-big, .intro .miniature", 2, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: ".intro", duration: 500, triggerHook: 0})
.setTween(tween)
.addTo(controller);
//звезды
var tween = new TimelineMax()
.add(TweenMax.to(".about .stars", 2, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: ".about", duration: 500, offcet: 300, triggerHook: 0})
.setTween(tween)
.addTo(controller);
//о нас
var tween = new TimelineMax()
.add(TweenMax.from(".about", 0.7, {top: 300}, {top: 1}));
new ScrollMagic.Scene({triggerElement: ".about", offset: 150, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller);
var tween = new TimelineMax()
.add(TweenMax.from(".about .description-about", 200, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: ".about", duration: 500, triggerHook: "onCenter"})
.setTween(tween)
.addTo(controller);
//об инвестициях
var tween = new TimelineMax()
.add(TweenMax.from(".invest-info .title-big", 0.7, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: ".invest-info", duration: "100%", offset: 200, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller);
var tween = new TimelineMax()
.add(TweenMax.from(".invest-info .descr-cont .two-item", 0.7, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: ".invest-info", duration: "100%", offset: 200, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller);
//раскрытие информации
$(function() {
var brands = document.querySelectorAll(".information-big");
for (var i = 0; i < brands.length; i++) {
var tween = new TimelineMax()
.add(TweenMax.from(brands[i], 10, {opacity: 0}, {opacity: 1}), 0.3);
new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller)
}
});
//фонды
$(function() {
var brands = document.querySelectorAll(".page-funds ol li");
for (var i = 0; i < brands.length; i++) {
var tween = new TimelineMax()
.add(TweenMax.from(brands[i], 10, {opacity: 0}, {opacity: 1}), 0.3);
new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller)
}
});
//этапы
$(function() {
var brands = document.querySelectorAll(".features-item");
for (var i = 0; i < brands.length; i++) {
var tween = new TimelineMax()
.add(TweenMax.from(brands[i], 10, {opacity: 0}, {opacity: 1}), 0.3);
new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller)
}
});
//новости
var tween = new TimelineMax()
.add(TweenMax.from(".news .title-big", 2, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: ".news", duration: 400, offset: 300, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller);
$(function() {
var brands = document.querySelectorAll(".news-item");
for (var i = 0; i < brands.length; i++) {
var tween = new TimelineMax()
.add(TweenMax.from(brands[i], 2, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller)
}
});
//контакты
var tween = new TimelineMax()
.add(TweenMax.from(".contacts", 1, {opacity: 0}, {opacity: 1}));
new ScrollMagic.Scene({triggerElement: ".contacts", duration: 200, offset: 150, triggerHook: "onEnter"})
.setTween(tween)
.addTo(controller);
});
})();
//паралакс анимация
Закажите у меня разработку сайта под ключ
и получите логотип в подарок в векторе и с исходниками
Заказать разработку
и получите логотип в подарок в векторе и с исходниками