38번 개발일지(대구AI스쿨 74일차)

22.07.04

어제는 서울에 있는 마이크로소프트 본사에 갔다왔다. 업무 환경에 대해서는 볼 수 없었지만 그래도 좋은 경험이었다.

22.07.05

오늘은 애니메이션을 적용했다.

애니메이션 CSS

.animatable {
    visibility: hidden;
    animation-play-state: paused;
}

.animated {
    animation-name: fadeInUp;
    visibility: visible;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: running;
}

자바스크립트

window.onload = function() {
    window.addEventListener("scroll", function(e) {
        scrollEvent();
    });
}

let scrollEvent = function() {
    // 사용자 모니터 화면 높이 + 스크롤이 움직인 높이
    const scrollY = window.scrollY;
    const innerHeight = window.innerHeight;
    const scroll = (innerHeight * 0.9) + scrollY;

    // 애니메이션 효과를 넣을 DOM 객체 배열
    const itemList = document.querySelectorAll(".client ul li");

    Array.prototype.forEach.call(itemList, function(li) {
        // 객체 위치와 높이 비교 : 화면에 표출되는 높이인지 체크
        if(li.offsetTop < scroll) {
            li.classList.remove("animatable");
            li.classList.add("animated");
        }
    });
}

문제점

• 스크롤이 발생할 때 애니메이션이 적용되는데 스크롤이 없을 때는 새로고침을 해도 애니메이션이 적용되지 않았다. 다른 방법을 찾아봐야한다.
• 화면 크기가 줄어들었을 때 애니메이션의 순서와 버튼이 동작하게 해야하는데 코드를 적어도 제대로 작동하지 않는다.