animation4 [CSS] 마우스오버 (hover) 밑줄 애니메이션 효과 마우스오버(mouseover, hover) 시 밑줄(underline)이 가운데 또는 왼쪽에서부터 나타나는 효과 적용하는 법 [html] Center Left to Right [css] ul { display: flex; gap: 40px; font-size: 40px; list-style: none; } li::after { content: ""; display: block; width: 100%; height: 4px; background: #000; transition: all 1s; } /* 가운데에서 나타남 */ .center::after { transform: scaleX(0); } .center:hover::after { transform: scaleX(1); } /* 왼쪽에서 나타남 */ .. 2023. 8. 22. [jQuery] 특정 위치(화면 위치)에서 스크롤 이벤트 스크롤 시 화면이 특정 위치에 도달했을 때 이벤트 발생 화면의 1/2 지점과 2/3 지점에 div가 도달했을 때 배경색 변경 예시 [html] 아래로 스크롤 화면의 1/2 지점에서 이벤트 발생 화면의 2/3 지점에서 이벤트 발생 [css] div { width: 100%; height: 700px; font-size: 2rem; text-align: center; } .scroll-12 { background: pink; } .scroll-23 { background: skyblue; } [js] // 화면의 1/2값과 2/3값 변수 할당 let scrollVh12 = $(window).innerHeight() * 1 / 2; let scrollVh23 = $(window).innerHeight() * .. 2023. 8. 14. [jQuery] 마우스 커서(cursor) 따라다니는 애니메이션(animation) 마우스 커서(cursor)를 따라다니는 도형 애니메이션(animation) [html] [css] .cursor { position: absolute; transform: translate(100%, 100%); width: 1rem; height: 1rem; border: 2px solid #808080; border-radius: 50%; opacity: 0.4; transition: all 0.3s ease-out; z-index: 1000; } .cursor.on { border: 2px solid #222; background: #222; opacity: 1; } [js] $(window).on('scroll mousemove', function(e){ $('.cursor').css('left'.. 2023. 8. 11. [CSS] 흐르는 텍스트 배너 애니메이션 (scrolling text animation) css에서 keyframes와 animation을 사용하여 흐르는 텍스트 배너 애니메이션 만들기 [html] SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT [css] @keyframes scroll-animation{ 0%{ left: 0; } 100%{ left: -400px; /* 텍스트 width와 동일 */ } } .scroll-text{ width: 100%; overflow: hidden; } .track{ display: flex; position: relative; width: 2800px; animation: scroll-animation 5s linear infinite; } .tra.. 2023. 6. 12. 이전 1 다음 728x90
