본문 바로가기

분류 전체보기

 (224)
hover 영역만 스포트라이트(?)같은 효과 Magical Hover Effect (w/ Tutorial) https://codepen.io/Hyperplexed/pen/MWQeYLW See the Pen Magical Hover Effect (w/ Tutorial) by Hyperplexed (@Hyperplexed) on CodePen.
GSAP ScrollTrigger - Demo 회사 홈페이지 만들때 쓰긴 썼지만 어려운 ㅠㅠ scrolltrigger https://codepen.io/noeldelgado/pen/BaogqYy See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen.
The aurora (only CSS) 텍스트에 그라데이션 효과가 움직이는듯한 css https://codepen.io/ostylowany/pen/vYzPVZL See the Pen 🌌 The aurora (only CSS) by Ostylowany (@ostylowany) on CodePen.
swiper slide 효과 스와이핑 할때 효과가 괜찮은듯. https://codepen.io/TurkAysenur/pen/gORaboY See the Pen Product Showcase UI by Aysenur Turk (@TurkAysenur) on CodePen.
Simple CSS Waves https://codepen.io/goodkatz/pen/LYPGxQz See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
Animated Continuous Sections with GSAP Observer 스크롤 다운 할때 글자가 하나씩 나타나는듯한 효과. 예쁨 https://codepen.io/GreenSock/pen/XWzRraJ See the Pen Animated Continuous Sections with GSAP Observer by GreenSock (@GreenSock) on CodePen.
CodePen HomeNeumorphic Elements https://codepen.io/myacode/pen/PoqQQNM See the Pen Neumorphic Elements by Maria Marin (@myacode) on CodePen.
glowy hover effect https://codepen.io/inescodes/pen/PoxMyvX See the Pen glowy hover effect by Ines (@inescodes) on CodePen.
구름 흘러가는 효과 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;} ..
css shadow gradient 그래디언트 그림자 효과 https://alvarotrigo.com/shadow-gradients/ CSS Shadow Gradients — Generator [Fast & Easy] The CSS Shadows Gradient Generator was a tool that I was missing. One day I thought it'd be nice to add some beautiful gradients in a shadow for a web design I was working in. I then searched for a CSS generator to find the fastest way to do it, and I got alvarotrigo.com 밋밋한 box shadow가 아닌 gradient로 box shad..
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..
Google Material icon - 가끔 디자이너가 시안에 넣지 않은 아이콘을 퍼블리싱 하다가 추가해야 하는 경우가 있다. 대부분의 경우 디자이너에게 요청 하지만, 간단한 기능 버튼에 들어가는 아이콘들은 하나의 백터 기반 아이콘 라이브러리(?)를 포함시켜 두고 퍼블리셔가 넣기도 한다. - 우리 회사는 xeicon을 주로 쓰는데, 폰트파일을 다 합해도 1mb 정도의 가벼운 폰트다. 사용 방법도 진짜 간단함. 그래서 아마 쓰기 시작한듯? - 많이 쓰이는 goolgle marerial icon은 종류가 굉장히 다양하고 (900개 넘음) 세련됬으며, 보기 편하고 customize도 미리 해볼수 있는 라이브러리도 있다. - 근데 폰트 크기가 너무크다................... cdn으로 쓸거 아니면 잘 안쓸듯. 1.라이브러리 : http..
간단한 box shadow css 생성 사이트 https://www.cssmatic.com/box-shadow Box Shadow CSS Generator | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic? www.cssmatic.com
맨위로
Total : Today :
728x90

티스토리툴바