호버 및 클릭 효과를 위한 10가지 사용자 정의 CSS 및 JavaScript 스니펫

개발자는 호버 및 마우스 클릭과 같은 간단한 사용자 동작으로 미친 효과를 만들 수 있습니다. 이는 대부분 데스크톱 사용자와 관련이 있지만 모바일 웹은 대부분의 브라우저에서 클릭/터치 효과도 지원합니다.

자신의 프로젝트에서 복제할 멋진 아이디어를 찾고 있다면 이 컬렉션에 분명 도움이 될 것입니다. JavaScript와 CSS를 조금 아는 사람은 이러한 효과를 쉽게 조정하여 모든 브라우저, 모든 웹사이트에서 작동하고 레이아웃 경험을 멋지게 꾸밀 수 있습니다.

버튼 호버 효과

애니메이션 효과의 분명한 시작점은 CSS 버튼입니다. 이들은 많은 상호 작용을 처리하기 때문에 일상적인 사용에서 가장 실용적입니다. CTA 버튼은 실질적으로 주의를 끌며 이러한 호버 효과를 사용하면 더 빨리 주의를 끌 수 있습니다.

각 효과는 애니메이션에 순수 CSS를 사용합니다. 이러한 버튼 중 몇 개는 마우스 오버 이벤트에 대해 JavaScript에 의존하지만 모든 애니메이션은 여전히 ​​CSS에서 바로 제어됩니다.

평면 레이아웃을 디자인하는 경우 이러한 애니메이션은 작업하기가 매우 쉽습니다.

탐색 호버

이 펜의 경우 몇 가지 탐색 호버 이벤트를 찾을 수 있습니다. 이들은 다른 호버 효과로 각 하이퍼링크를 다시 제어하는 ​​순수 CSS에 의존합니다.

탐색 메뉴는 일반적으로 매우 간단하고 일반적입니다. 그렇기 때문에 호버 이벤트는 디자인을 더욱 돋보이게 하고 방문자에게 작은 세부 사항에 관심이 있음을 보여줄 수 있습니다.

이러한 애니메이션의 대부분은 어떤 웹사이트에도 적합할 정도로 길들여져 있어 모든 레이아웃에 쉽게 복사/붙여넣기에 적합합니다.

사진 호버 효과

지루한 자막과 실제 컨텍스트가 없는 사진 갤러리를 얼마나 자주 찾습니까? 나는 이것들을 너무 자주 보았고, 그들은 단지 게으르다고 느낍니다.

나는 모두 간단한 썸네일 갤러리에 의존하는 이러한 사진 효과를 정말 좋아합니다. 이미지에 마우스를 가져가면 사진의 제목, 설명 및 "더 읽기" 버튼이 표시됩니다.

각 요소는 다른 각도에서 보기에 슬라이드되어 이 이미지 갤러리가 페이지에서 바로 튀어나오는 데 도움이 됩니다.

CSS 툴팁 호버

모든 브라우저는 기본 툴팁을 지원하지만 플러그인을 사용하거나 이와 같은 펜을 복제하여 언제든지 자신만의 툴팁을 만들 수 있습니다. Ty Strong이 개발했으며 순수한 CSS 툴팁을 어디까지 사용할 수 있는지 보여줍니다.

이 전체 스니펫은 HTML <dfn> 태그를 대상으로 하여 작동합니다. 이 태그에 래핑된 텍스트를 가리키면 도구 설명처럼 나타나는 호버에 자동으로 페이드로 표시됩니다.

순수한 CSS 삼각형은 수년 동안 사용되어 왔으며 툴팁 스타일을 쉽게 재현할 수 있습니다. 하지만 CSS3를 통해 제어되는 부드러운 애니메이션 상태가 가장 인상적입니다.

호버의 CSS 아이콘

여기에 순수한 CSS로 만들 수 있는 멋진 것의 또 다른 예가 있습니다. 이 간단한 버튼에는 모두 커서가 그 위에 놓일 때만 나타나는 숨겨진 아이콘이 있습니다.

각 아이콘은 Font Awesome에서 제공되므로 이 디자인을 완전 무료 아이콘으로 복제할 수 있습니다.

효과에는 마우스를 가져갈 때 나타나고 커서가 다른 곳으로 이동할 때 사라지는 슬라이드인, 늘이기 및 페이딩 아이콘이 포함됩니다.

무한 페이지 매김

웹 페이지 매김은 인터페이스의 화려한 부분이 아니기 때문에 항상 꽤 지루합니다. 그러나 Mariusz Dabrowski의 이 페이지 매김 효과를 사용하면 페이지 매김 수준을 한 단계 높일 수 있습니다.

이 애니메이션의 유일한 점은 한 페이지에서 다른 페이지로 로드하도록 만들어졌다는 것입니다. 따라서 전체 페이지가 다시 로드되지 않는 Ajax 기반 페이지 에서 가장 잘 작동합니다. 이렇게 하면 새 콘텐츠가 보기에 로드되는 동안 전체 애니메이션이 표시됩니다.

확실히 실용적인 가치는 제한적이지만 효과는 뛰어납니다.

오버레이 탐색 애니메이션

전체 화면 탐색 메뉴는 모바일 반응형 웹 사이트에서 매우 인기가 있으며 대부분의 사용자에게도 적용됩니다. 그러나 CodePen에서 이와 같은 오버레이 효과를 무료로 사용할 때 지루하거나 정적일 필요는 없습니다.

개발자 Ryan Mulligan은 단일 CSS 클래스에서 실행되는 순수 CSS 키프레임으로 이 괴물 같은 애니메이션을 만들었습니다.

클릭 이벤트는 jQuery를 통해 트리거되지만 모션은 모두 CSS입니다. 확실히 내가 본 멋진 애니메이션 중 하나이며 부팅이 놀랍도록 부드럽습니다.

순수 CSS 클릭 효과

Google의 머티리얼 디자인에는 여러 애니메이션 효과가 있으며 그 중 하나는 리플 클릭 효과입니다. 이것은 Android 기기에서 가장 일반적이지만 웹에도 유출되었습니다.

그리고 이 펜을 사용하면 CSS 코드만 사용하여 자신의 작업에서 파급 효과를 복제할 수 있습니다.

이 스니펫은 선택 시 불이 켜지는 아이콘을 대상으로 하므로 페이지 요소를 탭/선택하는 것과 비슷합니다. 그러나 효과는 복제를 쉽게 만드는 모든 것으로 이전할 수 있습니다.

마나 버튼

다음은 모양에 SVG를 사용하고 애니메이션에 CSS를 사용한 가장 독특한 버튼 효과 중 하나입니다.

Coder Dean Hidri는 80줄의 CSS와 수십 줄의 HTML(SVG 포함)만으로 이 마나 버튼 효과를 만들었습니다. 마우스를 올리면 이 버튼이 버튼 내부의 사용자 지정 액체 모양에 애니메이션을 적용하여 배경 채우기를 만든 다음 나중에 애니메이션을 적용합니다.

이 버튼 스타일을 사용할 수 있는 사이트가 있다면 확실히 가지고 놀 가치가 있습니다.

아이코닉 버튼 FX

아이콘 글꼴로 많은 작업을 수행할 수 있으며 David Darnes의 애니메이션 버튼이 좋은 예입니다.

아이콘은 마우스를 가져가면 각각 고유한 서명 효과가 있는 다른 방식으로 움직입니다. 한 웹사이트에서 이러한 아이콘을 모두 사용할 수는 없지만 사용자 정의 애니메이션 스타일은 복제하기 쉽습니다. CSS3에서만 작동하며 선택한 모든 아이콘 글꼴에 맞습니다. 거의 모든 웹사이트에 복제할 수 있는 정말 재미있는 효과입니다!

그리고 이것으로 UX 효과 목록을 마무리했지만 이것이 확실한 컬렉션은 아닙니다.

웹을 검색하면 다른 많은 버튼/아이콘 호버 효과를 찾을 수 있으며 많은 경우 무료 소스 코드가 있습니다. 그러나 사용자 정의 웹 애니메이션에 대해 자세히 알아보려면 개발자를 위한 방대한 플러그인 및 리소스 목록을 확인하세요.