study 코딩하자

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect08.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector(".slide..

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect07.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector(".slide..

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/parallaxEffect06.html let text = document.querySelectorAll(".content__item__desc");//변수 text에 클래스 content__item__desc들 저장 text.forEach(el => {//text의 element값들을 el에 저장 let splitText = el.innerText;//변수 splitText에 el의 텍스트저장 let splitWrap = splitText.split('').join("");//변수splitWrap에 splitText의 글씨 사이에 넣어서 저장 splitWrap = "" + splitWrap + "

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect05.html function scroll(){//함수 scroll 실행 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 screenY값 저장 document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);//클래스 scrollTop의 span태그에 Math.round(scroll..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect04.html function scroll(){//함수 scroll선언 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 screenY값 저장 document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);//클래스 scrollTop의 span태그에 Math.round(scrollT..