UX를 ​​강화하는 10가지 스크롤 효과 👆️🤓️

사이트에 스크롤 효과를 추가하면 사이트를 훌륭하게 만들 수 있습니다!

다음은 영감을 얻을 수 있는 10가지 예입니다!

시차 효과

시차는 가까운 물체가 멀리 있는 물체보다 빠르게 움직이는 현상입니다. 이 놀라운 실생활 효과는 웹에도 있습니다!

View the following codepen in 0.5✕ to see the parallax effect.

무한 스크롤

무한 스크롤은 사용자가 페이지를 아래로 스크롤할 때 콘텐츠를 지속적으로 로드하여 페이지 매김의 필요성을 제거하는 웹 디자인 기술입니다.

Twitter와 같은 소셜 미디어 사이트에서 무한 스크롤의 성공으로 이 기술이 대중화되었으며 다음은 몇 가지 예입니다add it to your own site !

스크롤 스냅

Javascript를 사용하지 않고 사이트에 스크롤 스냅을 추가할 수 있다는 것을 알고 계셨습니까? 나는 확실히 아니었지만, 그것을 알았을 때 나는 완전히 충격을 받았습니다!

.carousel {
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
}

스크롤 표시기

블로그에서 뉴스 사이트에 이르기까지 스크롤 표시기는 어디에나 있습니다! Javascript를 만드는 데 필요하지 않다는 것을 알고 계셨습니까?

아래로 스크롤하라고 말해

사용자에게 아래로 스크롤하여 더 많은 콘텐츠를 볼 수 있다고 알려주는 것이 종종 유용합니다. 여기에 몇 가지 멋진 예가 있습니다!

수축 헤더

헤더를 크게 시작한 다음 사용자가 아래로 스크롤하면 작아집니다. 이 작은 효과는 매우 일반적이며 CSS를 사용하여 사이트에 쉽게 추가할 수 있습니다!

끈끈한 Navbar

Navbar는 매우 중요합니다. 사용자는 이를 사용하여 사이트의 위치와 이동할 수 있는 위치를 알 수 있습니다. 다음은 멋진 탐색 모음입니다!

스크롤 그라디언트

CSS를 사용하여 사용자가 아래로 스크롤할 때 그래디언트를 "애니메이션"할 수 있습니다.

스크롤 공개

이렇게 하면Javascript library CSS 애니메이션이 뷰포트에 들어갈 때 바로 활성화할 수 있습니다.

스크롤 버튼

다음은 10가지 멋진 HTML 및 CSS 전용 스크롤 버튼입니다.






이 목록이 유용했다면 .
좋은 하루 되세요! ☺️


.ltag__user__id__829622 .follow-action-button {
배경색: #be185d !중요;
색상: #ffffff !중요;
테두리 색상: #be185d !중요;
}

BestOfStuff 팔로우

😎️ The 𝙗𝙚𝙨𝙩 lists about all kinds of interesting topics!