Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Красивый эффект анимации для галереи

Красивый эффект анимации для галереи

10 янв 2014 | Комментариев: 0 | Просмотров: 1159

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js и скачать библиотеку Raphael. И подключить все файлы + библиотеку jquery в хедере.

 
<link href="css/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="js/raphael.js" type="text/javascript"></script>
	<script src="js/init.js" type="text/javascript"></script>
 
Разметка HTML

<div class="gallery">
	    <ul class="reset">
	        <li><img src="1.jpg" alt=""></li>
	        <li><img src="2.jpg" alt=""></li>
	        <li><img src="3.jpg" alt=""></li>
	        <li><img src="4.jpg" alt=""></li>
	        <li><img src="5.jpg" alt=""></li>
	        <li><img src="6.jpg" alt=""></li>
	    </ul>
	</div>
 
Мы создали основной котейнер - gallery, содержащий не упорядоченный список изображений. Все картинки имеют размеры 400х400 пикселей.
 
CSS
 
Создаем файл default.css и вставляем ниже текст:
 
ul.reset,
	ul.reset li {
	    display:block;
	    list-style:none;
	    padding:0;
	    margin:0;
	}
	.gallery ul li {
	    width:200px; /* a half of image width */
	    height:200px; /* a half of image height */
	    margin:0 10px 10px 0;
	    float:left;
	    position:relative;
	}
	.holder {
	    position:absolute;
	    top:0;
	    left:0;
	    margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */
	}
 
javascript
 
Создаем файл init.js и размещаем в него ниже предоставленный текст:
 
$(function(){
	     
	    var li = $('.gallery').find('li'); // find all 'li' elements
	         
	    li.each(function(i){
	        var t = $(this),
	            img = t.find('img'), // find image in 'li' element
	            src = img.attr('src'), // get path to your image
	            width = li.width(), // get 'li' width
	            height = li.height(); // get 'li' height
	             
	        img.hide().after($('<div>').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects
	 
	        var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects
	            rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables
	         
	        rimg.hover(function(event) {
	            this.animate({
	                scale: 2, // enlarge your images to the normal size
	                rotation : 360
	            }, 1200, 'elastic');
	        }, function (event) {
	            this.animate({
	                scale: 1, // decrease size of images
	                rotation : 0
	            }, 1200, 'elastic');
	        });
	         
	    });
	     
	    li.hover(function(){
	        li.css({ 'z-index': 1 }); // set z-index to all 'li' elements
	        $(this).css({ 'z-index': 2 }); // set z-index to the hovering element
	    });
	             
	});
 
Вроде на этом и все. Смотрим что получилось и радуемся.
 

Скачать файл Скачек: 5 | Размер: 258,5 Kb
Демо-версия


Теги: галерея

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Навигационное меню темными кнопками

Навигационное меню темными кнопками

Простое меню на CSS3/HTML с эффектом выдавливания в темных тонах.
Zoomy - красивый эффект лупы на изображении

Zoomy - красивый эффект лупы на изображении

Эффект лупы достигается благодаря использованию простого jQuery плагина Zoomy. Вам понадобятся две копии одного и того же изображения - первая - копия
Красивая анимация заголовка изображения

Красивая анимация заголовка изображения

Красивый эффект анимации при наведении на картинку, у которой по верх отображается ее название.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.