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 & 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). После играл некоторое время с позиции относительной и абсолютной, я заметил одну большую аспектом формат изображений PNG (вероятно, рисунок изображения также являются хорошими, но так как мы пытаемся создать GIFless анимация, я не буду использовать любой рисунок изображения В этом уроке).
So here's aa PNG (transparent text), with the name of this website: Так вот А. PNG (прозрачный текст), с именем этого сайта:
Transparent Logo Прозрачные 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). Чтобы быть более точным, то изображение мы хотим быть анимированными должны иметь высшее Z-индекса, чем фоновые изображения ниже его (это нравится работать со слоями в 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) { $. fn.enliven = функция (варианты) ( var defaults = { VAR по умолчанию = ( bgImage: '', bgImage:'', duration:3000 Продолжительность: 3000 }; ); var options = $.extend(defaults, options); VAR параметры = $. продлить (по умолчанию, опционы); var imH=this.attr("height"), VAR = ПМХ 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") + 'Продолжение'). Append ( ' '); '); var 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); VAR NR = Math.floor (Math.random () * 2); return nr==0?-1:1; возвращение Nr == 0? -1:1; } ) function randimate(obj) { Функция randimate (ЦП) ( var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); VAR рН = Math.floor (ПМХ * 20/100), PW = Math.floor (МКМ * 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 () * PW) * 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 () * PH) * getrand (); if(newLeft>0) newLeft=0; если (newLeft> 0) newLeft = 0; else if(newLeft<-maxLeft) newLeft=-maxLeft+1; if(newTop>0) newTop=0; Else If (newLeft <-maxLeft) newLeft =- maxLeft 1, если (newTop> 0) newTop = 0; else if(newTop<-maxTop) Else If (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")). Animate ((слева: newLeft + "ПВ", вверху: newTop + "PX"), 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 Вот Crazy Пример 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 Вот еще один не-Crazy Пример 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: Похожие сообщения:
- 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: Get anchor from URL JavaScript: Получить якорь, с URL
- Javascript: How to validate email address with JavaScript? JavaScript: Как проверить адрес электронной почты с JavaScript?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Отправить функцию в качестве параметра в другую функцию (функции обратного вызова)
