JavaScript: GIFless animation. JavaScript: animacja GIFless. Animate images,logos with jQuery Animowane obrazy, logo z jQuery
Posted on 23. Zamieszczone w dniu 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Lip, 2009 Dragos w Coding, Design, JavaScript i Ajax
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). Po pewnym czasie gry z pozycji względnej i bezwzględnej, zauważyłem jeden wielki aspekt png format obrazu (prawdopodobnie gif są również dobre, ale ponieważ staramy się stworzyć GIFless animacji, nie będzie wykorzystywać żadnych gif w tym kursie).
So here's aa PNG (transparent text), with the name of this website: Więc tutaj PNG aa (przejrzysty tekst), z nazwą tej strony:
Transparent Logo Transparent Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Sztuczka animowania obrazów, bez konieczności korzystania z funkcji GIF format obrazu, są następujące:
We have an image with transparent text written on it. Mamy obraz z przezroczystym tekst napisany na jej temat. 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”. Aby animować przejrzysty tekst, musimy się tła poniżej rzeczywistego obrazu i przeniesienie tego obrazu tła, w celu stworzenia tak zwanych "animacja". 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). Aby być bardziej precyzyjnym, obraz chcemy być animowany powinien mieć wyższe z-index niż tła poniżej (to lubię pracować z warstwami w Photoshopie). In order to animate the background image we need some javascript work to be done. W celu pobudzania tła potrzebujemy trochę JavaScript do zrobienia. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Oczywiście, jak wielkim fanem jQuery Użyłem jQuery zrobić wszystkie rzeczy, animacji.
Here's the script I've come up with: Oto skrypt I wpadliśmy:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = function (opcje) ( var defaults = { var domyślnie = ( bgImage: '', bgImage:'', duration:3000 Czas trwania: 3000 }; ); var options = $.extend(defaults, options); var options = $. rozszerzenia (domyślnie, opcje); var imH=this.attr("height"), var IMH = this.attr ( "height"), imW=this.attr("width"); IMW = this.attr ( "width"); this.wrap(' this.wrap ( ' '); '); this.css("position","absolute"); this.css ( "stanowisko", "absolutne"); $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + "stały"). append ( ' '); '); var var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft LBG =($('. '+ this.attr ( "className")). attr ( "clientWidth')-this.attr ( 'width')) / 2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG "+ this.attr (" className ")). attr (" clientHeight ')-this.attr (' height ')) / 2; function getrand() { getrand function () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); return nr==0?-1:1; nr powrót == 0? -1:1; } ) function randimate(obj) { randimate function (obj) ( var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); var pH = Math.floor (IMH * 20/100), pw = Math.floor (IMW * 20/100); newLeft=$(".lbg"+obj.attr("className")).attr("offsetLeft")+Math.floor(Math.random()*pw)*getrand(); newLeft LBG =$(". "+ obj.attr (" className ")). attr (" offsetLeft ") + Math.floor (Math.random () * pw) * getrand (); newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); newTop =$(". LBG "+ obj.attr (" className ")). attr (" offsetTop ") + Math.floor (Math.random () * ph) * getrand (); if(newLeft>0) newLeft=0; if (newLeft> 0) newLeft = 0; else if(newLeft<-maxLeft) newLeft=-maxLeft+1; if(newTop>0) newTop=0; if (newLeft <-maxLeft) newLeft =- maxLeft +1; if (newTop> 0) newTop = 0; else if(newTop<-maxTop) if (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 "+ obj.attr (" className ")). animacji ((left: newLeft +" px ", top: newTop +" px "), defaults.duration" liniowy ", function () (randimate (obj );)); } ) return this.each(function(){ this.each return (function () ( randimate($(this)); randimate ($ (this)); }); )); }; ); })(jQuery); )) (jQuery);
The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Powyższy kod działa jako plugin jQuery, więc powinno być zawarte na stronie, po włączeniu jQuery. In order to animate an image, you should use this code: W celu pobudzania obraz, należy użyć tego kodu:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector "). ożywić ((bgImage:". / path_to_background_image.png ", czas trwania: 1000)); / / okres to czas jednego tle animacji czasu Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Here's crazy Przykład 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 Oto kolejny przykład braku crazy 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 Jeśli podoba Ci się pomysł i chcesz więcej funkcji, wyślij mi wiersz komentarz i postaram się poprawić kod i dodać więcej funkcji 
Related posts: Podobne posty:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Co zrobić, jeśli jQuery animacji nie ognia / start?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Jak zdobyć indeks (pozycja w grupie) obiektu z jQuery?
- JavaScript: Get anchor from URL JavaScript: Get kotwicę z adresu URL
- Javascript: How to validate email address with JavaScript? Javascript: Jak potwierdzić adres e-mail z JavaScript?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Wyślij funkcji jako parametr do innej funkcji (callback)
