JavaScript: GIFless animation. 자바 스크립트 : GIFless 애니메이션. Animate images,logos with jQuery 애니메이션 이미지를 jQuery와 로고
Posted on 23. 23 게시됨. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax 7월, 2009 코딩, 디자인, 자바 스크립트 & 아약스에서 드라 고스에 의해
After playing some time with position relative and absolute, I've noticed one a great aspect of the png image format (probably gif images are also good, but since we are trying to create a GIFless animation, I won't use any gif images in this tutorial). 우리 GIFless 애니메이션을 만들려면 어떤 gif 이미지는 사용하지 않을려고하는 자세와 시간을 좀 상대와 절대 재생이 끝나면, 난 (아마도 gif 이미지도 잘하지만 PNG 이미지 형식의 큰 부분 중 하나 나타났습니다 이 튜토리얼).
So here's aa PNG (transparent text), with the name of this website: 이 웹 사이트의 이름을 가진 그래서 여기에 aa는 PNG로 (투명 텍스트) :
Transparent Logo 투명 로고
The trick of animating images, without the need of using the GIF image format features, are as follow: GIF 이미지 포맷 기능을 사용하여 필요없는 이미지를 애니메이션의 마술,,하는대로 따르십시오 :
We have an image with transparent text written on it. 우리는 투명한 텍스트를 그것에 적힌 이미지. To animate the transparent text, we need to place a background image below the actual image and move this background image, in order to create a so called “animation”. 투명 텍스트를 움직이게하기 위해, 우리는 실제 이미지 아래에 배경 이미지를 이곳이 배경 이미지를 이동하기 위해서는 이렇게 "라는 애니메이션을 만들 필요하다". To be more precise, the image we want to be animated should have a higher z-index than the background image below it (it's like working with layers in Photoshop). 더욱, 우리는 그것을 아래에 배경 이미지를보다 높은 z는 색인을 생성해야 움직이는 원하는 이미지를 (이것은 포토샵에서 레이어 작업과 같은)가 정확해야합니다. In order to animate the background image we need some javascript work to be done. 하기 위해서 우리가 할 몇 가지 자바 스크립트 작업이 필요 배경 이미지를 움직이게합니다. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. 물론, jQuery의 큰 팬, 난 jQuery의 모든 애니메이션을 다 할 수있는 사용했습니다.
Here's the script I've come up with: 난 여기 함께 왔어요 스크립트 :
(function($){ (함수 ($) ( $.fn.enliven = function(options) { $. fn.enliven = 기능 (옵션) ( var defaults = { var 기본값 = ( bgImage: '', bgImage : '', duration:3000 기간 : 3000 }; ); var options = $.extend(defaults, options); var 옵션 = $. (기본값, 옵션) 연장; var imH=this.attr("height"), var imH = this.attr ( "높이"), imW=this.attr("width"); imW = this.attr ( "너비"); this.wrap(' this.wrap ( ' '); '); this.css("position","absolute"); this.css ( "위치", "") 절대적; $('#'+this.attr("className")+'Cont').append(' $('#'+ ( "className") + 'Cont') 추가. this.attr ( ' '); '); var var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. LBG '+ ( "className")) this.attr. attr ('clientWidth ') - this.attr ('폭 ')) / 2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG '+ ( "className")) this.attr. attr ('clientHeight ') ('높이 ')) / 2 this.attr; function getrand() { 함수 getrand () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); return nr==0?-1:1; 반환 nr == 0? -1:1; } ) function randimate(obj) { 함수 randimate (obj) ( var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); var 전화 = Math.floor (imH * 1백분의 20), PW ActiveX 수동 설치 = Math.floor (imW * 1백분의 20); newLeft=$(".lbg"+obj.attr("className")).attr("offsetLeft")+Math.floor(Math.random()*pw)*getrand(); newLeft =$(". LBG "+ ("className ")) obj.attr. attr ("offsetLeft ") + Math.floor (Math.random () * PW ActiveX 수동 설치) * getrand (); newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); newTop =$(". LBG "+ ("className ")) obj.attr. attr ("offsetTop ") + Math.floor (Math.random () * 전화) * getrand (); if(newLeft>0) newLeft=0; 만약 (newLeft "0) newLeft = 0; else if(newLeft<-maxLeft) newLeft=-maxLeft+1; if(newTop>0) newTop=0; 다른 경우에는 ( "- maxLeft) newLeft =- maxLeft +1 newLeft; 경우 (newTop"0) = 0 newTop; else if(newTop<-maxTop) 다른 경우 (newTop "- maxTop) newTop=-maxTop+1; newTop =- maxTop +1; $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); $ ( '. LBG'+ ( "className")) obj.attr. 움직이게 ((왼쪽 : newLeft + "픽셀", 가기 : newTop + "픽셀"), defaults.duration ","직선, 함수 () (randimate (obj );)); } ) return this.each(function(){ 반환 this.each (함수 () ( randimate($(this)); ($ randimate (이)); }); )); }; ); })(jQuery); )) (jQuery);
The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. jQuery를 포함 후 jQuery의 플러그인으로 작동 위의 코드는, 그래서 그것을 페이지에 포함되어야합니다. In order to animate an image, you should use this code: 순서에서는, 당신은이 코드를 사용해야합니다 : 이미지를 움직이게하고
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). 흥겹게 ((bgImage : ". / path_to_background_image.png"기간 : 1000)); / / 기간 시간을 배경으로 한 애니메이션의 시간이다 Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php 여기 미친 예제 1의 : http://iwebdevel.com/wp-content/uploads/2009/07/logo.php
Here's another non-crazy example 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php 여기 아닌 다른 미친 예제 2 : http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php의
If you like the idea and want more features, drop me a line in a comment and I'll try to improve the code and add more features 당신과 같은 생각을하면, 내 의견에 낚싯줄을 드리 우다 더 많은 기능을 원하는 나는 코드를 개선하고 더 많은 기능을 추가 해보자 
Related posts: 관련 게시물 :
- JavaScript: What if jQuery animation doesn't fire/start? 자바 스크립트 : 어떤 경우에는 jQuery 애니메이션 쏘지 / 시작합니까?
- JavaScript: How to get the index (position within a group) of an object with jQuery? 자바 스크립트 : 어떻게 jQuery와 개체의 (위치를 그룹 내에서) 인덱스를 얻을가?
- Javascript: How to validate email address with JavaScript? 자바 스크립트 : 자바 스크립트와 방법의 이메일 주소를 확인하려면?
- JavaScript: Get anchor from URL 자바 스크립트 : URL에서 앵커로 나가
- JavaScript: Send function as a parameter to another function (callbacks) 자바 스크립트 : 다른 함수 (콜백)를 매개 변수로 함수를 보내기
