본문 바로가기

전체 글

 (137)
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 }) });
css 2023. 3. 27. 15:09
[css]object-fit : contain 시 세로 정렬 방법 object-position See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.
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. 캡스락, 넘버락의 경우 ..
css 2023. 3. 17. 12:13
[css]box-reflect 거울에 비친듯한 효과 See the Pen box-reflect by sangmok-ye (@sangmok-ye) on CodePen.
js 2023. 3. 13. 16:21
[js]스크립트 클래스 관련 See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.
js 2023. 2. 27. 16:39
[js]style 가져오기 let el = document.querySelector(".box") getComputedStyle(el).height; // css에 적용된 height 가져옴 // height : 0 일경우 0이 아니라 0px로 표시되는듯? el.style.height; // inline-style로 적용된 height 가져옴
top

티스토리툴바