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

SplitLines는 상자의 너비 또는 함수에 전달된 너비를 기반으로 특정 html 태그를 사용하여 텍스트 블록을 별도의 줄로 분할할 수 있는 경량 jQuery 플러그인입니다. 그런 다음 각 선의 스타일을 개별적으로 지정하고 애니메이션을 적용할 수 있습니다. 첨부된 파일의 압축을 해제하고, demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 작동원리는 아래와 같습니다. 1). 내용을 단어로 분할하여 원래 Html 태그를 유지합니다. 이 태그는 *each* 단어에 해당 단어가 있는 태그와 함께 태그를 지정하므로 래핑이 시작될 때 태그는 그대로 유지됩니다. 이것은 스타일에 영향을 미칠 수 있습니다 (예 : 여백이 있으면 각 단어가 해당 스타일을 상속합니다). 2). 단어를 공백으로 나눕니다. ..

스크롤시 원하는 문구에 하이라이트가 텍스트 앞에서 뒤로 자동으로 적용됩니다. 원하는 문구에 mark 태그를 삽입합니다. 관련 css 소스입니다. mark 태그에 적용이 됩니다. animation-timeline을 이용하여 시작시점을 정할수 있습니다. 해당 사이트 또는 첨부파일에서 관련소스를 다운로드 받아 소스 확인이 가능합니다.

css로 텍스트가 위아래로 이동하는 애니메이션 입니다. HTML Hello world ! bob ! users ! everybody ! CSS body { width: 100%; height: 100%; position: fixed; background-color: #34495e; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 160px; overflow: hidden; font-family: "Lato", sans-serif; font-size: 35px; line-height: 40px; color: #ecf0f1; } .content__container { font-weigh..

Textillate.js는 멋진 라이브러리를 결합하여 모든 텍스트에 CSS3 애니메이션을 적용하기 위한 사용하기 쉬운 플러그인입니다. 애니메이션 효과는 텍스트가 들어올때, 나갈때 두가지 타임으로 구분되어 설정이 가능하며, 설정값은 약 30가지 이상입니다. 메인 슬라이드나 광고영역에 손쉽게 사용이 가능하며, 밋밋한 사이트에 생기가 생겨보이네요.

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

텍스트를 위 아래로 스크롤링을 하는 가벼운 텍스트 애니메이션용 jQuery 플러그인 입니다. 데모는 다운로드 받은 파일의 압축을 해제한 후 test/index.html 파일을 웹브라우저로 열어보면 됩니다. 화면에 출력되는 텍스트에 롤링 효과를 주기 위한 플러그입입니다. 텍스트를 롤링하기에 필요한 속도(speed) 와 지연시간(delay) 을 지정할수 있습니다. 그 외 텍스트가 변경될 때 몇가지 효과를 지정할수 있습니다. 샘플 파일의 소스코드를 확인해보면, HTML코드와 자바스크립트도 복잡한 형태는 아니어서 쉽게 사용이 가능할 걸로 보이네요.

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

* Cuttr.js Cuttr 는 사용하기 쉬운 jquery 라이브러리로 여러줄 텍스트 콘텐츠를 주어진 사양게 맞게 잘라서 보여줍니다 * License GNU GENERAL PUBLIC LICENSE * 사용방법 첨부된 압축파일을 다운로드하여 압축을 해제한후 원하는 웹루트 디렉터리에 업로드를 합니다 아래와 같이 class 를 선언하여 멘트를 기재후 아래와 같이 jquery 파일과 다운받은 js 파일, 스크립트를 실행합니다 결과는 다음과 같이 텍스트와 버튼이 생성되는것을 볼수 있으며 버튼의 실행에 따라 글자가 모두 보여지거나 일부 감춰지는 기능을 확인할 수 있습니다 첨부된 파일의 examples/index.html 파일에 관련 예제가 있으니 참조하시면 좋을것 같습니다