본문 바로가기

퍼블리싱

 (179)
구름 흘러가는 효과 only css 이것도 4년전 프로젝트때 수정해서 사용한 소스! https://codepen.io/mghayour/pen/AxWBYW See the Pen Cloudy Sky by mghayour (@mghayour) on CodePen.
눈 내리는 효과 javascript 4년전에 프로젝트 할때 화면 백그라운드에 눈 내리는 효과 넣어야 할때 쓴 코드. 예전 프로젝트 살펴보다가 찾았는데 나름 괜찮았던듯. https://codepen.io/loktar00/pen/njPvwM See the Pen Its snowing! by Loktar (@loktar00) on CodePen. 이 소스를 기반으로 나는 스크립트를 조금 수정해서 아래와 같이 썼다. (마우스오버시 눈덩이 피하는것 같은 효과 빼고 개수 줄이고 등등) (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || wi..
글자수에 따라 ellipsis 처리하기 Setting a max character length 예제 : https://codepen.io/publisherkim/pen/MWZrpYG function ellipsis(elem, max) { elem.each(function () { var textLength = $(this).text().length; var text = $(this).text(); if (textLength > max) { $(this).text(text.substr(0, max - 3) + '…'); }; }); }; // use : ellipsis(selecter, maxlength); ellipsis($('.txt'), 85);
간단한 좋아요 버튼 css 애니메이션 simple like button animation 매우 간단한 linke button animation See the Pen like button animation by publisher.kim (@publisherkim) on CodePen. html like css .btn_like {width: 50px; height: 50px;background: url(https://umings.github.io/images/i_like_off.png) no-repeat center / 50px; cursor: pointer; border:0; font-size:0; margin:50px auto; display:block;} .btn_like.on {background: url(https://umings.github.io/images/i_like_on.png..
간단한 css gradient shadow animation css gradiend animation은 여러군데 활용 할수 있을듯. See the Pen css gradient animation by publisher.kim (@publisherkim) on CodePen. css @keyframes color { 0%,to {background-position: 10% 0;} 50% {background-position: 91% 0;} } .box{margin:20px auto 0; width:300px; height:300px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; position:relative; border-radius:20px;} ..
scroll down button effect only css See the Pen scroll button effect only css by publisher.kim (@publisherkim) on CodePen. html SCROLL css @keyframes deco { 0% {transform: translateY(-56px);} 25% {transform: translateY(0);} 100% {transform: translateY(0);} } @keyframes big { 0% {transform: scale(1);opacity: 1;} 25% {transform: scale(1);opacity: 1;} 50% {transform: scale(2);opacity: 0;} 50.01% {transform: scale(1);opacity: 1;} 75% ..
button hover underline animation only css button에 hover시 텍스트 중간에서부터 언더라인이 scale되는 효과. See the Pen button hover css by publisher.kim (@publisherkim) on CodePen. html LINK1 LINK2 LINK3 LINK4 css .btns{text-align:center; padding:50px 0;} .btn{display:inline-block; color:#000; font-size:17px; margin:0 20px; position:relative;} .btn::after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; backgrou..
특정 요소에 opacity가 그라데이션으로 희미해지는 css 선택자 { -webkit-mask-image: linear-gradient(to right, black 93%, rgba(0, 0, 0, 0.2) 95%, transparent 97%); mask-image: linear-gradient(to right, black 93%, rgba(0, 0, 0, 0.2) 89%, transparent 97%); } swiper 등에 잘 사용할수 있을듯.
input text with animation label input text에 focus 됬을때 label이 애니메이션 되는 효과, input이 모두 채워졌을때 button에 active 효과 See the Pen input text with animation label by publisher.kim (@publisherkim) on CodePen. html 이름 휴대폰번호 고정값 샘플타이틀 확인 css .form_wrap{width:500px; margin:0 auto;} .form_list li + li{margin-top:7px;} .form_wrap .btn{line-height: 58px;height: 60px;width: 100%;font-size: 20px;font-weight: 600;border-radius: 10px;margin-top: 20..
mouse over시 설명 텍스트가 따라다니는 갤러리 https://codepen.io/kathykato/pen/KRQOKY 직접 링크 들어가서 확인 필요 See the Pen Gallery by Katherine Kato (@kathykato) on CodePen.
마우스커서 따라다니는 도형 + overlay 효과 https://codepen.io/ig_design/pen/VgaXaY 이건 직접 링크로 들어가서 봐야 커서가 제대로 작동함. See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.
센스있는 go 버튼 https://codepen.io/kathykato/pen/rZRaNe 사람들이 많이 좋아요 누른 펜은 이유가 있다! See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.
hover slide https://codepen.io/ig_design/pen/MRbJWW See the Pen Hover slider (dark/light) - ver 3 by Ivan Grozdic (@ig_design) on CodePen.
감각적인 card hover https://codepen.io/hexagoncircle/pen/XWbWKwL See the Pen Card Hover Interactions by Ryan Mulligan (@hexagoncircle) on CodePen.
클릭한 카드만 띄우기 + detail 보이기 https://codepen.io/candroo/pen/wKEwRL See the Pen 3D Fold out reveal by Andrew Canham (@candroo) on CodePen.
gradient buttons https://codepen.io/pirrera/pen/bqVeGx See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
css hover effects https://codepen.io/honglio/pen/kWXXvj See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.
기본적인 responsive table https://codepen.io/geoffyuen/pen/DZxEKy See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.
텍스트 나타나는 효과 https://codepen.io/Sonick/details/AwXJdM See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.
label이 있는 gauage차트 highchart guage chart with label See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size:..
맨위로
Total : Today :
728x90

티스토리툴바