Простая контент-галерея с использованием jQuery и CSS3

9 января 2014 | Опубликовано в css | 3 Комментариев »

В этом уроке мы будем создавать автоматически меняющуюся контент-галерею, используя jQuery и CSS3. Основная задача — изменить фоновое изображение и плавно изменить заголовок и описание. При нажатии на элемент меню функция автоматического изменения останавливается, и выезжают соответствующие материалы.

Демонстрация работы – Скачать исходный код

Итак, давайте начнем с разметки.

Разметка

Наш html состоит из основного блока, названного ротатором, и ненумерованного списка, в котором мы определим элементы меню, заглавия и описания. Адрес ссылки определит соответствующий материал, который принадлежит этому элементу меню. Вот разметка с двумя примерами элементов списка и пустым элементом списка, который мы будем использовать, чтобы наполнить содержимое:

<div>

<ul id="rotmenu">

<li>

<a href="rot1">Portfolio</a>

<div style="display:none;">

<div>1.jpg</div>

<div>Our Works</div>

<div>

At vero eos et accusamus et iusto odio

dignissimos ducimus qui blanditiis praesentium

voluptatum deleniti atque corrupti quos dolores et

quas molestias excepturi sint occaecati cupiditate

non provident...

<a href="#">Read more</a>

</div>

</div>

</li>

<li>

<a href="rot2">Services</a>

<div style="display:none;">

<div>2.jpg</div>

<div>We serve</div>

<div>

At vero eos et accusamus et iusto odio

dignissimos ducimus qui blanditiis praesentium

voluptatum deleniti atque corrupti quos dolores et

quas molestias excepturi sint occaecati cupiditate

non provident...

<a href="#">Read more</a>

</div>

</div>

</li>

...

</ul>

<div id="rot1">

<img src="" width="800" height="300" alt=""/>

<div>

<h1></h1>

</div>

<div>

<p></p>

</div>

</div>
</div>

Мы используем информацию внутри элементов с классами, начинающимися с «info_», чтобы заполнить нашу пустую структуру. У фонового изображения будет источник и название.

CSS

У основного блока, названного ротатором, будут такие стили:

.rotator{

background-color:#222;

width:800px;

height:300px;

margin:0px auto;

position:relative;

font-family:'Myriad Pro',Arial,Helvetica,sans-serif;

color:#fff;

text-transform:uppercase;

letter-spacing:-1px;

border:3px solid #f0f0f0;

overflow:hidden;

-moz-box-shadow:0px 0px 10px #222;

-webkit-box-shadow:0px 0px 10px #222;

box-shadow:0px 0px 10px #222;
}

Так как мы установим внутренним элементам абсолютное позиционирование, нам нужно установить основному блоку относительное позиционирование. Стили изображения, которые мы вставим с помощью jQuery, будут, например, такими:

img.bg{

position:absolute;

top:0px;

left:0px;
}

Ненумерованному списку со всеми элементами нужно иметь значение z-index выше, чем остальным элементам, так как мы хотим, чтобы он был выше всего остального. Если мы оставим порядок по умолчанию, то он будет спрятан под изображением:

.rotator ul{

list-style:none;

position:absolute;

right:0px;

top:0px;

margin-top:6px;

z-index:999999;

}

.rotator ul li{

display:block;

float:left;

clear:both;

width:260px;
}

У ссылочных элементов меню будут такие стили:

.rotator ul li a{

width:230px;

height:52px;

float:right;

clear:both;

padding-left:10px;

text-decoration:none;

display:block;

line-height:52px;

background-color:#222;

margin:1px -20px 1px 0px;

opacity:0.7;

color:#f0f0f0;

font-size:20px;

border:2px solid #000;

border-right:none;

outline:none;

text-shadow:-1px 1px 1px #000;

-moz-border-radius:10px 0px 0px 20px;

-webkit-border-top-left-radius:10px;

-webkit-border-bottom-left-radius:20px;

border-top-left-radius:10px;

border-bottom-left-radius:20px;

}

.rotator ul li a:hover{

text-shadow:0px 0px 2px #fff;
}

С помощью свойства радиуса закругления мы добавим немного асимметрии элементам меню. При наведении указателя мыши появится эффект свечения.

Элементы содержимого и заголовок будут иметь такие стили:

.rotator .heading{

position:absolute;

top:0px;

left:0px;

width:500px;

}

.rotator .heading h1{

text-shadow:-1px 1px 1px #555;

font-weight:normal;

font-size:46px;

padding:20px;

}

.rotator .description{

width:500px;

height:80px;

position:absolute;

bottom:0px;

left:0px;

padding:20px;

background-color:#222;

-moz-border-radius:0px 10px 0px 0px;

-webkit-border-top-right-radius:10px;

border-top-right-radius:10px;

opacity:0.7;

border-top:2px solid #000;

border-right:2px solid #000;

}

.rotator .description p{

text-shadow:-1px 1px 1px #000;

text-transform:none;

letter-spacing:normal;

line-height:26px;

}

a.more{

color:orange;

text-decoration:none;

text-transform:uppercase;

font-size:10px;

}

a.more:hover{

color:#fff;
}

А теперь давайте добавим немного магии.

JavaScript

Сначала нам нужно добавить скрипт jQuery, а так же плагин упрощения jQuery, чтобы создать приятные упрощающие эффекты:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

Мы добавим это после всего содержимого, но до закрытия тега body. После этого мы добавим вот это:

$(function() {

/* Индекс текущего элемента списка */

var current = 1;

/* Функция перебора всех элементов списка */

var iterate = function(){

var i = parseInt(current+1);

var lis = $('#rotmenu').children('li').size();

if(i>lis) i = 1;

display($('#rotmenu li:nth-child('+i+')'));

}

/* В начале показать первый */

display($('#rotmenu li:first'));

/* Через 3 секунды перепрыгнуть на следующий */

var slidetime = setInterval(iterate,3000);

/* Если пользователь нажимает на элемент списка, автоматическое изменение содержимого останавливается */

$('#rotmenu li').bind('click',function(e){

clearTimeout(slidetime);

display($(this));

e.preventDefault();

});

/* Показать каждый элемент, связанный с элементами списка elem */

function display(elem){

var $this   = elem;

var repeat  = false;

if(current == parseInt($this.index() + 1))

repeat = true;

/* Задвигается текущий элемент */

if(!repeat)

$this.parent()

.find('li:nth-child('+current+') a')

.stop(true,true)

.animate({'marginRight':'-20px'},300,function(){

$(this).animate({'opacity':'0.7'},700);

});

current = parseInt($this.index() + 1);

var elem = $('a',$this);

/* Выдвигается элемент, на который нажали, или следующий */

elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

/* Заголовок и описание будут выдвигаться, изменять содержимое и задвигаться обратно */

var info_elem = elem.next();

$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){

$('h1',$(this)).html(info_elem.find('.info_heading').html());

$(this).animate({'left':'0px'},400,'easeInOutQuad');

});

$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){

$('p',$(this)).html(info_elem.find('.info_description').html());

$(this).animate({'bottom':'0px'},400,'easeInOutQuad');

})

/* Текущее изображение будет плавно исчезать и следующее будет плавно появляться */

$('#rot1').prepend(

$('<img alt="">',{

style   :   'opacity:0',

className : 'bg'

}).load(

function(){

$(this).animate({'opacity':'1'},600);

$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){

$(this).remove();

});

}

).attr('src','images/'+info_elem.find('.info_image').html())

.attr('width','800')

.attr('height','300')

);

}
});

И это все! Надеемся, Вам понравился этот урок, и он Вам пригодится!

P.S. В браузере Google Chrome это выглядит очень красиво, проверьте сами. Свойства CSS3 не будут работать в браузере Internet Explorer, и закругленные границы могут не работать в браузере Opera.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

Опубликовано в css, января 9, 2014
Метки: css, Jquery, jquery слйдеры, верстка, галерея с переходами, галерея урок, сss галереи, урок css, урок верстка

�

Простая контент-галерея с использованием jQuery и CSS3

Разметка

CSS

JavaScript

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые