jQueryを知らなくてもHTMLで登場アニメーション

今回はサイトで使えるように
誰でも簡単に出現アニメーションをつけれるように作ってみました。

divでもaタグでも何でも使えます。

注意点 "marginが消えます。"

使い方

css

body {
    overflow-x: hidden;
}
[vector="left"]{
    opacity: 0;
    margin-left: 1000px;
}
[vector="right"]{
    opacity: 0;
    margin-right: 1000px;
}
[vector="top"]{
    opacity: 0;
    margin-top: 1000px;
}
[vector="bottom"]{
    opacity: 0;
    margin-bottom: 1000px;
}

html

<h2 class="anim" type="linear" time="1000" vector="left">左へ 1</h2>
<h2 class="anim" type="linear" time="2000" vector="left">左へ 2</h2>
<h2 class="anim" type="swing" time="4000" vector="left">左へ 3</h2>
<h2 class="anim" type="linear" time="1000" vector="right">右へ</h2>
<h2 class="anim" type="linear" time="3000" vector="top">出現</h2>

まずclassに anim を追加します。

typeは linear と swing の2つがあります
これらの違いは、linearは一定速度で動くのに対して
swingは真ん中辺りが一番早くなり、最初と最後は緩やかになります。
振り子みたいなものです

timeはアニメーションが終了するまでの時間を
1000 / 1秒 で指定できます。
つまり4000を指定すると 4秒間アニメーションします。

vectorは加える方向を指定します。
まあ移動させたい向きを指定してください。

JavaScriptのソースを貼ります
くそソースだけどゆるちて

javascript

$(window).on("scroll", function(){
    $('.anim').each(function(){
        let elem = $(this);
        let anim_type = elem.attr("type");
        let anim_time = elem.attr("time");
        let anim_vector = elem.attr("vector");
        if(isScrolledIntoView(this)){
            async function anim(){
                await animate(elem, anim_vector, anim_time, anim_type);
            }
            anim();
        }
    });
});
async function animate(elem, anim_vector, anim_time, anim_type){
    let vec = "margin-" + anim_vector;
    elem.animate({
        opacity: 1,
        [vec]: "0px"
    }, {
        duration: Number(anim_time),
        easing: anim_type
    });
}
function isScrolledIntoView(elem){
    try {
        let docViewTop = $(window).scrollTop();
        let docViewBottom = docViewTop + $(window).height();
        let elemTop = $(elem).offset().top;
        let elemBottom = elemTop + $(elem).height();
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    } catch(error) {
        console.log(error);
    }
}