ЭФФЕКТ АНИМАЦИИ ДЛЯ ГАЛЕРЕИ


ЭФФЕКТ АНИМАЦИИ ДЛЯ ГАЛЕРЕИ


Эффект, который позволит преобразить вашу галерею фотографий, с помощью билиотеки 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
    });
             
});


Скачать исходник:
gallery.rar


скрипт скрипт ЭФФЕКТ АНИМАЦИИ ДЛЯ ГАЛЕРЕИ
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 3333
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация