This is a translated page. The original can be found here: http://iwebdevel.com/2009/07/23/javascript-gifless-animation-animate-imageslogos-with-jquery/
UPDATES VIA RSS | Email UPDATES VIA RSS | Email Get updates via feedburner Get updates via twitter
Home / Coding / Design / JavaScript & Ajax / JavaScript: GIFless animatio… Home / Coding / Desain / Javascript & Ajax / JavaScript: GIFless animatio ...

JavaScript: GIFless animation. JavaScript: GIFless animasi. Animate images,logos with jQuery Bernyawa gambar, logo dengan jQuery

Posted on 23. Dikirim di 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Jul, 2009 oleh Dragos di Coding, Design, JavaScript & 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). Setelah bermain beberapa kali dengan posisi relatif dan mutlak, saya telah memperhatikan salah satu aspek yang besar dari format gambar png (gambar gif mungkin juga baik, tapi karena kami mencoba untuk membuat animasi GIFless, aku tidak akan menggunakan gambar gif dalam tutorial ini).

So here's aa PNG (transparent text), with the name of this website: So here's aa PNG (transparan teks), dengan nama website ini:

Transparent Logo

Transparent Logo Transparan Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Trik dari menghidupkan gambar, tanpa perlu menggunakan fitur format gambar GIF, adalah sebagai berikut:

We have an image with transparent text written on it. Kami memiliki sebuah gambar dengan teks transparan tertulis di atasnya. 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”. Untuk menghidupkan teks yang transparan, kita perlu menempatkan gambar latar belakang gambar di bawah ini yang sebenarnya dan memindahkan gambar latar belakang ini, dalam rangka menciptakan yang disebut "animasi". 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). Untuk lebih tepatnya, gambar kita ingin menjadi animasi harus memiliki z-index yang lebih tinggi daripada latar belakang gambar di bawah ini (ini seperti bekerja dengan layer di Photoshop). In order to animate the background image we need some javascript work to be done. Dalam rangka menyemarakkan gambar latar belakang kita perlu beberapa javascript pekerjaan yang harus dilakukan. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Tentu saja, sebagai penggemar berat jQuery, saya telah menggunakan jQuery untuk melakukan semua hal animasi.

Here's the script I've come up with: Berikut script saya datang dengan: 

(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); (function ($) ($. fn.enliven = function (pilihan) (var defaults = (bgImage:'', durasi: 3000); var options = $. memperpanjang (default, pilihan); var imH = this.attr ( "height"), imW = this.attr ( "width"); this.wrap ( ''); this.css ( "posisi", "mutlak"); $('#'+ 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; fungsi getrand () (var nr = Math.floor (Math.random () * 2); return nr == 0? -1:1;) function randimate (obj) (var id = 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")). bernyawa ((left: newLeft + "px", top: newTop + "px"), defaults.duration, "linear", function () (randimate (obj);));) kembali this.each (function () (randimate ($ (this));)););)) (jQuery);

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Kode di atas berfungsi sebagai plugin dari jQuery, sehingga harus dimasukkan dalam halaman, setelah masuknya jQuery. In order to animate an image, you should use this code: Dalam rangka menghidupkan gambar, anda harus menggunakan kode ini: 

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). meramaikan ((bgImage: ". / path_to_background_image.png", durasi: 1000)); / / Durasi adalah waktu waktu satu latar belakang animasi

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Berikut adalah contoh gila 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 Here's another non-gila contoh 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 Jika Anda menyukai gagasan dan menginginkan lebih banyak fitur, drop me a line dalam komentar dan aku akan mencoba untuk meningkatkan kode dan menambahkan lebih banyak fitur ;)

Translate this post Terjemahkan posting ini





Related posts: Related posts:

  1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Bagaimana jika tidak animasi jQuery api / start?
  2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Cara mendapatkan indeks (posisi dalam grup) dari sebuah objek dengan jQuery?
  3. JavaScript: Get anchor from URL JavaScript: Dapatkan jangkar dari URL
  4. Javascript: How to validate email address with JavaScript? Javascript: Bagaimana untuk memvalidasi alamat email dengan JavaScript?
  5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Kirim fungsi sebagai parameter ke fungsi lain (callback)

    blog comments powered by Disqus blog comments powered by DISQUS