CSS (5) 썸네일형 리스트형 @keyframes 1. @keyframes @keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다. @keyframes 를 사용하기 위해선 세 가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름 스테이지 : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일 2. Animation animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있습니다. 아래는 애니메이션 속성의 종류입니다. animation-name : @keyframes 이름 (예제에서는 fadeOut 을 사용) animati.. z-index z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. z-index 속성을 추가해서 수직 위치를 역순으로 바꿔보겠습니다. z-index 속성이 없으면 0처럼 취급합니다. (z-index의 기본값은 auto입니다.) Mouse Effect04 - 이미지 효과 Mouse Effect 중 이미지 효과 입니다. 커서를 따라 이미지가 움직입니다 ㅎㅎ 커서 좌표값을 알아서 /2를 하면 정 가운데로 오네요! 커서는 이미지 안에서만 움직이게 했습니다 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom height left right top width x y document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { //커서 gsap.to(".cursor", {duration: .2, left: e.pageX -circle.width/2, top:e.pageY -circle.height/2 }); /.. Mouse Effect03 - 조명 효과 마우스 효과 3번째 조명 효과입니다! 다른 효과들 보다 뭔가 집중이 잘 되는 효과인거같아요 진짜 조명으로 비추고 있는 느낌이 들죠?? //요소값 알기 // const circle1 = document.querySelector(".cursor").clientWidth; //190 : border 빠진 상태 // const circle2 = document.querySelector(".cursor").offsetWidth; //200 : border 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom height left right top width x y function follow(e){ gsap... Mouse Effect02 - 따라가기 효과2 안녕하세요 오늘은 마우스 따라가기 효과 2번째를 배웠습니다. 요리조리 잘 따라오는 커서가 너무 귀엽네요 ㅎㅎ 다들 포토플리오 만들때 참고하시면 좋을 것 같습니다. ^-^ const cursor = document.querySelector(".cursor"); const follower = document.querySelector(".cursor-follower"); window.addEventListener("mousemove", e => { //커서 좌표값 할당 // cursor.style.left = e.pageX + "px"; // cursor.style.top = e.pageY + "px"; // follower.style.left = e.pageX -10 + "px"; // follower.st.. 이전 1 다음
