任意のタイミングでアニメーション【cssとjquery】

2022/5/3 中級者, 初心者

このエントリーをはてなブックマークに追加
Pocket

cssでアニメーションは記述できますが、任意のタイミングでアニメーションを開始する方法を書きます。

過去に作成したスクロールしたら要素が出るやつ【.offset()】をちょっと改造して作成します。

 

今回作成するデモはこちら

 

<仕様>

①ページを読み込むと、2番は2秒後、3番は3秒後に回転する

②5番は要素がちょっと見えてから、3秒後に移動する。(6番も要素がちょっと見えてから、3秒後に移動する)

 

それでは、解説。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>タイトルだよ</title>
    <meta name="description" content="ディスクリプションだよ">
    <meta name="keywords" content="キーワード1, キーワード2">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart=""><div class="Container">
<div class="sideMargin">
<div class="itemBlock">
<div class="block block1">
<p>1</p>
</div>
<div class="block block2">
<p>2</p>
</div>
<div class="block block3">
<p>3</p>
</div>
<div class="block block4">
<p>4</p>
</div>
<div class="block block5">
<p>5</p>
</div>
<div class="block block6">
<p>6</p>
</div>
</div>
</div>
</div>
    </main>
    <!--footer-->
    <footer>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/index.js"></script>
    </footer>
  </body>
</html>

・divを6つ用意します。(こいつらをゴニョゴニョします)

 

○index.css

.Container {
  padding: 50px 0;
  background-color: #9e9e9e40; }

.sideMargin {
  padding: 0 10px; }

.itemBlock {
  background-color: white;
  max-width: 780px;
  padding: 50px 0;
  margin: 0 auto; }

.block {
  background-color: blue;
  height: 100px;
  width: 100px;
  margin: 0 auto 50px; }

.block p {
  color: #fff;
  font-size: 3.0rem; }

.block2 {
  -webkit-animation: roll 3s infinite;
  animation: roll 3s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  animation-delay: 2s; }

.block3 {
  -webkit-animation: roll 3s infinite;
  animation: roll 3s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-direction: reverse;
  -webkit-animation-delay: 3s;
  animation-delay: 3s; }

@-webkit-keyframes roll {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes roll {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.block2 {
  -webkit-animation: roll 3s infinite;
  animation: roll 3s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  animation-delay: 2s; }

.block5.slideIn {
  -webkit-animation: slide 3s infinite;
  animation: slide 3s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 3s;
  animation-delay: 3s; }

.block6.slideIn {
  -webkit-animation: slide 3s infinite;
  animation: slide 3s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-direction: reverse;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 3s;
  animation-delay: 3s; }

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  25% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  75% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slide {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  25% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  75% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

①2番と3番のアニメーション

・block2とblock3にはrollと名前のつけたアニメーションを指定します。

 

①5番と6番のアニメーション

・block5とblock6には、slideと名前のつけたアニメーションを指定します。このとき、slideInというクラスに対してslideアニメーションを記述します。

上記 ) .block5.slideInと.block6.slideInに対してslideと名前のつけたアニメーションを指定しています。

 

○index.js

$(function(){
  $(window).scroll(function(){
      var slide5 = $('.block5').offset().top;
      var slide6 = $('.block6').offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > slide5 - windowHeight){
        $('.block.block5').addClass('slideIn');
      }
      if (scroll > slide6 - windowHeight){
        $('.block.block6').addClass('slideIn');
      }
  });
});

 

①　if (scroll > slide – windowHeight){}

『隠れている要素が、見えたら』という条件

 

②　$().addClass(‘slideIn’);

$()要素にslideInというクラスを追加する

 

任意のタイミングで開始したいアニメーションを記述したクラスを追加することで、アニメーションを開始している。

 

一見長い記述ですが、やっていることはシンプルです。

 

今回は以上です。