study 코딩하자

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect03.html document.querySelectorAll("#parallax__nav li a").forEach(li => {//아이디 parallax__dot의 a태그들을 선택해 element값을 li에 저장 li.addEventListener("click", (e) => {//li를 클릭했을 때 이벤트 설정 e.preventDefault();//클릭했을 때 이벤트 초기화(a태그 초기화) document.querySelector(li.getAttribute("href")).scrollIntoView({behavior:"smooth"});//el의 href값으로 부드럽게 이동..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect02.html document.querySelectorAll("#parallax__dot a").forEach(el => {//아이디 parallax__dot의 a태그들을 선택해 element값을 el에 저장 el.addEventListener("click", e => {//el을 클릭했을 때 이벤트 설정 e.preventDefault();//클릭했을 때 이벤트 초기화(a태그 초기화) document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});//el의 href값으로 부드럽게 이동 });..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect01.html document.querySelectorAll("#parallax__nav li a").forEach(li => {//아이디 parallax__nav의 li태그의 a태그들 선택해서 index값 li에 저장 li.addEventListener("click", (e) => {//li를 클릭했을 때 이벤트 설정 e.preventDefault();//클릭했을 때 이벤트 초기화(a태그 초기화) document.querySelector(li.getAttribute("href")).scrollIntoView({//li의 href값으로 이동 behavior:"smooth";//부..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect05.html const circle = document.querySelector(".cursor").getBoundingClientRect(); //변수 circle에 클래스 cursor의 정보 값 저장 function mouseMove(e){//함수 mouseMove 매개변수 e로 선언 let mousePageX = e.pageX;//mousePageX에 e의 pageX(X좌표 값)저장 let mousePageY = e.pageY;//mousePageY에 e의 pageY(Y좌표 값)저장 //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerW..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect04.html const circle = document.querySelector(".cursor").getBoundingClientRect();//클래스 cursor의 정보값 circle에 저장 document.querySelector(".mouse__img").addEventListener("mousemove", e => {//클래스 mouse__img에 마우스 움직였을 때 이벤트 설정 //커서 gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //gsa..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect03.html const circle = document.querySelector(".cursor").getBoundingClientRect(); //변수 circle에 클래스 cursor의 정보 저장 //circle = {bottom: 200, height: 200, left: 0, right: 200, top: 0, width: 200, x: 0, y: 0} function follow(e){//함수 follow를 매개변수 e로 선언 gsap.to(".cursor", {duration: .3, left: e.pageX-(circle.width/2), top: e.pageY-(cir..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect02.html const cursor = document.querySelector(".cursor");//변수 cursor에 클래스 cursor 저장 const follower = document.querySelector(".cursor-follower");//변수 follower에 클래스 cursor-follower 저장 const span = document.querySelectorAll(".mouse__wrap span");//변수 span에 클래스 mouse__wrap의 span 태그들 저장 const info = document.querySelectorAll(".info");..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect01.html const style = document.querySelectorAll(".mouse__wrap span");//변수 style에 클래스 mouse__wrap의 span태그들 저장 const cursor = document.querySelector(".cursor");//변수 cursor에 클래스 cursor 저장 //마우스 움직이기 window.addEventListener("mousemove", e => {//브라우저에 마우스를 움직였을 때 이벤트 설정 let x = e.clientX-25 + "px";//변수 x에 "e(마우스위치)의 x좌표-25px" 저장 let ..