효과

[JS] 눈 내리는 효과 만들기

완성 코드 See the Pen Canvas Snow by hyukson (@hyukson) on CodePen. 전체코드(보기) 더보기 const $canvas = document.querySelector("canvas"); const ctx = $canvas.getContext("2d"); const getRandomRadius = () => Math.random() * 1 + 0.5; const getRandomSpeed = () => Math.random() * 0.3 + 0.1; const getRandomDir = () => [-1, 1][Math.floor(Math.random() * 2)]; const Snow = { data: [], canvasWidth: $canvas.clientWid..

[CSS] 스크롤에 따라 움직이는 배경 이미지

코드 background-attachment: fixed; /* background-image에만 적용 */ background-attachment 속성은 background-image에 적용되며, 배경 이미지를 스크롤 시에도 고정시켜서 마치 따라오는 듯한 효과를 줄 수 있습니다. - scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성입니다. - fixed : 스크롤 시 보이는 페이지(viewport)와는 다르게 배경 이미지는 고정됩니다. 예제 코드 See the Pen CSS Background Image attachment by hyukson (@hyukson) on CodePen. 배경을 채운 디자인 요소와 그 사이에 배경 이미지로 쓰일 요소를 추가해줍니다. div { width:..

[CSS] 카드 뒤집기(플립) 효과

코드 CSS를 이용하여 입체효과가 적용된 카드를 뒤집어 앞면, 뒷면 구분을 할 수 있습니다. .flip { width: 200px; height: 250px; perspective: 1100px; } .card { width: 100%; height: 100%; position: relative; transition: .4s; transform-style: preserve-3d; } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .front { background: red; } // 뒷면은 사전에 미리 뒤집기 .back { background: royalblue; transform: ..