やりたいこと
- サイトにアニメーションを追加したい
- がっつりじゃなく、ちょっとだけ
- スクロールしたらフワッと出てくる
- サクッと追加したい(ファイル追加とかしないで、既存のコードに追加くらいで済ませたい)
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;
入れてるのは、フェードイン系は最初に透明にしておかないと、アニメーション発動直前に表示されちゃうから。
たまに使うけど、忘れちゃうのでメモ。