LoginSignup
0

More than 1 year has passed since last update.

ちょっとだけCSSアニメーションを追加したい時

Posted at

やりたいこと

  • サイトにアニメーションを追加したい
  • がっつりじゃなく、ちょっとだけ
  • スクロールしたらフワッと出てくる
  • サクッと追加したい(ファイル追加とかしないで、既存のコードに追加くらいで済ませたい)

CSSアニメーションでサクッとやる

かんたんなアニメーションなら、Animistaで使いたいコードをコピペしてくる。
https://animista.net/

下からフワッと上がってくる&フェードインならこんな感じ

style.css
/*

animation List
from : https://animista.net/

*/

.site-content .setAnime{
	opacity: 0;
}
.site-content .is-animate.slide-in-down {
	-webkit-animation: slide-in-down 1s ease-in-out both;
	        animation: slide-in-down 1s ease-in-out both;
}
.site-content .is-animate.fade-in {
	-webkit-animation: fade-in 1s ease-in-out both;
	        animation: fade-in 1s ease-in-out both;
}

/*
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}
@keyframes fade-in {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}

/*
 * ----------------------------------------
 * animation slide-in-down
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-down {
  0% {
	  opacity: 0;
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
	  opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-in-down {
  0% {
	  opacity: 0;
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
	  opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

class="is-animate slide-in-down"を追加すれば、表示と同時にアニメーションする。

スクロールしたら動くようにしたい

スクロールをトリガーにしたい場合は、以下のコードをページ内に追加。

index.html
<script type="text/javascript">
const myFunc = function(){
	//Classを追加する要素を取得
	const target = document.getElementsByClassName('setAnime');
	//Classを追加する位置を指定(ビューポート内)
	const position = Math.floor(window.innerHeight * .75); //ビューポート内の上から75%の位置を指定
	//要素の数だけループする
	for (let i = 0; i < target.length; i++) {
		//要素の上部座標を取得する(小数点切り捨て)
		let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
		//要素の上部座標がpositionの位置を通過したら
		if (offsetTop < position) {
			//要素にClassを追加する
			target[i].classList.add('is-animate');
		}
	}
}
//スクロールイベントリスナーに登録
window.addEventListener('scroll', myFunc, false);
</script>

WordPressならカスタムHTMLブロックとかで追加してもいい。

スクロールトリガーの場合、class="setAnime slide-in-down"を追加。
表示領域に入ったら「setAnime」が付いた要素に「is-animate」が付くので、そこでアニメーションする。

setAnimeにopacity: 0;入れてるのは、フェードイン系は最初に透明にしておかないと、アニメーション発動直前に表示されちゃうから。

たまに使うけど、忘れちゃうのでメモ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0