JavaScript: GIFless animation. جافا سكريبت : GIFless للرسوم المتحركة. Animate images,logos with jQuery تحريك الصور والشعارات مع jQuery

Posted on 23. نشر في 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax يوليو ، 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). بعد ان لعب لبعض الوقت مع الموقف النسبي والمطلق ، لقد لاحظت واحدة جانبا كبيرا من بابوا نيو غينيا شكل صورة (صور gif ربما هي أيضا جيدة ، ولكن بما أننا نحاول خلق GIFless الرسوم المتحركة ، وأنا لن استخدم أي الصور gif في هذا الدرس).

So here's aa PNG (transparent text), with the name of this website: حتى هنا أأ بابوا غينيا الجديدة (نص شفاف) ، مع اسم هذا الموقع :

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). لنكون أكثر دقة ، لأننا نريد أن الصورة يمكن أن تكون متحركة وينبغي أن يكون ارتفاع مؤشر ض من صورة الخلفية تحته (انها مثل العمل مع الطبقات في فوتوشوب). 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 = { الافتراضات فار = ( 
                     bgImage: '', bgImage : ''، 
                     duration:3000 المدة : 3000 
                 }; ) ؛ 
                 var options = $.extend(defaults, options); خيارات فار = $. تمديد (الافتراضات ، وخيارات) ؛ 
                 var imH=this.attr("height"), 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(' $('#'+ this.attr ( "className") + 'استمرار'). إلحاق ( ' 

 '); ') ؛ 
                 var فار 
                 maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. lbg '+ this.attr (" className ")). attr (' clientWidth ') ، this.attr (' عرض ')) / 2 ، 
                 maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. lbg '+ this.attr (" className ")). attr (' clientHeight ') ، this.attr (' ارتفاع ')) / 2 ؛ 
                 function getrand() { getrand الدالة () ( 
                     var nr=Math.floor(Math.random()*2); العدد فار = Math.floor (Math.random () * 2) ؛ 
                     return nr==0?-1:1; عودة العدد == 0؟ -1:1 ؛ 
                 } ) 
                 function randimate(obj) { وظيفة randimate (الكائنات) ( 
                     var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); التليفون فار = Math.floor (imH * 20/100) ، الأسبق = 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 () * الأسبق) * 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 () * التليفون) * getrand () ؛ 
                     if(newLeft>0) newLeft=0; إذا كان (newLeft> 0) newLeft = 0 ؛ 
                     else if(newLeft<-maxLeft)                         newLeft=-maxLeft+1;                     if(newTop>0) newTop=0; والا اذا (newLeft <- maxLeft) newLeft =- maxLeft +1 ؛ إذا (newTop> 0) newTop = 0 ؛ 
                     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' + obj.attr ( "className")). يديروا ((يسار : newLeft + "مقصف" ، أعلى : newTop + "مقصف") ، defaults.duration "الخطية" ، وظيفة () (randimate (الكائنات ) ؛)) ؛ 
                 } ) 
                 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: الوظائف ذات الصلة :

1. JavaScript: What if jQuery animation doesn't fire/start? جافا سكريبت : ماذا لو الرسوم المتحركة jQuery لا النار / تبدأ؟
2. JavaScript: How to get the index (position within a group) of an object with jQuery? جافا سكريبت : كيفية الحصول على مؤشر (الموقف داخل مجموعة) للجسم مع jQuery؟
3. JavaScript: Get anchor from URL جافا سكريبت : احصل على مرساة من رابط
4. Javascript: How to validate email address with JavaScript? جافا سكريبت : كيفية التحقق من صحة عنوان البريد الإلكتروني مع جافا سكريبت؟
5. JavaScript: Send function as a parameter to another function (callbacks) جافا سكريبت : إرسال الدالة كمعلمة إلى وظيفة أخرى (رد)