JavaScript: GIFless animation. JavaScript: אנימציה GIFless. Animate images,logos with jQuery הנפשת תמונות, לוגו עם jQuery
Posted on 23. פורסם ב 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax יולי, 2009 על ידי Dragos ב וקידוד, עיצוב, JavaScript & אייאקס
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). אחרי כמה זמן לשחק עם מיקום יחסי ומוחלט, שמתי לב היבט אחד גדול של פורמט התמונה PNG (GIF תמונות כנראה גם טוב, אבל מאז אנחנו מנסים ליצור אנימציה GIFless, אני לא כל שימוש בתמונות GIF במדריך זה).
So here's aa PNG (transparent text), with the name of this website: אז הנה PNG AA (טקסט שקוף), עם השם של האתר הזה:
Transparent Logo לוגו שקופים
The trick of animating images, without the need of using the GIF image format features, are as follow: הטריק של Animating תמונות, ללא צורך להשתמש בתכונות של פורמט 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-index יותר תמונת הרקע מתחתיה (זה כמו לעבוד עם שכבות ב Photoshop). In order to animate the background image we need some javascript work to be done. על מנת להנפיש את תמונת הרקע אנחנו צריכים לעבוד קצת JavaScript להיעשות. 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) { var defaults = { bgImage: '', duration:3000 }; var options = $.extend(defaults, options); var imH=this.attr("height"), imW=this.attr("width"); this.wrap(' '); this.css("position","absolute"); $('#'+this.attr("className")+'Cont').append(' '); var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; function getrand() { var nr=Math.floor(Math.random()*2); return nr==0?-1:1; } function randimate(obj) { 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(); newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); if(newLeft>0) newLeft=0; else if(newLeft<-maxLeft) newLeft=-maxLeft+1; if(newTop>0) newTop=0; else if(newTop<-maxTop) newTop=-maxTop+1; $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); } return this.each(function(){ randimate($(this)); }); }; })(jQuery); ברירת המחדל (פונקציה ($) ($. fn.enliven = פונקציה (נוספות) = ((var bgImage:'', משך: 3000); אפשרויות var = $. להאריך (ברירת המחדל, אפשרויות); imH var = this.attr ( "גובה"), אגודת "לדעת" = this.attr ( "רוחב"); this.wrap ( ''); this.css ( "העמדה", "מוחלט"); $('#'+ this.attr ( "className" ) + 'המשך'). append ( ''); maxLeft var =($('. LBG '+ this.attr ( "className")). attr (' clientWidth ')-this.attr (' width ')) / 2, maxTop =($('. LBG '+ this.attr ( "className")). attr (' clientHeight ')-this.attr ( "גובה")) / 2; getrand function () (var nr = Math.floor (Math.random () * 2); Nr לחזור == 0? -1:1;) פונקציה randimate (obj) (var pH = Math.floor (imH * 20/100), pw = Math.floor (אגודת "לדעת" * 20/100); newLeft =$(". LBG "+ obj.attr (" className ")). attr (" offsetLeft ") + Math.floor (Math.random () * pw) * getrand () ; LBG newTop =$(". "+ obj.attr (" className ")). attr (" offsetTop ") + Math.floor (Math.random () * pH) * getrand (); אם (newLeft> 0) newLeft = 0; אחר אם (newLeft <-maxLeft) newLeft =- maxLeft 1; אם (newTop> 0) newTop = 0; אחר אם (newTop <-) maxTop newTop =- maxTop 1; $ ( '. LBG' + obj.attr ( "className")). להנפיש ((שמאל: newLeft + "px", הדף: newTop + "px"), defaults.duration, "ליניארית", function () (randimate (obj);));) this.each לחזור (function () (randimate ($ (הזה));));))) (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 אם אתה אוהב את הרעיון ואת רוצה יותר תכונות, Drop me a line בהערה ואני אנסה לשפר את הקוד ולהוסיף תכונות יותר 
Related posts: הודעות קשורות:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: מה אם האנימציה jQuery לא אש / להתחיל?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: כיצד לקבל את האינדקס (עמדת בתוך קבוצה) של אובייקט עם jQuery?
- Javascript: How to validate email address with JavaScript? Javascript: כיצד לאמת את כתובת הדוא"ל עם JavaScript?
- JavaScript: Get anchor from URL JavaScript: קבל עוגן מתוך כתובת
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: שלח פונקציה כפרמטר לפונקציה אחרת (callbacks)
