
자바스크립트를 이용하여 텍스트위에 이미지 오버하면 사진이나오고 지나가면 사라지는 효과를 만들어 봤습니다. 아래 텍스트를 각각 설정하여 이미지를 넣어 이미지는 CSS효과로 안보이게 설정한후 스크립트로 각 영역에 마우스를 오버하면 효과가 생기도록 만들었습니다. 효과들은 모두 gsap을 사용했습니다! const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClient..

자바스크립트를 이용하여 마우스가 움직일때마다 텍스트 효과가 생기는 사이트입니다. 화면에서 마우스를 움직이면 텍스트가 움직이는 효과를 만들었습니다. 한 문장당 오렌지색 두개 흰색 두개를 만든후 overflow: hidden 을 사용하여 반을 가린후 마우스가 움직일때마다 보여지도록 만들었습니다. 이 예제는 스크립트보다 CSS요소가 많이 들어가 소스코드를 통째로업로드 시켜드리겠습니다. Believe you can and Believe you can and You`re halfway there. You`re halfway there. 할 수 있다고 믿으면 할 수 있다고 믿으면 반은 온 것이다. 반은 온 것이다. JavaScript Mouse Effect06 마우스 이펙트 - 텍스트 효과 1 2 3 4 5 6 7 8

뮤직 플레이어가 나오는 사이트를 제작해봤습니다! 처음에 사이트에 들어올때 등록되어있는 노래중 랜덤으로 한곡 시작하게되고 한곡 반복듣기, 랜덤 듣기, 리스트 순서대로 듣기를 구현 하였고 리스트를 누르면 노래 리스트가 나오며 노래 리스트에서 노래를 선택하면 선택한 노래가 틀어지도록 구현하였습니다. 맨아래 참조사이트가 있습니다. 모든소스를 볼수있으니 참조사이트에서 확인하셔도 됩니다! HTML 과 CSS 소스입니다. expand_more Now Playing more_horiz 0:00 0:00 repeat skip_previous play_arrow skip_next queue_music queue_music Music List close Script 입니다. 참조사이트 Music Player expand_m..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); const sliderBtnNext = sliderBtn.querySelector(".nex..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); const sliderBtnNext = sliderBtn.querySelector(".nex..

//HTML에 클래스 reveal이 있으면 span 태그 넣어주기! document.querySelectorAll("p.reveal").forEach(desc => { let revealtext = desc.innerText; revealtext = "" + revealtext + ""; desc.innerHTML = revealtext; }) function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEach(elem => { let revealOffse..