Video

- playsinline : iOS에서 동영상이 내장플레이어로 실행되는것을 막아준다(브라우저 내부에서 실행) - autoplay : 자동실행, mobile 환경이나 chrome 브라우저에서는 음성이 없을 때(muted) 자동실행된다. 그 외에는 사용자 입력(버튼클릭) 시 실행 가능 iOS 비디오 정책 : https://webkit.org/blog/6784/new-video-policies-for-ios/ Chrome 비디오 자동재생 정책 : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 1. Video Play document.getElementById(video).play(); 2. Video Pause documen..
javascript(jquery) 2019. 2. 28. 10:46
staggerTo(), staggerFrom()

for문 같이 연속되는 동작을 할 수 있도록 만들어줌 TweenMax.staggerTo(".class", 1, {y:"+=150", opacity:0}, 0.2); .class 를 y는 150 만큼 이동, opacity는 0으로 변경, 0.2초마다 다음 .class로 옮겨가면서 실행 아래에서 실행되는거 확인 가능 See the Pen TweenMax StaggerTo by seonn (@seonn) on CodePen. 아래는 stagger를 이용해서 글자가 흩어지는 애니메이션을 구현 See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.
GSAP/TweenMax 2019. 2. 14. 16:14
fromTo()

TweenMax.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ) TweenMax.fromTo("#target", 3, { left : 0 }, { left : "200px" }); 스타일시스에 명시된 값을 무시하고 fromVars 에서 toVars 로 이동 #target이 우측으로 200px 만큼 이동한다.
GSAP/TweenMax 2019. 2. 14. 16:14
to(), from()

TweenMax.to( target:Object, duration:Number, vars:Object ) .to() stylesheet(css)에 명시된 값에서 출발하여 해당구문에 명시된 값까지 변화하는 애니메이션 #target{left:0;} tweenMax.to("#target", 3, { left: "200px" }); #target 이라는 오브젝트를 3초동안 우측으로 200px 만큼 이동 TweenMax.from( target:Object, duration:Number, vars:Object ) .from() 해당구문에 명시된 값에서 출발하여 스타일시스에 명시된 값까지 변화 (to와 반대방향) #target{left:200px;} tweenMax.from("#target", 3, { left: "..
GSAP/TweenMax 2019. 2. 14. 14:52
[css3] ::selection

글을 긁었을때 드래그되는 색상을 바꿔주는 코드 ::-moz-selection{background:#6f3ec7; color:#fff;} ::selection{background:#6f3ec7; color:#fff;} 참고사이트 : http://css-tricks.com/window-inactive-styling/ http://quirksmode.org/css/selectors/selection.html
html, css 2013. 3. 4. 09:51
스크롤이 맨 아래로 내려갔을때 추가되는 게시판 리스트(무한스크롤)

스크롤이 맨 아래로 내려갔을때 추가되는 게시판 리스트 공부사이트 : http://seonn.ivyro.net/example/more_board/index_scroll.html //더보기 시 리스트를 5개씩 들고오기 var board = $("#board"); var addObj="";addObj+="추가1"; addObj+="추가2"; addObj+="추가3"; addObj+=""; //스크롤이 맨 끝에 내려왔을때 $(window).scroll(function(){ var scrolltop = $(window).scrollTop(); if( scrolltop == $(document).height() - $(window).height() ){ for(i=0; i= $(document).height() -..
javascript(jquery) 2013. 2. 8. 10:16
Image Zoomer

Image Zoomer(출처) : http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm 공부사이트 : http://seonn.ivyro.net/example/zoom_effect/ 마우스 오버 시 이미지 줌 되는 플러그인jQuery(document).ready(function($){ $('#image1').addimagezoom({ zoomrange: [3, 10], //줌레벨설정 초기수치 3부터 마우스휠로 10까지 늘릴수있다. magnifiersize: [300,300], //픽셀확대영역 크기 설정 magnifierpos: 'left', //확대영역 위치 설정 cursorshade: true, largeimage: 'images/img11_big...
javascript(jquery) 2013. 2. 8. 10:09
iScroll

iScroll : http://cubiq.org/iscroll-4 ♧ iScroll 기본 셋업 - html code 내용 - css code#wrapper{ position:absolute; z-index:1; top:45px; bottom:0; left:0; width:100%; overflow:auto; } #wrapper #scroller{ position:absolute; z-index:1; -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } - script codevar myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventList..
javascript(jquery) 2013. 2. 8. 09:35
1 2 3
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/09   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함