Javascript,CSSでカーテンが開くようなアニメーション【WordPress】

背景に画像を設定してカーテンのようなアニメーションを作成する場合（左右）

スクロールで要素が半分見えると発動する仕組みです。
背景に画像を設定するタイプ。

See the Pen Untitled by Satomi (@satomi79000033) on CodePen.

javascriptはfooter.phpの中の</body>の前に貼り付けてください。

<script>
    const showElements = document.querySelectorAll(".animation")
    window.addEventListener("scroll", function(){
    for(let i = 0; i<showElements.length; i++){
       const getElementDistance = showElements[i].getBoundingClientRect().top + showElements[i].clientHeight * .5;
      if(innerHeight > getElementDistance){
        showElements[i].classList.add('show');
      }
    }
    })
</script>

アニメーションのスピードを変更する場合は下記の１ｓ=１秒の部分を変更して使用下さい。

.animation.show::before{
        animation: showMask 1s  forwards;
    }

画像を配置してカーテンのようなアニメーションを作成する場合（左右）

imgタグで画像を配置するタイプ。

See the Pen 画像のカーテンのようなアニメーション by Satomi (@satomi79000033) on CodePen.

カーテンのようなアニメーションを上から下へかける（上下）

See the Pen カーテンのようなアニメーション上から下 by Satomi (@satomi79000033) on CodePen.