Ефект зменшення фото з jQuery

42

Эффект уменьшения фото с jQuery

Сьогодні я покажу вам, як створити простий ефект зміни зображення за допомогою jQuery. Ідея полягає в тому, що зображення, які спочатку показані в збільшеному форматі при наведенні на нього курсору приймають реальний розмір і форму.
Цей ефект може бути застосований до фотографії або будь-якого іншого зображення,а також при використанні веб-сайт галерей. У прикладі авторів виведені чорно-білі зображення, щоб зосередити Вашу увагу на сам ефект.

Відмінно, давайте почнемо. Але для початку, не погано б поглянути на приклад роботи ефекту:

Дивитися Демо

Кому воно треба, читаємо далі:

HTML:

Ми укладемо наші зображення в оболонки з допомогою div. Робиться це для того, щоб фотографія (яка буде набагато більше), не показувалася повністю. Всередині у нас буде знаходитися посилання на елемент, який оточує зображення, тим самим приховуючи деяку його частину:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="wrap">
<a href="http://www.flickr.com/photos/archetypefotografie/3601313864/">
<img src="images/image1.jpg" alt="Picture " 1"/>
</a>
</div>
<div class="wrap">
<a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
<img src="images/image2.jpg" alt="Picture " 2"/>
</a>
</div>
<div class="wrap">
<a href="http://www.flickr.com/photos/[email protected]/445175934/">
<img src="images/image3.jpg" alt="Picture " 3"/>
</a>
</div>
<div class="wrap">
<a href="http://www.flickr.com/photos/brunociampi/2461177417/">
<img src="images/image4.jpg" alt="Picture " 4"/>
</a>
</div>
<div class="wrap">
<a href="http://www.flickr.com/photos/beadmobile/3298460491/">
<img src="images/image5.jpg" alt="Picture " 5"/>
</a>
</div>
<div class="wrap">
<a href="http://www.flickr.com/photos/tonythemisfit/3839281139/">
<img src="images/image6.jpg" alt="Picture " 6"/>
</a>
</div>

Picture 1
Picture 2
Picture 3
Picture 4
Picture 5
Picture 6

Всі зображення повинні мати однаковий розмір (500px рази 333px), оскільки ми хочемо, щоб дія була однаковою на кожному зображенні. Ви можете використовувати зображення з різних розмірів, але майте на увазі, що вам потрібно адаптувати функцію JavaScript для того, щоб домогтися плавного ефекту.

CSS:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap{
width:200px;
height:200px;
margin:0px;
overflow:hidden;
position:relative;
float:left;
}
.wrap a img{
border:none;
position:absolute;
top:-66.5 px;
left:-150px;
height:500px;
opacity: 0.5;
}

.wrap{
width:200px;
height:200px;
margin:0px;
overflow:hidden;
position:relative;
float:left;
}
.wrap a img{
border:none;
position:absolute;
top:-66.5 px;
left:-150px;
height:500px;
opacity: 0.5;
}

Як вже згадувалося вище, зображення має висоту 333px. Нам необхідно, щоб спочатку показувалося «у великому» розмірі.Прописуємо більший розмір. В даному випадку ми вирішили встановити в 500px. При встановленні розміру тільки з одного боку, зображення буде змінювати розміри відповідно.

За допомогою функції JavaScript створимо перехід з збільшеного зображення в нормальний формат.

JavaScript:

При наведенні курсору на фото воно стане непрозорим з висотою в 200px. При переміщенні миші з зображення повертаємося до вихідних параметрів.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
$('#container img').hover(
function(){
var $this = $(this);
$this.stop().animate({
'непрозорість':'1.0',
'height':'200px',
'top':'0px',
'left':'0px'
});
},
function(){
var $this = $(this);
$this.stop().animate({
'непрозорість':'0.5',
'height':'500px',
'top':'-66.5 px',
'left':'-150px'
});
}
);
});

$(function() {
$(‘#container img’).hover(
function(){
var $this = $(this);
$this.stop().animate({
‘непрозорість’:’1.0′,
‘height’:’200px’,
‘top’:’0px’,
‘left’:’0px’
});
},
function(){
var $this = $(this);
$this.stop().animate({
‘непрозорість’:’0.5′,
‘height’:’500px’,
‘top’:’-66.5 px’,
‘left’:’-150px’
});
}
);
});

Завантажити

На цьому мабуть і все! Сподіваюся, що кому-небудь цей спосіб виведення фотографій згодиться.
Урок підготовлений і переведений:shurawi

Джерело: tympanus.net