![마우스를 올리면 텍스트나 아이콘이 위아래서 스르륵 나타나는 효과[HTML+CSS{코남}]](https://i.ytimg.com/vi/nJtBd_LtcUI/hqdefault.jpg)
콘텐츠
롤오버 링크는 특히 사용자가 특이하거나 독창적 인 작업을하는 경우 사용자의 관심을 끌 수있는 좋은 방법입니다. Middle Child는 다른 곳에서는 거의 볼 수없는 훌륭한 효과를 가지고 있으며, 각 문자를 캡처하고 애니메이션으로 분할하여 방문자가 단어 위로 마우스를 가져 가면 시작됩니다. 애니메이션은 샌드위치 브랜드의 장난기 넘치는 캐릭터를 전달하는 데 도움이됩니다.
이 기사에서는 사이트에서 효과를 재현하는 방법을 보여줍니다. 더 많은 영감을 얻으려면 최고의 CSS 애니메이션 예제 가이드 (코드 작성 방법에 대한 지침 포함)를 참조하세요. 조금 다른 것을 원하면 최고의 웹 사이트 빌더 또는 최고의 클라우드 스토리지를 선택하십시오. 그리고 사이트를 더 복잡하게 만드는 경우 웹 호스팅이 적절한 지 확인하십시오.
01. 롤오버 텍스트 효과
Middle Child 웹 사이트의 훌륭한 텍스트 효과 중 하나는 문자가 텍스트에서 분리되고 약간 회전하는 메뉴의 롤오버 효과입니다. 간단한 HTML 태그로 시작하십시오.
02. CSS 생성
별도의 CSS 파일 또는 스타일 태그를 사용하여 다음 CSS 규칙을 추가하고 본문과 래퍼가 사용 가능한 전체 높이를 차지하도록하여 페이지가 브라우저의 전체 크기를 채우도록합니다.
body {너비 : 100 %; 높이 : 100 %; 여백 : 0; 패딩 : 0; } .wrapper {디스플레이 : 그리드; 높이 : 100 %; }
03. 단어 위치 지정
그만큼 워드 클래스는 그리드의 단어를 중심에 둡니다. 주어진 모든 텍스트 워드 클래스는 이것을 적용 할 수 있습니다. 그만큼 쪽으로 클래스는 다른 모든 문자에 적용되며 위쪽으로 이동합니다.
.word {글꼴 크기 : 3em; 여백 : 자동 자동; } .word .up {디스플레이 : 인라인 블록; 변환 : translate3d (0px, 0px, 0px) rotate (0deg); 전환 : 모두 0.5 초이지 인 아웃; }
04. 위로
이제 하위 클래스는 쪽으로 그러나 호버는 위로 이동을 보여줍니다 쪽으로 롤오버. 위쪽으로도 약간 회전하여 모양을 향상시킵니다.
.word .down {디스플레이 : 인라인 블록; 변환 : translate3d (0px, 0px, 0px) rotate (0deg); 전환 : 모두 0.5 초이지 인 아웃; } .word : hover .up {transform : translate3d (0px, -8px, 0px) rotate (12deg); 색상 : # 058b05}
05. 마우스를 아래로
사용자가 텍스트 위로 마우스를 가져 가면 아래쪽 클래스가 텍스트를 아래쪽으로 이동합니다. 나중에 JavaScript에서 텍스트는 대체 범위에 자동으로 추가되는 클래스와 함께 별도의 범위로 분할됩니다.
.word : hover .down {transform : translate3d (0px, 8px, 0px) rotate (-12deg); 색상 : # 058b05; }
06. 사람들을위한 자동
모든 문자를 서로 다른 클래스로 번갈아 가며 배치해야하는 것은 약간 번거롭기 때문에 JavaScript가 선택기를 쿼리하고 각 문자를 가져 오는 방식으로 프로세스를 자동화 할 것입니다. 여기 str 변수는 텍스트를 반복 할 때 현재 문자를 잡습니다.
script> var elements = document.querySelectorAll ( '. word'); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; 요소 [i] .innerHTML =’’;
07. 교대로 수업 추가
이제 또 다른 루프가 각 문자를 자체 범위 요소에 배치하고 쪽으로 또는 하위 스팬에 클래스. 브라우저에서 이것을 보면 약간 회전하면서 각 문자로 위아래로 분할 된 텍스트를 볼 수 있습니다.
Middle Child 웹 사이트에서 실제 효과를 볼 수 있습니다.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ( 'span'); 요소 [i] .appendChild (spn); spn.textContent = str [j]; let pos = (j % 2)? '위아래'; spn.classList.add (pos); }} / 스크립트>
이 기사는 원래 크리에이티브 웹 디자인 잡지에 게재되었습니다. 웹 디자이너.286 호 구매 또는 구독.
