anime.js – JS-библиотека, способная творить чудеса с Вашим сайтом. А именно легко управлять анимацией.
Данная библиотека позволяет легко и быстро создать не просто интерактивный сайт, а живой и наполненный всевозможными эффектами, к тому же, чтобы её освоить, не нужно тратить часы. Для этого можно просто зайти на официальный сайт и взять примеры прямо из документации.
На всякий случай сохранил документацию по Anime.JS.
Больше примеров на CodePen.
Возьмем чистый лист и добавим анимации:.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test anime.js</title>
</head>
<body style="background-color:#333">
<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js" integrity="sha256-pD9KZEZQimTLQOMTT99lBhGT7AXyMPz3g92G1iyd470=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="fc fw pp">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
<div class="p9"></div>
</div>
</body>
</html>
Стили:
<style>
.fc{display: flex;justify-content: center;align-items: center}
.fw{flex-wrap: wrap}
.pp{position:fixed;top:0;right:0;bottom: 0;left:0}
.pp div{width:33.3%;height:33.3%;background: rgba(255,255,255,.7)}
.p1,.p2,.p3,.p4{transform-origin:100% 0}
.p3,.p6{transform-origin:100% 100%}
.p8,.p9,.p7{transform-origin:0 0}
.p5{transform-origin:100% 50%}
</style>
JS:
<script>
let duration_=200;
anime.timeline()
.add({
targets: '.pp .p1',
opacity:0,
duration:duration_,
rotateY:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p2',
opacity:0,
duration:duration_,
rotateY:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p3',
opacity:0,
duration:duration_,
rotateX:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p6',
opacity:0,
duration:duration_,
rotateX:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p9',
opacity:0,
duration:duration_,
rotateY:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p8',
opacity:0,
duration:duration_,
rotateY:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p7',
opacity:0,
duration:duration_,
rotateX:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p4',
opacity:0,
duration:duration_,
rotateY:'90deg',
easing: 'linear'
})
.add({
targets: '.pp .p5',
opacity:0,
duration:duration_,
rotateY:'90deg',
scale:0,
easing: 'linear',
complete:function () {
$('.pp').remove()
}
});
</script>
