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

$(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);
    }
}