如何分别为文本和图像实现不同的动画?

时间:2019-08-09 07:35:19

标签: css css-position css-animations

我正在实现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的位置才能破坏子元素的所有原始位置。是正确的方法吗?还是我必须使用其他方法?

0 个答案:

没有答案