study 코딩하자

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect08.html 마우스 이펙트 마우스 이펙트 - 텍스트 효과 1 2 3 4 5 6 7 8 소스보기 HTML CSS Javascript 닫기 garenchoi.github.io 8번째 마우스 이펙트는 수업으로 만들지 않고 혼자 만들었다. (코드펜을 많이 참고함.) 랜덤으로 색을 뽑는 코드를 알게 됐다. var shapes = [ 'circle', 'square', 'triangle' ]; // create array of colors var colors = [ '#A32734', '#195259', '#C38542' ] // Function that will randomize two nu..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect07.html 마우스 이펙트 I Dream my Painting and I Paint my Dream garenchoi.github.io 7번째 마우스 이펙트는 gsap를 주로 써서 만들었다. const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoun..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect06.html 마우스 이펙트 마우스 이펙트 - 텍스트 효과 1 2 3 4 5 6 7 8 소스보기 HTML CSS Javascript 닫기 garenchoi.github.io 6번째 마우스 이펙트는 거의 css로 만든 느낌이었다. (css소스는 위의 페이지에서 볼 수 있음.) function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0..

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 ..