CSSやjQueryでできるアニメーション！

CSSやjQueryでwebページにつけるアニメーションを自分のメモとしてまとめました。
＊いろいろなサイトを参考にさせていただきました。

ページをスクロールするとクラスが追加される。

ページをスクロールしていくとclassNameに”some class!”部分のクラスが追加される。

jQuery

$(function() {
    $(window).scroll(function() {
      $(".className").each(function() {
        var scroll = $(window).scrollTop(); 
        var blockPosition = $(this).offset().top; 
        var windowHeihgt = $(window).height(); 
        if (scroll > blockPosition - windowHeihgt) {
          $(this).addClass("some class!");
        }
      });
    });
  });

画面ロード中にアニメーションを表示

画面ロード中に黄色い円が出ます。htmlに.loaderを持つクラスが必要。
cssを変えることでいろいろ表示できる。

最後に紹介しているEpic spinnerのサイトなどでローディングアイコンをコピーしてCSSとHTMLに張り付ければかっこいいのを作れる。

css

.loader {
  align-items: center;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}

.loader::after {
  animation: loader 0.5s linear infinite;
  border: 1px solid orange;
  border-radius: 50%;
  border-right: 5px solid rgba(orange, 0.2);
  border-top: 5px solid rgba(orange, 0.2);
  content: "";
  height: 70px;
  width: 70px;
}

@keyframes loader {
  0% {
    transform: rotate(0);
  }


  100% {
    transform: rotate(360deg);
  }
}

jQuery

  $(window).on('load',function(){
    $(".loader").fadeOut();
    // これだけで 
  });

ふわふわと揺れる

htmlにfuwafuwaクラスをつけると適用される。backgroundのurlはお好みで

css

//CSS
.fuwafuwa {
  animation: fuwa 4s infinite ease-in-out .9s alternate;
  background: url(image) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

@keyframes fuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

くるくる回って出現

htmlにkurukuruクラスをつけると適用される。

css

.kurukuru {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  width: 50px;
  height: 50px;
  opacity: 0;
  padding-bottom: 40px;
}
.kurukuru.is-animated {
  animation: kurukuru 1.4s ease-out;
  opacity: 1;
}
@keyframes kurukuru {
  0%{
    transform: rotateY(0) translateY(40px);
    opacity: 0;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}

最後に

いろいろ追加していきたいと思います。

便利なサイト
Epic spinner
https://epic-spinners.epicmax.co/#/