아래로 스크롤 애니메이션 - 자습서

HTML

HTML의 경우 "scrolldown"클래스가 있는 하나의 요소만 필요합니다.

<div class='scrolldown'></div>

CSS

CSS의 경우 먼저 scrolldown 클래스의 스타일을 지정합니다.

위치를 상대, 너비 및 높이를 30x50픽셀로 설정하고 테두리 반경을 25픽셀로 설정하고 색상을 진한 파란색(또는 다른 색상)으로 설정합니다.

.scrolldown {
    position: relative;
    width: 30px;
    height: 50px;
    border: 3px solid rgb(0, 71, 106);
    border-radius: 25px;
}

이제 "scrolldown"요소 내부에 가상 요소 이전을 사용하여 스크롤러를 생성합니다.

콘텐츠와 위치를 절대값으로 설정하고 bottom 속성을 30px로, left 속성을 50%로 설정하고 X를 -50%로 변환하여 이 요소를 가로로 가운데에 세로로 가운데 약간 위에 배치합니다.

이제 너비와 높이를 6x6 픽셀로 설정하고 "scrolldown"요소의 테두리와 동일한 파란색 배경색을 추가합니다.

테두리를 100% 반올림하고 약간의 투명도가 있는 동일한 파란색인 상자 그림자를 추가합니다.

애니메이션은 단순히 요소 높이를 높이고 약간 아래로 이동합니다. 여기에서 불투명도를 변경하여 약간의 펄스 효과를 만듭니다.

이제 이 애니메이션을 의사 요소 이전으로 설정하고 지속 시간은 2초, 무한입니다.

.scrolldown::before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: rgb(0, 71, 106);
    border-radius: 100%;
    box-shadow: 0px -5px 3px 1px rgba(0, 71, 106, .6);
    animation: scrolldown-anim 2s infinite;
}
@keyframes scrolldown-anim {
    0% {
        opacity: 0;
        height: 6px;
    }
    40% {
        opacity: 1;
        height: 10px;
    }
    80% {
        opacity: 0;
        transform: translate(-50%, 20px);
        height: 10px;
    }
    100% {
        opacity: 0;
        height: 3px;
        }
    }

의사 요소 이후를 사용하여 스크롤러 아래에 화살표를 만듭니다.

콘텐츠 및 위치를 절대값으로 설정하고 아래쪽은 -12px, 왼쪽은 50%, 이동 X는 -50%로 설정하면 이 요소가 수평 중앙의 "스크롤다운"요소 바로 아래에 설정됩니다.

너비와 높이는 7x7픽셀로 설정하고 오른쪽과 아래쪽 테두리는 2픽셀의 단색 파란색(이전에 사용한 것과 동일한 파란색)으로 설정합니다.

45도 회전하면 화살표가 생성됩니다.
이제 불투명도를 0에서 0.7로, 다시 0으로 변경하여 진동하는 애니메이션을 만들겠습니다.

우리는 이 애니메이션을 유사 요소 이후로 설정하고 2초 지속 시간을 무한대로 설정합니다(스크롤러와 동일).

.scrolldown::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border: 2px solid rgb(0, 71, 106);
    border-top: none;
    border-left: none;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
    }
}

그리고 그게 다야.

비디오 자습서 및 전체 코드here를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️