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

css를 이용아여 문자를 회전할 수는 있지만 각 문자를 전부 수동으로 배열하는 것은 상당히 복잡합니다. 해당 js는 이러한 작업을 자동으로 수행하는 jQuery 플러그인 입니다. 반경과 방향을 제어할 수 있습니다. 반경이 작아지면 원에 가까워 집니다. 글자를 회전하지 않게 할 수 있습니다. 해당 사이트 또는 첨부파일 다운로드를 통해 소스를 다운로드 받을수 있습니다.

웹 브라우저 주소창에 출력되는 아이콘 즉 파비콘을 손쉽게 만들 수 있는 사이트입니다. 파비콘으로 만들 이미지파일을 첨부하고 [Create Favicon]을 클릭하세요. [Download the generated favicon] 클릭하여 자동으로 생성된 파비콘 이미지를 다운로드 받으면 끝! 사이트내 파비콘 적용 소스도 제공되니 아주 유용합니다.

상하 슬라이드 로링 되는 jquery 자바스크립트 소스입니다. jquery 소스 링크와 간단한 스크립트 소스를 통해서 상하 롤링 슬라이드 기능을 이용할 수 있습니다. 스크립트네 높이값 조절을 통해 이동하는 높이값 설정도 쉽네요. 여러모로 활용도가 높은 소스입니다.

[HTML 소스] link(href='https://fonts.googleapis.com/css?family=Roboto+Condensed:700', rel='stylesheet', type='text/css') h1 This text will be sliced [CSS 소스] @import "nib" body background #0099FF h1 display block absolute top 50% left 50% font-family 'Roboto Condensed' font-size 50px color #1A4C80 text-transform uppercase transform translate(-50%, -50%) > span display block position relative float..

[HTML 소스] link(href='https://fonts.googleapis.com/css?family=Roboto+Condensed:700', rel='stylesheet', type='text/css') h1 This text will be sliced [CSS 소스] @import "nib" body background #0099FF h1 display block absolute top 50% left 50% font-family 'Roboto Condensed' font-size 50px color #1A4C80 text-transform uppercase transform translate(-50%, -50%) > span display block position relative float..

head 사이에 css 를 추가하고 사용하면 됩니다. html 은 위처럼 사용하면 되며 class 명만 바꾸면 됩니다. 다양한 디자인이 있습니다. https://jnkkkk.github.io/MoreToggles.css/ 위의 링크에서 더 많은 디자인을 확인해 보세요.

3D 타이포를 쉽게 만들어 주는 js 입니다. 용량도 3.8kb 로 작은 용량입니다. js 를 추가하고, data-z-xxxx 옵션들로 옵션을 조절 하면 됩니다. https://bennettfeely.com/ztext/#options 옵션 페이지를 위의 링크에서 확인 가능합니다. 각 옵션마다 샘플 코드를 바로 볼수 있어, 적용을 쉽게 할 수 있습니다.

자바스크립트를 사용하여 마우스를 따라 선이 생기는 효과를 만들어 볼 수 있습니다. HTML 소스 CSS 소스 body, html { padding: 0; margin: 0; } JS 소스 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); // for intro motion let mouseMoved = false; let mouse = { x: .5 * window.innerWidth, y: .5 * window.innerHeight, tX: 0, tY: 0 } let params = { pointsNumber: 40, widthFactor: .3, mouseThreshold: .6, spring: ...

Splitting.js를 사용하여 로딩하는 애니메이션 입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML 소스 Loading .... CSS 소스 .vertical-flip { width: 10rem; height: 1rem; margin-block-start: 0.5rem; background: dodgerblue; } .wrap { outline: 1px solid #efefef; outline-offset: 0.25rem; } p { opacity: 0.5; } body { display: grid; place-items: center; min-height: 100vh; background: #080808; font-family: "Open Sans", sans-serif; ..

https://fontello.com/ 폰텔로는 이미지 파일로 제공되는 것이 아니라 웹폰트 형식으로 제공하는 무료 아이콘 사이트입니다. 자신만의 무료 아이콘 웹폰트도 만들 수 있으며, 만든 웹폰트 묶음을 다운로드 할 수 있습니다.