Слайдшоу с эффектом всплывающих пузырьков
В данном уроке мы построим пузырьковый эффект анимации с использованием 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
|
В данном уроке мы построим пузырьковый эффект анимации с использованием jQuery для слайдшоу. Это отличный метод оживления презентации изображений. В результате урока получится полностью модульный код |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.