클로리셔 작은 공간

[ Infinite Scroll Banner Animation ] - Js 없이 CSS로만 롤링 스크롤 배너 만들기 - 이번에 작업하면서 배너가 무한 자동 스크롤 되는 작업이 들어왔다. CSS로 keyframes로 animation 만들면 되겠지 싶어서 뚝딱 뚝딱 만들었다. 보기 쉽도록 무지개 색상별의 박스 상자를 무한 자동 스크롤 되도록 만들어보앗다. [ HTML ] red orange yellow green blue navy violet [ SCSS ] .container{ position: relative; display: flex; align-items: center; margin: 80px auto; width: 1000px; height: 150px; overflow: hidden; backg..

requestAnimationFrame() 바닐라 자바스크립트로 애니메이션 개념잡기 간단하게 개념을 잡기위해 필요한 기본 HTML 코드는 버튼과 작은 박스 '#box' 를 준비했다. HTML click CSS button{padding: 10px 20px; margin: 50px; } #box{width: 300px; height: 300px; background: aqua;} 01. requestAnimationFrame() 이용해서 반복하는 스크립트 짜보기 JS const btn = document.querySelector('button'); const box = document.querySelector('#box'); let num = 0; btn.addEventListener("click", e ..

1. 애니메이션 효과 01 라인이 계속 떨어지는 효과로 싱글홈페이지 스크롤 표시에 표현하기 좋음. 예시) HTML S C R O L L CSS .scroll_block { width: 300px; height:300px; border: 1px solid #dfdfdf; } .scroll_block .letters span { display: block; padding: 2px 0; font-size: 12px; text-align: center;} .scroll_block .liner { width: 1px; height: 100px; position: relative; margin: 12px auto 0; overflow: hidden;} .scroll_block .liner::before { cont..

See the Pen Clipping gif background to text by ShireeenTaj (@TajShireen) on CodePen.