[GSAP] toggleClass를 활용해 스크롤 효과 구현해보기!
·
코딩
작성 예정
자바스크립트 Throttle(스로틀)과 Debounce(디바운스)의 개념과 차이점!
·
코딩/JAVASCRIPT
오늘은 자바스크립트에서 이벤트 핸들링을 최적화하기 위해 많이 사용하는 개념인Debounce와 Throttle에 대해 알아볼 것이다. 최적화 필요성자바스크립트에서 이벤트 핸들링을 최적화하는 이유는 성능과 사용자 경험을 개선하기 위해 필요하다.특히, 사용자가 반복해서 발생시키는 이벤트(예: 스크롤, 리사이즈, 입력 등)는 자칫 성능 저하를 유발할 수 있기 때문에..  Throttle목적: 특정 함수가 호출되는 빈도를 제한하여 자원 소모를 줄이기 위해 사용된다.동작 원리: 함수를 일정 시간 간격(예: 1000ms, 1초)으로만 실행되도록 제한한다. 이 간격 동안에는 함수를 한 번만 실행하고, 그 후에 다시 호출할 수 있다.throttle은 이벤트 핸들링, API 호출 등의 상황에서 쓰일 수 있다.throttl..
split-type, gsap를 활용해 텍스트 효과 구현해보기!
·
코딩
gsap에서 제공되는 split text라는 기능이 있다.하지만 그건 유료이기 때문에 split-type이라는 무료 플러그인을 사용해서 글자 쪼개기, gsap를 활용해 애니메이션까지 구현해 볼 예정!  See the Pen Split-type, GSAP 활용한 텍스트 효과 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. 활용한 플러그인 split-type과 gsap 플러그인 연결해주어야 한다.로컬 파일로 저장해서 연결해도 ok HTML 구조 Play Split Text! Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nostrum distinctio ad quo natus et an..
[GSAP] 스크롤에 따른 배경 트랜지션 효과 구현해보기
·
코딩
오늘은 GSAP(ScrollTrigger)와 Lenis 라이브러리를 써서 스크롤에 따라 반응하는 애니메이션을 만들어보았다 사용 라이브러리 (플러그인)- GSAP- ScrollTrigger(GSAP에서 제공하는 또다른 플러긘)- Lenis (부드러운 스크롤 제공) 완성작 See the Pen GSAP image transition by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. HTML 구조 GSAP ScrollTrigger SmoothScroll  이미지 영역과 텍스트 영역을 나눠준다.  CSSsection {width: 100%; overflow-x: hidden;}.img_..
알리고 알람톡 보내기
·
코딩/JAVASCRIPT
알리고로 알람톡 보내려면 카카오 채널을 만들어야하고 비즈니스로 등록하려면 사업자 등록증이 필요하다.api키 발급받는 것까진 공식 문서 정독을 추천한다(한국어니까) https://smartsms.aligo.in/ 알리고알리고 - 국내 최저가 문자발송 알리고 문자, 단문8.4원 장문25원 그림60원 알리고 대량문자/단체문자/문자사이트/문자발송smartsms.aligo.in:443 https://smartsms.aligo.in/aligoxkakao.html 알리고알리고 - 국내 최저가 문자발송 알리고 문자, 단문8.4원 장문25원 그림60원 알리고 대량문자/단체문자/문자사이트/문자발송smartsms.aligo.in:443https://smartsms.aligo.in/alimapi.html 알리고알리고 - 국내..
맥 전용 에디터 Nova로 FTP 연결해보기(노바 에디터, 구 코다)
·
코딩
맥으로 갈아탄 기념으루 ^.^Nova FTP연결하는 방법을 기록해보려한다. 근데 Nova 에디터 사용하는 사람이 별로 없어서 그런지.. 구글링해도 잘 안 나온다. 이렇게 한 번 연결해놓으면 편하게 관리할 수 있당. 1. 프로젝트 추가 [Add Project] 클릭 후 ->  [Add Remote Prject]  클릭  [Project Name]에 프로젝트명 쓰고 + 버튼 클릭+이제 안 사실인데 굳이 안 적어도 되는듯 ?  2. FTP 정보 기입  3. 프로젝트 연결추가하면 다시 이 화면으로 돌아오는데추가한 프로젝트가 리스트처럼 뜬다. 그 상태로 해당 항목을 더블 클릭하면 이런식으로 바로 접속할 수 있게끔 뜬다.   노바 에디터 설정 툴바 상단에 Nova앱 위로 마우스 오버하면 Setting이 뜨는 걸 볼..
다쭐◠‿◠
쭐코딩