목록텍스트효과 (4)

웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] GSAP를 이용한 텍스트 효과 Text scroll and hover effect with GSAP and clip

GSAP 이용한 텍스트 효과입니다. 스크롤, 호버 시 효과가 각각 다르며 메인 페이지 등등 사이트에 동적인 효과를 주기 좋습니다.  HTML 구조  TEXT EFFECTWOAH  GSAPAND CLIPPING  CRAZYYYCRAZYYY HOVER ON MEhttps://stacksorted.com/text-effects/minh-pham" target="_blank" rel="noopener">SOURCE LIKE THIS?https://twitter.com/juxtopposed" target="_blank" rel="noopener">LET'S CONNECT CSS 소스body {  margin: 0;  padding: 0;  font-family: 'Poppins', sans-serif;  back..
웹프로그램밍 자료실/HTML 자료 2024. 6. 12. 09:14
[해피CGI][cgimall] Toggle Long Text Block With Smooth Animations - dReadmore

데모 확인은 다운로드 받은 파일의 압축을 해제한 뒤 demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 길이가 긴 텍스트를 웹브라우저의 화면크기에 따라서 위 그림 처럼 텍스트의 일부는 화면에 표시를 해주고, 나머지 텍스트들은 show more 링크를 눌러보면, 감추어져 있던 텍스트들이 화면에 애니메이션 효과와 함께 표시가 됩니다. 웹브라우저의 크기를 조절을 해보면, 화면크기에 맞춰서 텍스트들을 숨기고, show more 버튼을 눌러보면, 숨어있던 텍스트들이 표시가 되게 됩니다. 사용법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 11. 10. 09:21
[해피CGI][cgimall] highlight.js v11.0.1

간단하게 웹페이지 내의 소스코드 하이라이팅을 쉽게 할 수 있는 highlightjs 입니다. highlightjs는 최대 196가지의 언어를 지원합니다. 참고로 이곳에 첨부된 소스 파일은 34종의 언어만 포함된 버전 입니다. 전체 언어에 대한 소스를 다운로드 받으시고자 하신다면 아래 페이지로 이동하여 원하는 언어를 클릭하여 하단의 다운로드 버튼을 통해 다운로드가 가능 합니다. https://highlightjs.org/download/ 혹은 CDN 서비스를 이용 할 수도 있습니다. 사용방법은 https://highlightjs.org/usage/ 페이지에서 확인 하실수가 있으며, 기본적인 사용방법은 간단 합니다. Javascript 와 CSS를 선언하고 하이라이팅이 필요한곳에 태그를 이용 하면 됩니다. ..
웹프로그램밍 자료실/JAVA 자료 2021. 9. 7. 09:14
[해피CGI][cgimall] 텍스트에 로딩시 블록되는 효과를 가진 에니메이션 Block Reveal Effects

텍스트 및 이미지등에서 로딩이 될 경우 블록되는 효과로 밑줄긋기 효과처럼 보이는 Block Reveal Effects 로 on-scroll 시에도 순차적으로 적용되는 예제등을 확인할 수 있습니다. 사이트가 최초 로딩되면 텍스트 및 이미지가 페이지상에 노출되기까지 어느정도 시간이 소요됩니다. (아주 짧은 시간이지만 웹사이트 특성상 출력까지의 로딩되는 시간이 필요합니다.) 로딩되는 효과를 좀더 다이나믹하게 연출하여 지루하지 않는 UI 를 가실 수 있습니다. 다양한 예제가 소개되어있고 위 예제처럼 블럭요소가 지나가는 방향도 설정이 가능합니다. https://github.com/codrops/BlockRevealers/ 위 링크를 통해 다운로드가 가능하며, 소스상에서 보시면 js/anime.min.js js/s..
웹프로그램밍 자료실/JAVA 자료 2021. 1. 22. 09:11
Prev 1 Next