JavaScript: GIFless animation. जावास्क्रिप्ट: GIFless एनीमेशन. Animate images,logos with jQuery सजीव चित्र, jQuery के साथ लोगो

Posted on 23. 23 पर तैनात हैं. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax जुलाई, 2009 कोडिंग, डिजाइन, जावास्क्रिप्ट और Ajax में Dragos द्वारा

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:

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 सूचकांक चाहिए एनिमेटेड होना चाहते हैं (यह फ़ोटोशॉप में परतों के साथ काम करना पसंद है) है. 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) { 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 = $. (चूक, विकल्प); var imH = this.attr विस्तार ( "ऊँचाई"), imW = this.attr ( "चौड़ाई"); this.wrap '('); this.css (स्थिति "", "" पूर्ण); $('#'+ (className "this.attr" '+ Cont') संलग्न. ( ''); var maxLeft =($('. lbg '+ ( "className")) this.attr).' (clientWidth 'attr) this.attr' ( 'चौड़ाई)) 2 /, maxTop =($('. lbg '+ ( "className")) this.attr. attr' (clientHeight ') this.attr' ( 'ऊंचाई)) / 2; समारोह getrand () (var एन.आर. = Math.floor Math.random (() * 2); वापस एन.आर. ==? 0 -1:1;) randimate obj (कार्य) (var पीएच (= imH * 20/100) Math.floor, पीडब्लू Math.floor = (imW * 20/100); newLeft =$(". lbg "+ (" className ")) obj.attr. attr (" offsetLeft ") + Math.floor Math.random (() पीडब्लू *) getrand (*) ; newTop =$(". lbg "+ (" className ")) obj.attr. attr (" offsetTop ") + Math.floor Math.random (() पीएच *) getrand (*); यदि (newLeft> 0) newLeft = 0; और यदि newLeft (<-maxLeft newLeft) =- 1 maxLeft, अगर (newTop> 0 = 0 newTop); और यदि newTop (<-maxTop newTop) =- maxTop 1 $; '(. lbg + ( "className")) obj.attr. चेतन ((छोड़ दिया: newLeft + "px", Top: newTop + "px"), defaults.duration "," रेखीय, समारोह () (randimate (obj);));) वापस this.each समारोह (() (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 यदि आपको इस विचार की तरह और अधिक सुविधाएँ चाहते हैं, मुझे एक टिप्पणी में एक पंक्ति ड्रॉप और मैं कोड में सुधार लाने और अधिक सुविधाएँ जोड़ने की कोशिश करेंगे

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: How to validate email address with JavaScript? : जावास्क्रिप्ट कैसे जावास्क्रिप्ट के साथ ईमेल पते की पुष्टि के लिए?
4. JavaScript: Get anchor from URL जावास्क्रिप्ट: URL से लंगर जाओ
5. JavaScript: Send function as a parameter to another function (callbacks) जावास्क्रिप्ट: एक और समारोह callbacks (एक पैरामीटर के रूप में कार्य भेजें)