Слайдшоу с эффектом всплывающих пузырьков

В данном уроке мы построим пузырьковый эффект анимации с использованием jQuery для слайдшоу. Это отличный метод оживления презентации изображений. В результате урока получится полностью модульный код, который легко использовать в своих проектах и модифицировать.

 

HTML

Эффект слайдшоу, который мы сегодня создадим, будет простым в использовании плагином jQuery. Так как основная часть будет выполняться внутри плагина, то раздел HTML кода совсем простой. Но для использования плагина потребуется добавить неупорядоченный список на страницу. Отдельные слайды будут добавляться как элементы LI.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Пузырьковый эффект для слайдшоу с использованием jQuery | Материалы проекта RUSELLER.COM</title>
        
        <!-- Наш файл CSS -->
        <link rel="stylesheet" href="/assets/css/styles.css" />
        
        <!-- Стили плагина -->
        <link rel="stylesheet" href="/assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>
		
        <!-- Контейнер для слайдшоу -->
		<ul id="slideShow"></ul>

        <footer>
	        <h2>Эффект пузырьков в слайдшоу с использованием jQuery</h2>
        </footer>
        
        <p class="credit"> Автор фотографий:<a href="http://www.flickr.com/photos/zanthia/" target="_blank">Zanthia</a><br />
        	<i>
                <a href="http://www.flickr.com/photos/zanthia/5713923079/">Senja</a>
                <a href="http://www.flickr.com/photos/zanthia/5542165153/">Nusfjord</a>
                <a href="http://www.flickr.com/photos/zanthia/5822520546/">a walk at midnight</a>
                <a href="http://www.flickr.com/photos/zanthia/4341260799/">geothermal factory</a><br />
                <a href="http://www.flickr.com/photos/zanthia/5047301420/">Monte Rosa Massif</a>
                <a href="http://www.flickr.com/photos/zanthia/4305139726/">green iceland</a>
            </i>
        </p>
        
        <!-- JavaScript -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="/assets/jquery.bubbleSlideshow/bgpos.js"></script>
        <script src="/assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.js"></script>
        <script src="/assets/js/script.js"></script>
    
    </body>
</html>

Для использования плагина нужно включить файл jquery.bubbleSlideshow.css в раздел заголовка, а файлы bgpos.js и jquery.bubbleSlideshow.js перед закрывающим тегом body. Файл bgpos.js содержит плагин jQuery CSShooks, который позволяет анимировать свойство background-position (необходимо для анимации). Файл jquery.bubbleSlideshow.js содержит код нашего урока. Также нужно включить библиотеку jQuery.

На рисунке представлено объяснение пузырькового эффекта.

 

JavaScript и jQuery

Сначала создадим класс JavaScript с именем Bubble. Каждый пузырек в слайдшоу будет объектом данного класса. Он будет иметь свойства top и left (смещение позиционирования), size (диаметр круга) и elem, которое будет объектом jQuery, содержащим действительный элемент div. Данное свойство будет использоваться в методе flyFrom() для анимации перемещение пузырька.

jquery.bubbleSlideshow.js

	// Класс Bubble. Он содержит координаты смещения вверх и влево,
	// размер (диаметр) и адрес URL изображения
	
	function Bubble( left, top, size, imgURL ){

		this.top	= top;
		this.left	= left;
		this.size	= size;
		
		top -= size/2;
		left-= size/2;
		
		this.elem = $('<div>',{
			'class':'bubble',
			'css'	: {
				'width'		: size,
				'height'	: size,
				'top'		: top,
				'left'		: left,
				'background-position': (-left)+'px '+(-top)+'px',
				'background-image': 'url('+imgURL+')'
			}
		});
	
	}
	
	// Метод flyFrom получает начальную позицию, время и возвратную функцию,
	// которая выполняется по завершению анимации
	
	Bubble.prototype.flyFrom = function( startX, startY, time, callBack ){
	
		time = time || 250;
		callBack = callBack || function(){};
		
		startX -= this.size/2;
		startY -= this.size/2;
		
		// Смещение элемента
		
		this.elem.css({
			'display'				: 'block',
			'backgroundPositionX'	: -startX,
			'backgroundPositionY'	: -startY,
			'left'					: startX,
			'top'					: startY
		});
		
		// Анимируем его перемещение на свое место
		
		this.elem.animate({
			'backgroundPositionX'	: -this.left,
			'backgroundPositionY'	: -this.top,
			'left'					: this.left,
			'top'					: this.top
		}, time, 'easeOutCirc', callBack );
	
	};
	
	// Вспомогательная функция для генерации случайного числа 
	// в диапазоне [min,max]
	
	function rand( min, max ){
		return Math.floor( Math.random()*((max+1)-min) + min);
	}

 

Метод flyFrom() получает набор координат, которые определяют стартовую позицию пузырька. Конечная позиция определяется при создании пузырька. Данный метод определяется как прототип функции Bubble, что автоматически делает его доступным для всех реализаций класса. Это очень эффективный подход, так как в одно время существует только одна копия данного метода вместо того, чтобы иметь копию метода для каждого объекта. Обратите внимание на функцию rand(). Она имитирует функцию PHP с таким же именем и используется в нашем плагине.

Теперь, когда у нас есть класс, напишем функцию, которая создает массив объектов пузырьков, добавляет их в качестве новых элементов LI и анимирует их. Функция будет получать три параметра:

  • stage, который является объектом jQuery и содержит элемент UL. Данный элемент содержит, так как каждый слайд будет отдельным элементом LI;
  • imgURL является адресом URL изображения, которое выводится в пузырьках;
  • func является возвратной функцией, которая вызывается по завершению анимации всех пузырьков. Таким образом переключаются слайды и удаляются пузырьки, так как они не нужны после завершения смены слайдов;

Для каждой смены слайдов создается новый, случайный набор пузырьков, который удаляется после того, как новый слайд становится видимым.

jquery.bubbleSlideshow.js

	function showBubbles( stage, imgURL, func ){

		// Данная функция добавляет новый элемент LI к UL
		// и использует его для размещения и анимации пузырька.

		var i = 0,
			bubbles = [],
			totalBubbles = 75,
			stageWidth = stage.outerWidth(),
			stageHeight = stage.outerHeight(),
			emptyFunc = function(){};
		
		// Данный li содержит пузырьки
		var li = $('<li class="bubbleStage">').appendTo(stage);

		// Данная функция передается при вызове метода flyFrom:
		
		var callBack = function(){
			
			// Ожидаем функции func для
			// завершения и удаления li.
			
			$.when(func()).then(function(){
				li.remove();
			});
		};
		
		for( i=0; i<totalBubbles; i++ ){
			
			var x	 = rand(0, stageWidth),
				y	 = rand(0,stageHeight),
				size = rand(30,150);
			
			var bubble = new Bubble( x, y, size, imgURL );
			li.append(bubble.elem);
			
			bubbles.push(bubble);
		}
		
		// Сортируем пузырьки так, чтобы те, 
		// которые находятся ближе к верхней границе изображения
		// выходили первыми:
		
		bubbles = bubbles.sort(function( b1, b2 ){
			return b1.top+b1.size/2 > b2.top+b2.size/2;
		});
		
		// Проходим по всем пузырькам и 
		// запускаем их методы flyFrom
		
		for( i=0; i<bubbles.length; i++){
			
			(function( bubble, i ){
				setTimeout(function(){
					
					bubble.flyFrom(
						stageWidth/2,
						stageHeight+200,
						250,
						(i == bubbles.length-1) ? callBack : emptyFunc
					);
					
				}, Math.floor(i/5)*100);
				
			})( bubbles[i], i );
		}
	}

Теперь у нас есть функция, которая создает набор пузырьков в новом элементе LI и анимирует их. Но это еще не плагин. У нас все еще отсутствуют слайды. Напишем недостающую функциию:

jquery.bubbleSlideshow.js

	// Определяем плагин bubbleSlideshow
	
	$.fn.bubbleSlideshow = function(photos){
	
		if(!$.isArray(photos)){
			throw new Error("Нужно передать массив адресов URL фотографий в качестве параметра!");
		}
		
		photos = photos.reverse();
		
		var ul = this.addClass('bubbleSlideshow');
		
		$.each(photos,function(){
			ul.append('<li class="bubbleImageFrame"><img src="'+this+'" /></li>');
		});
		
		// Данные методы доступны снаружи
		// и могут быть использованы для управления слайдшоу
		
		ul.showNext = function(){
			showNext(ul);
		};
		
		ul.showPrev = function(){
			showPrev(ul);
		};

		ul.autoAdvance = function(timeout){
			timeout = timeout || 6000;
			autoAdvance(ul,timeout);
		};

		ul.stopAutoAdvance = function(){
			stopAutoAdvance(ul);
		};

		return ul;
	};

Данный код определяет новый плагин с названием  bubbleSlideshow(). Его следует вызывать для элемента UL, и он получает массив адресов URL фотографий в качестве параметра. Фотографии будут добавлены в элемент UL.

Плагин создает новый элемент LI для каждой фотографии в массиве, добавляет методы showNext, showPrev, autoAdvance и stopAutoAdvance для элемента UL. Это обертки локальных функций, код которых представлен ниже:

jquery.bubbleSlideshow.js

	// Данные  функции не доступны вне плагина. 
	// Параметр stage соответствует элементу UL, который содержит слайдшоу.
	
	function autoAdvance(stage,timeout){
		stage.data('timeout',setTimeout(function(){
			showNext(stage);
			autoAdvance(stage,timeout);
		},timeout));
	}
	
	function stopAutoAdvance(stage){
		clearTimeout(stage.data('timeout'));
	}
	
	function showNext(stage){
		showFrame(stage, stage.find('li.bubbleImageFrame').first());
	}
	
	function showPrev(stage){
		showFrame(stage, stage.find('li.bubbleImageFrame').last().prev());
	}
	
	function showFrame(stage, frame ){
		
		// Данная функция выводит кадр,
		// передаваемый как объект  jQuery
		
		if(stage.data('working')){
			// Предотвращаем запуск больше одной анимации
			// в одно и тоже время:
			return false;
		}
		stage.data('working',true);
		
		var frame = frame.hide().detach();
		
		// Используем функцию showBubbles.
		// Кадр выводится после завершения анимации пузырьков.
		
		showBubbles( stage, frame.find('img').attr('src'), function(){
			stage.append(frame);
			stage.data('working',false);
			
			// Возвращаем объект jQuery.
			return frame.fadeIn('slow');
		});
		
	}

Термин “локальные” используется для данных функций потому, что они не доступны вне плагина. Функции showNext и showPrev вызывают одну функцию showFrame, передавая ей UL и слайд LI, который надо вывести. Функция showFrame проверяет выполнение только одной анимации в данный момент времени и вызывает функцию showBubbles, которая была описана выше.

Возвратная функция, которая передается при вызове метода, выводит слайд, который надо показывать поверх всех остальных, добавляя его последним в элемент UL (слайды позиционированы абсолютно и последний в списке будет выводиться сверху). Данная функция вызывается после завершения анимации.

А вот как надо инициализировать слайдшоу:

script.js

$(function(){
	var photos = [
		'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
		'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
		'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
		'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
		'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
		'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
	];
	
	var slideshow = $('#slideShow').bubbleSlideshow(photos);

	$(window).load(function(){
		slideshow.autoAdvance(5000);
	});
	
	// Другие методы плагина:
	
	// slideshow.showNext();
	// slideshow.showPrev();
	// slideshow.stopAutoAdvance();
});

 

CSS

Остается только определить несколько правил CSS:

jquery.bubbleSlideshow.css

ul.bubbleSlideshow{
	position:relative;
	list-style:none;
	overflow:hidden;
}

.bubbleSlideshow li{
	position:absolute;
	top:0;
	left:0;
}

.bubbleSlideshow li img{
	display:block;
}

.bubbleSlideshow li div.bubble{
	-moz-border-radius:50%;
	-webkit-border-raidus:50%;
	border-radius:50%;
	
	background-repeat:no-repeat;
	display:none;
	position:absolute;
}

 

Готово!

Использование данного эффекта не ограничивается только слайдшоу. Можно создавать уникальные фоны для страниц, заголовков и презентаций. Плагин автоматически изменяет размер для заполнения элемента UL, поэтому вы можете настроить его, изменив несколько свойств CSS.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/cBWsLytlNsU/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Слайдшоу с эффектом всплывающих пузырьков | | 2012-06-19 12:03:18 | | Статьи Web-мастеру | | В данном уроке мы построим пузырьковый эффект анимации с использованием jQuery для слайдшоу. Это отличный метод оживления презентации изображений. В результате урока получится полностью модульный код | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: