Створення цікавого ефекту розкриття для мініатюр з допомогою CSS і JQuery

40

Создание интересного эффекта раскрытия для миниатюр с помощью CSS и JQuery

Сьогодні нарешті дійшли руки до того, щоб розпочати серію статей про створення різних ефектних способів виведення мініатюр зображень. Все більше і більше стає популярним, метод анонсування статей з допомогою мініатюр. Виводиться картинка візуально підкреслює сенс самої статті, або береться перше зображення з посади і подається разом з коротким анонсом, що з’являється при наведенні на мініатюру, на головній сторінці, або бічній панелі сайту. Так само відмінним застосуванням таких мініатюр буде окрема сторінка портфоліо, або повноцінна галерея зображень.

Ефектів багато і всі вони різні за виконанням, подання інформації, стилістиці оформлення та візуального сприйняття кінцевого результату користувачами.

Почну цю серію з розгляду унікального ефекту вертикального розкриття у вигляді шторок при наведенні на мініатюру за допомогою JQuery.

І так, для початку давайте поглянемо, що це таке на прикладі:

ДемоСкачать

Правда не погано? Ну, а де застосовувати, це вирішувати тільки Вам. Думаю саме місце в сайд-барі, для виведення випадкових записів або презентації нових статей, по-перше займає не багато місця і найголовніше, це не безлика посилання, а повноцінний інформаційний блок, до того ж досить красиво оформлений.

Тепер давайте розберемо все детально, як працює цей чудовий ефект.

1. HTML

Ми не будемо використовувати ul список, тому що це насправді не список, а кожна мініатюра, це окремий блоковий елемент. Таким чином, в основному ми працюємо з тегом div з заздалегідь означених класом. Заголовок і текст опису виходять прихованими під зображенням.
Ось так будуть виглядати структура 4 окремих блоків зображень з прихованим змістом, безпосередньо в HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="qitem">
<a href="ваше посилання"><img src="images/image.gif" alt="Test 1" title="" width="140" height="140"/></a>
<span class="caption"><h4>Заголовок</h4><p>Опис статті або самої картинки</p></span>
</div>
<div class="qitem">
<a href="ваше посилання"><img src="images/image.gif" alt="Test 2" title="" width="140" height="140"/></a>
<span class="caption"><h4>Заголовок</h4><p>Опис статті або самої картинки</p></span>
</div>
<div class="qitem">
<a href="ваше посилання"><img src="images/image.gif" alt="Test 3" title="" width="140" height="140"/></a>
<span class="caption"><h4>Заголовок</h4><p>Опис статті або самої картинки</p></span>
</div>
<div class="qitem">
<a href="ваше посилання"><img src="images/image.gif" alt="Test 4" title="" width="140" height="140"/></a>
<span class="caption"><h4>Заголовок</h4><p>Опис статті або самої картинки</p></span>
</div>

Test 1

Заголовок

Опис статті або самої картинки

Test 2

Заголовок

Опис статті або самої картинки

Test 3

Заголовок

Опис статті або самої картинки

Test 4

Заголовок

Опис статті або самої картинки

У цьому прикладі показано код для виведення чотирьох мініатюр укладених в блоки div class=”qitem”. Блочний елементdiv з певним класом ми використовуємо щоб не описувати кожен раз стиль всередині тега, а винесли його в зовнішню таблицю стилів. У розділі CSS у нас є class «qitem», в ньому будуть прописані всі властивості і параметри оформлення блоку.

Тепер нам необхідно підключити до роботи jQuery, для цього в шапці документа прописуємо наступне:

<script src="js/jquery-1.3.1.min.js">
<script src="js/jquery.easing.1.3.js">

Ось так непомітно ми підібралися до формування і стилізації наших мініатюр через CSS.

2. CSS

Нам необхідно створити загальні налаштування для всіх блоків. Ми можемо зробити це в JavaScript, але було б більш ефективним і простим зробити це за допомогою CSS.
Javascript у нас буде призначати фоновий малюнок, фонові позиції, зверху і зліва значення bar1, bar2, bar3 і bar4.

Подивимося на CSS зсередини:

.qitem {
width:140px;
height:140px;
border:4px solid #222;
 margin:5px 5px 5px 0;
background: url('bg.gif') no-repeat;
/* Потрібно, щоб приховати зображення після зміни розмірів */
overflow:hidden;
position:relative;
float:left;
cursor:hand; cursor:pointer;
}
.qitem img {
border:0;
position:absolute;
z-index:200;
}
.qitem .caption {
position:absolute;
z-index:0;
color:#ccc;
 display:block;
}
.qitem .caption h4 {
font-size:12px;
padding:10px 5px 0 8px;
margin:0;
color:#369ead;
}
.qitem .caption p {
font-size:10px;
padding:3px 5px 0 8px;
margin:0;
}
/* Установка для барів */
.bar1, .bar2, .bar3, .bar4 {
position:absolute;
background-repeat: no-repeat;
z-index:200;
}
.clear {
clear:both;
}

.qitem {
width:140px;
height:140px;
border:4px solid #222;
margin:5px 5px 5px 0;
background: url(‘bg.gif’) no-repeat;
/* Потрібно, щоб приховати зображення після зміни розмірів */
overflow:hidden;
position:relative;
float:left;
cursor:hand; cursor:pointer;
}
.qitem img {
border:0;
position:absolute;
z-index:200;
}
.qitem .caption {
position:absolute;
z-index:0;
color:#ccc;
display:block;
}.qitem .caption h4 {
font-size:12px;
padding:10px 5px 0 8px;
margin:0;
color:#369ead;
}
.qitem .caption p {
font-size:10px;
padding:3px 5px 0 8px;
margin:0;
}
/* Установка для барів */
.bar1, .bar2, .bar3, .bar4 {
position:absolute;
background-repeat: no-repeat;
z-index:200;
}
.clear {
clear:both;
}

3. Javascript

З допомогою javascript ми оживимо всі функції цього ефекту. Ви можете подивитися на код, для розуміння що робимо, додав коментарі, так що легко розберетеся.

$(document).ready(function() {
// Користувацькі налаштування
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 800;
var speed_out = 300;
// Верхній і нижній
var top = $('.qitem').height() * (-1);
var bottom = $('.qitem').height();
$('.qitem').each(function () {
// Отримати всі деталі зображення перед витяганням
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
alt = $(this).find('img').attr('img');
width = $(this).width() / 4;
height = $(this).height();
// Видалити зображення і додати 4 Div 
$('img', this).remove();
$(this).append('
'
); // Встановити зображення в якості фонового малюнка для всіх блоків $(this).children('div').css('background-image','url('+ img + ')'); // Розділити образ на 4 блоку і відновити зображення $(this).find('div.bar1').css({top:0, left:0, width:width, height:height, backgroundPosition:'0 0' }); $(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' }); $(this).find('div.bar3').css({bottom:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' }); $(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' }); }).hover(function () { // Оживити блоки, 1-й і 3 рухатися вгору, 2 і 4 рухатися вниз $(this).find('div.bar1').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out}); $(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out}); $(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out}); $(this).find('div.bar4').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out}); }, function () { // Перейти до позиції за замовчуванням $(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in}); }).click (function () { // Зробити конструкцію клікабельним window.location = $(this).find('a').attr('href'); }); });

$(document).ready(function() {// Користувацькі налаштування
var style_in = ‘easeOutBounce’;
var style_out = ‘jswing’;
var speed_in = 800;
var speed_out = 300;// Верхній і нижній
var top = $(‘.qitem’).height() * (-1);
var bottom = $(‘.qitem’).height();$(‘.qitem’).each(function () {// Отримати всі деталі зображення перед витяганням
url = $(this).find(‘a’).attr(‘href’);
img = $(this).find(‘img’).attr(‘src’);
alt = $(this).find(‘img’).attr(‘img’);
width = $(this).width() / 4;
height = $(this).height();
// Видалити зображення і додати 4 Div
$(‘img’, this).remove();
$(this).append(‘

‘);
// Встановити зображення в якості фонового малюнка для всіх блоків
$(this).children(‘div’).css(‘background-image’,’url(‘+ img + ‘)’);// Розділити образ на 4 блоку і відновити зображення
$(this).find(‘div.bar1′).css({top:0, left:0, width:width, height:height, backgroundPosition:’0 0’ });
$(this).find(‘div.bar2’).css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + ‘px 0’ });
$(this).find(‘div.bar3’).css({bottom:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + ‘px 0’ });
$(this).find(‘div.bar4’).css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + ‘px 0’ });}).hover(function () {
// Оживити блоки, 1-й і 3 рухатися вгору, 2 і 4 рухатися вниз
$(this).find(‘div.bar1’).stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});
$(this).find(‘div.bar2’).stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});
$(this).find(‘div.bar3’).stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});
$(this).find(‘div.bar4’).stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});
},
function () {// Перейти до позиції за замовчуванням
$(this).find(‘div.bar1’).stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
$(this).find(‘div.bar2’).stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
$(this).find(‘div.bar3’).stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
$(this).find(‘div.bar4’).stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
}).click (function () {
// Зробити конструкцію клікабельним
window.location = $(this).find(‘a’).attr(‘href’);
});});

Ось в принципі і всі за складовими самого ефекту вертикального розкриття мініатюр з допомогою JQuery. Залишилося тільки подивитися на список файлів, які нам знадобляться:

/ jquery.easing.1.3.js / jquery-1.3.1.min.js / 5 файлів зображень.

При роботі з різними скриптами не забувайте про ієрархію і порядок. Краще все розкласти по папках, щоб потім легше було розбиратися.
Тільки не забувайте потім міняти шляху до потрібних файлів, якщо щось перекладаєте в інше місце.

Висновок:

Звичайно, прихильники і шанувальники різних примочок в WordPress, зараз возденут руки до неба і вигукнуть, типу : “О боже так навіщо це треба? Адже є пла-а-а-гіни ! “

Друзі. Так, ефекти такого плану давно реалізовані і широко використовуються в Wordpres, відмінності лише у виконанні. Взяти ті ж слайдери, ну чим не приклад. Ну, а я, не будучи «распупыристым» знавцем «Преса», все намагаюся пропускати через руки, чого і Вам бажаю.

ДемоСкачать

Джерело: www.queness.com

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: