퍼블리싱 (179) 썸네일형 리스트형 아주 간단한 text hover효과 https://codepen.io/argyleink/pen/poEjvpd See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen. 1초 단위로 데이터가 들어가는 highchart See the Pen 1초 단위로 데이터가 들어가는 highchart by publisher.kim (@publisherkim) on CodePen. html css body{ background: #282d3a; } .chart1{ width: 300px; height: 300px; border: 1px solid; box-sizing: border-box; padding: 10px; } .chart2{ width: 900px; height: 600px; border: 1px solid; box-sizing: border-box; padding: 10px; } .MAT20{ margin-top: 20px; } .highcharts-tooltip-box { fill: black; fill-opacity:.. swiper slider text fadein 효과 See the Pen swiper text fadein by publisher.kim (@publisherkim) on CodePen. html 이전 다음 1슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 2슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 3슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:300.. slick slider progress bar and page fraction example 프로그래스 바 + 페이징 fraction 들어간 slick slider See the Pen slick slider progress bar and page fraction example by publisher.kim (@publisherkim) on CodePen. html 첫번째 슬라이드 두번째 슬라이드 이전 멈춤 다음 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slide_wrap{width:600px; height:300px; margin: 0 auto;} .slide_wrap .item{width:100%; height:300px; box-sizing:bord.. 드래그로 두개의 이미지 비교 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_compare W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com 다양한 캡션 hover 효과 (갤러리, 카드 등 hover효과) 데모 : https://tympanus.net/Tutorials/CaptionHoverEffects/ Caption Hover Effects - Demo 1 tympanus.net 다운로드 페이지 : https://github.com/codrops/CaptionHoverEffects GitHub - codrops/CaptionHoverEffects: A tutorial on how to create some subtle and modern caption hover effects. A tutorial on how to create some subtle and modern caption hover effects. - GitHub - codrops/CaptionHoverEffects: A tutorial on.. 카카오맵 이미지 마커 + 커스텀 오버레이 (마커 클릭시 해당장소로 이동) * 화면확인 https://umings.github.io/images/map_sample.html ------ https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/ 위 링크를 참고해 카카오맵 마커 이미지 변경 + 이미지 클릭시 해당 장소 카카오맵으로 이동하는 소스. 1. 카카오맵 api 발급받기 - 카카오맵에 아주 친절하게 잘 설명되어있음 https://apis.map.kakao.com/web/guide/ 2. 지도에 표출하고자 하는 곳의 위도, 경도 찾기 https://dday.tistory.com/616 카카오맵 위도 경도 찾기 방법 (kakao map) 오늘 포스팅에서는 '카카오맵(kakaomap)을 통해 위도, 경도 찾는 방법'에 대해 알.. 감각적인 메뉴 데모 : https://tympanus.net/Development/MenuHoverEffects/salal.html Inspiration for Menu Hover Effects | Demo: Salal | Codrops tympanus.net 다운로드 페이지 : https://github.com/codrops/MenuHoverEffects/ GitHub - codrops/MenuHoverEffects: Some inspiration for menu hover effects. Some inspiration for menu hover effects. Contribute to codrops/MenuHoverEffects development by creating an account on GitHub. gi.. background circle animation loading 처음 접속시 중앙에 원형 배경과 로고 나타나기 -> 로딩완료 후 둥근 배경이 확 커지면서 화면을 꽉 채우고 사라지는것 See the Pen background circle animation loading by publisher.kim (@publisherkim) on CodePen. html 컨텐츠 css body.hide{overflow: hidden;} .loading{position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%;background: #fff; z-index: 9999; overflow: hidden;} .loading .circle{width: 300px; height: 300px; border-radius: 300p.. swiper slider custom navigation 커스텀 메뉴를 사용한 swiper slider See the Pen swiper custom navigation by publisher.kim (@publisherkim) on CodePen. html 슬라이드 1 슬라이드2 슬라이드3 슬라이드4 이전 다음 슬라이드1 슬라이드2 슬라이드3 슬라이드4 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:300px;} ... text hover시 한글자씩 두근(?)거리는 효과 데모 : https://tympanus.net/Development/LetterInteractions/ Letter Interactions | Demo: Magneto | Codrops Magneto Kidnap Redraw Swing Playful Trail Crossword Move Out Weaver Leve fit, quod bene fertur, onus. tympanus.net 다운로드 페이지 : https://github.com/codrops/LetterInteractions/ 스크롤시 텍스트가 블록 효과로 나타남 데모 : https://tympanus.net/Development/BlockRevealers/ Block Reveal Effects | Overview | Codrops Your CS success starts here. Hack Reactor's 12-week immersive coding school is accepting applications for onsite and online courses. Apply now and become a software engineer. tympanus.net 다운로드 페이지 : https://github.com/codrops/BlockRevealers/ GitHub - codrops/BlockRevealers: Ideas for revealing content.. 스크롤 진행 상태 보여주기 https://codepen.io/daniel-hult/pen/RvReWY See the Pen Scroll Progressbar by Daniel Hult (@daniel-hult) on CodePen. 스크롤 위치에 따라 gnb에 on효과 코드가 직관적이고 깔끔하다. 초기 화면일때 gnb 첫번째 메뉴에 on효과를 넣기 위해서 메뉴 첫번째 li의 a태그에 class="active" 추가만 하면 될듯. https://codepen.io/kimyangsun/pen/rNxPmWL See the Pen 페이지 인디케이터 스크롤에 따른 active by kimyangsun (@kimyangsun) on CodePen. text rolling button only css 자동으로 내용이 바뀌는 버튼 (텍스트 말고 이미지로 활용해도 ok) See the Pen text rolling button only css by publisher.kim (@publisherkim) on CodePen. html 버튼내용1 버튼내용2 버튼내용1 버튼내용2 css .rolling_btn{display:inline-block; width:100px; height:100px; border-radius:100%; overflow:hidden; border:2px solid #444; background:#fff; cursor:pointer; transition:all 0.2s;} .rolling_btn:hover{box-shadow:0px 10px 10px rgba(0,0,0,0.1);} .r.. 다양한 text hover효과 https://tympanus.net/Development/TextStylesHoverEffects/ Inspiration for Text Styles and Hover Effects The next effects only work in Firefox and Chrome. tympanus.net 웹접근성 맞춘 gnb //pc 메인메뉴 마우스오버or포커스 $("#header #gnb .m_menu").on('mouseenter focusin', function () { $(this).children("a").addClass("over"); $("#header").stop().animate({ height: 410 }, 200) }); //마우스리브or포커스아웃 $("#header #gnb .m_menu").mouseleave(function () { $("#header #gnb .m_menu a").removeClass("over"); $("#header").stop().animate({ height: 110 }, 200) }) $("#header #gnb .m_menu:last-of-type").focusout(fu.. display:flex; 에서 min-height를 주면 align-itmes:center;가 안될때 해결방법 (ie) 플랙스박스:after{content:''; min-height:inherit; font-size:0;} input file 커스텀 See the Pen custom input file by publisher.kim (@publisherkim) on CodePen. html 찾아보기 css /* custom file */ .filebox { position: relative; width: 100%; } .filebox .file_input { display: inline-block; height: 40px; padding: 0 10px; vertical-align: middle; border: 1px solid #d9d9d9; width: calc(100% - 80px); color: #333; outline: none !important; box-sizing:border-box;} .filebox .file_input::-webki.. 버튼 hover animation 여러개 https://codepen.io/elroy_tsai/pen/RgNEqz HTML 삽입 미리보기할 수 없는 소스 이전 1 2 3 4 5 6 7 ··· 9 다음
