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 / Design / JavaScript & Ajax / JavaScript: GIFless animatio ...

JavaScript: GIFless animation. JavaScript: GIFless animation. Animate images,logos with jQuery Magpasaya mga imahe, mga logo na may jQuery

Posted on 23. Posted on 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Hulyo, 2009 sa pamamagitan ng Dragos sa 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). Pagkatapos ng play ng ilang oras sa posisyon ng kamag-anak at mapag-aalinlanganan, ako napansin ng isa sa isang malaking aspeto ng png format ng image (marahil gif imahen ay din mabuti, ngunit dahil tayo ay nagsisikap upang lumikha ng isang GIFless animation, hindi ako gagamit ng anumang gif imahen sa ito tutorial).

So here's aa PNG (transparent text), with the name of this website: Kaya narito aa PNG (transparent na teksto), kasama ang pangalan ng website na ito:

Transparent Logo

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Ang kahanga-hangang gawa ng animating mga imahe, nang walang kailangan ng paggamit ng GIF imahen na mga tampok na format, ay ang mga sumusunod:

We have an image with transparent text written on it. Mayroon kaming isang imahe na may transparent na teksto na isinulat sa mga ito. 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”. Upang magpasaya ng mga transparent na teksto, kailangan naming lagyan ng background image sa ibaba ang aktwal na imahen at ilipat ito background image, upang gumawa ng sa gayon tinatawag na "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). Upang maging mas tiyak, ang imahe na gusto namin ay mga animated ay dapat magkaroon ng isang mas mataas z-index kaysa sa background imahe sa ibaba ito (ito ay katulad ng trabaho na may layers sa Photoshop). In order to animate the background image we need some javascript work to be done. Upang magpasaya sa background image na kailangan namin ng ilang javascript trabaho ay tapos na. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Of course, bilang isang malaking tagahanga ng jQuery, ako nakagamit jQuery na gawin ang lahat ng mga bagay-bagay animation.

Here's the script I've come up with: Narito ang script ko na magkaroon ng: 

(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 (options) (var default = (bgImage:'', duration: 3000); var mga opsyon = $. palawigin (default, mga pagpipilian); var imH = this.attr ( "taas"), imW = this.attr ( "lapad"); this.wrap ( ''); this.css ( "posisyon", "absolute"); $('#'+ this.attr ( "className" ) + 'Cont'). ikakabit ( ''); var maxLeft =($('. lbg '+ this.attr ( "className")). attr (' clientWidth ')-this.attr (' lapad ')) / 2, maxTop =($('. lbg '+ this.attr ( "className")). attr (' clientHeight ')-this.attr (' taas ')) / 2; function getrand () (var nr = Math.floor (Math.random () * 2); bumalik 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 (); kung (newLeft> 0) newLeft = 0; kung sino pa ang paririto (newLeft <-maxLeft) newLeft =- maxLeft +1 kung (newTop> 0) newTop = 0; kung sino pa ang paririto (newTop <-maxTop) newTop =- maxTop +1; $ ( '. lbg' + obj.attr ( "className")). magpasaya ((kaliwa: newLeft + "px", itaas: newTop + "px"), defaults.duration, "guhit", function () (randimate (obj);));) bumalik this.each (function () (randimate ($ (ito));)););)) (jQuery);

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Ang code sa itaas na mga gawa bilang isang plugin ng jQuery, kaya ito ay dapat kasama sa pahina ng, matapos ang pagsasama ng jQuery. In order to animate an image, you should use this code: Upang magpasaya ng isang imahe, dapat mong gamitin ang code na ito: 

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). magpasaya ((bgImage: ". / path_to_background_image.png", duration: 1000)); / / tagal na ang oras ng isang animation oras background

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Narito ang isang halimbawa mabaliw 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 Narito ang isa pang di-loko Halimbawa 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 Kung gusto ninyo ang ideya at gusto mas maraming mga tampok, drop ako ng isang linya sa isang comment at kukunin ko na subukan upang mapabuti ang code at magdagdag ng mas maraming mga tampok ;)

Translate this post Isalin ang post na ito





Related posts: Related posts:

  1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Paano kung jQuery animation ay hindi sunog / simulan?
  2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Paano upang makuha ang index (na posisyon sa loob ng isang grupo) ng isang bagay na may jQuery?
  3. JavaScript: Get anchor from URL JavaScript: Kumuha ng mga anchor mula sa URL
  4. Javascript: How to validate email address with JavaScript? Javascript: Paano upang mapatunayan ang email address sa JavaScript?
  5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Ipadala ang function bilang isang parameter sa isa pang function (callbacks)

    blog comments powered by Disqus blog comments powered by Disqus