我正在实现this site的效果,该效果分别显示了文本和图像的不同动画。
我尝试了很多事情,但无法顺利实施。我的尝试如下。它显示出相似的效果,但是我不确定这种方法是否正确。
const bgColors = ['#07131d', '#031f1c'];
const imgs = document.querySelectorAll('.swiper__img');
const mains = document.querySelectorAll('.swiper__img__main');
const lefts = document.querySelectorAll('.swiper__img__left');
const rights = document.querySelectorAll('.swiper__img__right');
const titles = document.querySelectorAll('.swiper__img__title');
imgs.forEach((img, index) => {
img.addEventListener('click', () => {
lefts[index].classList.remove('left-rotate');
lefts[index].classList.add('left-disappear');
rights[index].classList.remove('right-rotate');
rights[index].classList.add('right-disappear');
imgs[index].classList.add('swiper__break-position');
mains[index].classList.add('main__break-position');
titles[index].classList.remove('fade-in');
titles[index].classList.add('title__break-position');
});
});
body {
background-color: black;
}
.swiper__img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transition: top .5s;
width: 400px;
cursor: pointer;
}
.swiper__img:hover { top: 45%; }
.swiper__img:hover .swiper__img__left,
.swiper__img:hover .swiper__img__right { opacity: 0.5; }
.swiper__img:hover .swiper__img__left { left: -5%; }
.swiper__img:hover .swiper__img__right { right: -5%; }
.swiper__img__main {
position: relative;
z-index: 1;
background-image: url('https://user-images.githubusercontent.com/35518072/62710476-52b16780-ba32-11e9-85ce-23d2421e641e.png');
background-repeat: no-repeat;
background-size: cover;
padding-top: 150%;
}
.swiper__img__left,
.swiper__img__right {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url('https://user-images.githubusercontent.com/35518072/62710535-75dc1700-ba32-11e9-9b05-80bc6d9980a7.png');
background-repeat: no-repeat;
background-size: cover;
padding-top: 150%;
transition: all .5s;
}
.swiper__img__title {
font-size: 200px;
position: absolute;
left: 50%;
top: 50%;;
transform: translate(-50%,-20%);
color: white;
letter-spacing: 5px;
z-index: 2;
font-weight: 100;
font-family: 'Libre Caslon Display', serif;
transition: all .5s;
}
.left-rotate { transform: rotate(-5deg) translateX(-50%); }
.right-rotate { transform: rotate(5deg) translateX(50%); }
.no-rotate { transform: none; }
.fade-in { animation: fadeIn 1s both; }
.fade-out { animation: fadeOut 1s both; }
.left-disappear { animation: leftDisappear 1s both; }
.right-disappear { animation: rightDisappear 1s both; }
.swiper__break-position { animation: swiperBreakPosition 0s both .5s; }
.main__break-position { animation: mainBreakPosition 0s both 0s, mainBreakPosition2 1s both 1s; }
.title__break-position { animation: titleBreakPosition 1s both .5s; }
@keyframes mainBreakPosition {
from {
position: relative;
padding-top: 150%;
}
to {
position: absolute;
padding-top: 0;
height: 600px;
width: 400px;
left: 50%;
top: 50%;
transform: translate(-50%,-20%);
opacity: 0;
}
}
@keyframes mainBreakPosition2 {
from {
top: 55%;
opacity: 0;
}
to {
top: 50%;
opacity: 1;
}
}
@keyframes swiperBreakPosition {
from {
position: absolute;
}
to {
position: static;
transform: none;
}
}
@keyframes titleBreakPosition {
from {
top: 50%;
transform: translate(-50%,-20%);
}
to {
top: 5%;
transform: translate(-50%,0);
}
}
@keyframes leftDisappear {
from {
transform: rotate(-5deg) translateX(-50%);
}
to {
transform: rotate(-50deg) translate(-120%,10%);
opacity: 0;
}
}
@keyframes rightDisappear {
from {
transform: rotate(5deg) translateX(50%);
}
to {
transform: rotate(50deg) translate(120%,10%);
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
top: 55%;
}
to {
opacity: 1;
top: 50%;
}
}
@keyframes fadeOut {
from {
opacity: 1;
bottom: 0;
}
to {
opacity: 0;
bottom: -10%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Libre+Caslon+Display&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="fullpage" class="swiper">
<div class="swiper">
<div class="section">
<div class="swiper__img">
<div class="swiper__img__main"></div>
<div class="swiper__img__left"></div>
<div class="swiper__img__right"></div>
<h2 class="swiper__img__title">IRENE</h2>
</div>
</div>
</div>
</div>
</body>
</html>
很难控制swiper__img
的位置,但是我必须重新放置swiper__img
的位置才能破坏子元素的所有原始位置。是正确的方法吗?还是我必须使用其他方法?