Script Sample (34) 썸네일형 리스트형 Typing Game Typing Game javascript를 이용한 타자 게임을 만들어 보았습니다~ https://jiseonpack.github.io/webs_class/javascript/typingGame/index.html Typing Game jiseonpack.github.io music player music player 음악이 나오는 music player 를 만들어보았습니다. https://jiseonpack.github.io/webs_class/javascript/musicPlayer/index.html Music Player expand_more Now Playing more_horiz repeat skip_previous play_arrow pause --> skip_next queue_music repeat_one shuffle --> queue_music Music list close jiseonpack.github.io Mouse Effect08 - 마우스 효과 document.addEventListener("mousemove", function (e) { let body = document.querySelector("#mouseType07"); let circle = document.createElement("span"); let x = e.offsetX; let y = e.offsetY; circle.style.left = x + "px"; circle.style.top = y + "px"; let size = Math.random() * 100; circle.style.width = 20 + size + "px"; circle.style.height = 20 + size + "px"; body.appendChild(circle); setTimeout(fun.. Mouse Effect07 - 이미지 오버 효과 const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity:0}); gsap.to(imageWrap, {xPercent: -50, yPer.. Mouse Effect06 - 텍스트 효과 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.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionSlow}); gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}); } document.addEventListener("mousemove", mousemove) https://jiseonpack.githu.. Parallax Effect07 - 리빌 효과 //만약에 reveal 클래스가 있는데 //글씨를 span으로 감싸주고 //글씨를 다 넣어줘야 함 document.querySelectorAll(".content__item__desc.reveal").forEach((el,i)=>{ if(!(el.querySelector("span"))){ const text = el.innerText; el.innerHTML = `${text}`; } }); function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEa.. Parallax Effect06 - 텍스트 효과 //section1 글씨 쪼개기 // let text = document.querySelector("#section1 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join(""); // splitWrap = "" + splitWrap + ""; // text.innerHTML = splitWrap; //여러 section 글씨 쪼개기 document.querySelectorAll(".content__item__desc").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').j.. Parallax Effect05 - 이질감 효과 function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); // const img = document.querySelector("#section1 .content__item__img") // img.style.transform = "translateY("+scrollTop/10+"px)" document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scro.. 이전 1 2 3 4 5 다음 목록 더보기
