유튜브 재생 버튼 jquery로 만들기 html css .vod_conbox{ overflow: hidden; position: relative; height: 0; width: 100%; /* padding-top: 30px; */ padding-bottom: 56.25%; } .vod_conbox iframe, .vod_conbox object, .vod_conbox embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vod_thumb{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: #000; //intro 이미..
/* Shine */ .hover12 figure { position: relative; } .hover12 figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25d..
모바일 시 사용자가 좌우 스크롤 하도록 유도하는 이미지 띄우는 이벤트 모바일에서 터치 또는 영역 스크롤 시 이미지 사라지는 이벤트 // scroll wrap .scroll_wrap{ overflow-x: auto; width: 100%; } // guide image .scroll_guide{ position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; z-index: 10; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .scroll_guide img{ max-width: 100%; } // scroll contents .scroll_content..
*카카오톡 공유하기 Demo https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com https://developers.kakao.com/docs/latest/ko/message/js-link Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 피드 형식으..
countup.js 같은 숫자 카운트 효과 순수 제이쿼리로 구현하기 $('.num').each(function () { var $this = $(this) var regex = /[^0-9]/g; var result = $this.text().replace(regex, ""); $({ countNum: 0 }).animate({ countNum: result }, { duration: 2000, easing: 'linear', step: function () { $this.text(Math.floor(this.countNum).toString() .replace(/\B(?