본문 바로가기

js

 (59)
js 2023. 10. 17. 10:07
[js]해당 태그가 보일 때 푸터가 보일 때 footerTop-windowH
js 2023. 9. 13. 14:32
[js]제이쿼리로 만든 타이머 See the Pen 제이쿼리 타이머 by sangmok-ye (@sangmok-ye) on CodePen.
js 2023. 8. 7. 16:27
[js]한줄씩 나타나는 텍스트 gsap See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.
js 2023. 4. 18. 13:13
[js]Web Share API 웹페이지 공유하기 공유하기 const sharePage = { title:"제목", text:"내용", // 카톡에 링크와 함께 띄워짐 url:"" // url:""빈값 or window.location.href // 현재페이지 // 혹은 "https://yesm1230.tistory.com/m/108"도 가능 } document.querySelector(".btn").addEventListener("click",function(){ if(navigator.share){ // navigator를 지원 할 경우 navigator .share(sharePage) .then(()=>{ alert("성공") }) .catch((error)=>{ alert("취소") }) }else{ alert("공유하기 지원 안됨") } }) ..
js 2023. 4. 14. 16:11
[js]도메인 불러오기 주소 : https://yesm1230.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F location.href - https://yesm1230.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F location.protocol - https: location.host || location.hostname || location.origin - yesm1230.tistory.com location.pathname - /manage/newpost/107 location.search - ?type=post&returnURL=https%3A%2F%2Fyesm1230..
js 2023. 3. 31. 10:00
[js]gsap 각종 속성 scrollTrigger 프로퍼티(속성) animation trigger endTrigger // end값의 기준이 되는 el // 지정 하지않을 경우 trigger가 기준 horizontal 수평 스크롤 사용 여부 pin markers scrub snap start end stagger // 지정한 el를 지정 시간 내에 순차적으로 혹은 동일한 시간 간격을 두고 실행 - from : start / center / edges / random / end // 시작 el 설정 - amount : number trigger const tl = gsap.timeline({ scrollTrigger:{ trigger:".cont2", pin: true, // end값으로 지정해준 만큼 padding-bottom이..
js 2023. 3. 29. 16:37
[js]gsap timeline gsap.registerPlugin(ScrollTrigger); const txt = document.querySelectorAll("span") const tl = gsap.timeline({}); txt.forEach(el => { tl.to(el,{ scrollTrigger: { trigger : el, start:"0% center", end: "40% center", scrub:1, }, opacity:1 }) .to(el,{ scrollTrigger: { trigger : el, start:"60% center", end: "120% center", scrub:1, }, opacity:0.1 }) });
js 2023. 3. 22. 15:11
[js]keydown과 keypress keydown - 키보드에 있는 모든 키 인식 - 상단 숫자키와 우측 숫자키의 keyCode가 별도 - 대소문자 구분O (keyCode 별도) keypress - input에 입력이 되는 키만 인식(esc, 이동버튼, 딜리트, 홈 등은 인식X) - 상단 숫자키와 우측 숫자키의 keyCode가 동일 - 대소문자 구분X (keyCode동일) 영문 대문자일 경우, keydown.keyCode = keypress.keyCode keypress의 경우, 인식하지 못하는 키가 있어서 keydown 권고 때에 따라 keypress가 필요한 경우도 있을 듯 See the Pen keydown keypress key.code by sangmok-ye (@sangmok-ye) on CodePen. 캡스락, 넘버락의 경우 ..
top

티스토리툴바