[splitting.js] 요소를 분할해주는 라이브러리
움직이는 애니메이션을 제공하는 라이브러리가 아니라. 요소를 분할해주는 라이브러리입니다. 안녕하세요. 해당 라이브러리를 사용하면. 안 녕 하 세 요 . 이런식으로 해당 요소를 분할해줍니다. 여기에 CSS 애니메이션과 애니메이션 딜레이를 사용하여 움직임을 줄 수 있습니다. CSS 사용자 지정속성 사용으로 IE에서는 작동하지 않습니다. 출처: splitting.js.org/ 참고: www.youtube.com/watch?v=ySrbvSf0xiA&ab_channel=DesignCourse
웹폰트 최적화에 대한 많은 글들이 있습니다. (아래 출처를 남겨놓겠습니다) 여기서는 결론만 남기도록 하겠습니다. 기본적인 사용법 (다른 사람이 만들어둔 CDN을 사용하는 경우) 1. 폰트 용량을 줄인다. IE9부터 사용이 가능한 woof만 사용. (woof2는 더 용량이 적으며 IE/Edge를 제외한 브라우저에서 사용 가능) 폰트가 담겨진 CDN은 jsdelivr.net것만 사용한다. (여기가 안정적이고 속도가 빠릅니다) 2. CSS @import 방식이 아닌 로 최상단에 위치시켜 불러온다. 3. 2번까지 할 경우 IE는 랜더링 방식 문제로 인해 '기본 폰트에서 적용폰트'로 깜빡인다. 구글 webfont.js를 사용해 기본 폰트를 나타나지 않게 해 줍니다. 국가는 농지에 관하여 경자유전의 원칙이 달성될 ..
밤낮 전환 토글
CSS 사용자 지정 속성을 사용해 IE에서는 제대로 나오지 않습니다. developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) developer.mozilla.org 출처: codepen.io/chintuyadav/pen/yLaaVYa
WebGL을 이용한 호버 효과
사전 준비작업 http 서버를 구동해야 합니다. 참조: www.npmjs.com/package/http-server http-server A simple zero-configuration command-line http server www.npmjs.com 코드 전체파일 출처: www.youtube.com/watch?v=ZcJ4ANTP8zk&list=LL&index=3&ab_channel=OnlineTutorials 원본 소스: github.com/robin-dela/hover-effect robin-dela/hover-effect Javascript library to draw and animate images on hover - robin-dela/hover-effect github.com
