ДИАГОНАЛЬНОЕ ВРАЩЕНИЕ ИЗОБРАЖЕНИЙ

+ -
0
ДИАГОНАЛЬНОЕ ВРАЩЕНИЕ ИЗОБРАЖЕНИЙ


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

Разметка HTML
Используем просто неупорядоченный список с изображениями для портфолио.
Класс "feature" применим к элементу списка, в котором будет при загрузке страницы отображено изображение.
    <ul class="portfolio">
        <li><img src="img/1.jpg" alt="Изображение 1"></li>
        <li><img src="img/2.jpg" alt="Изображение 2"></li>
        <li class="feature"><img src="img/3.jpg" alt="Изображение 3"></li>
        <li><img src="img/4.jpg" alt="Изображение 4"></li>
        <li><img src="img/5.jpg" alt="Изображение 5"></li>
    </ul>


CSS
Изображения у нас имеют размеры 600х300 px.
Поворачиваем все элементы нашего списка на 30 градусов по часовой стрелке при загрузке страницы:
    ul.portfolio{
        margin: 50px auto 0;
        -ms-transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
        -moz-transform:rotate(30deg);
        width: 200px;
    }


Теперь применим CSS к каждому элементу списка и изображениям.
С помощью height и width масштабируем элементы списка с изображениями (уменьшим). Сделаем их наполовину не прозрачными и заложим основу для переходов (transition):
        ul.portfolio li{
            border: 1px solid #999999;
            height: 100px;
            list-style:none;
            margin-left: 0;
            opacity: 0.5;
            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            width: 200px;
        }

            ul.portfolio li img{
                height: 100px;
                -webkit-transition: all 0.5s ease-in;
                -moz-transition: all 0.5s ease-in;
                -o-transition: all 0.5s ease-in;
                width: 200px;
            }


Теперь свойства для класса "feature", который будет применяться к элементам списка с помощью javascript по клику на изображение. Отрицательное вращение -30 градусов возвращает элемент списка в исходное положение, z-index устанавливает изображение поверх всех остальных. Также делаем изображение непрозрачным и устанавливаем изначальные размеры 600х300px:
            ul.portfolio li.feature{
                border: 5px solid #dddddd;
                -moz -box-shadow: 3px 3px 4px #222222;
                -webkit-box-shadow: 3px 3px 4px #222222;
                box-shadow: 3px 3px 4px #222222;
                height: 300px;
                margin-left: -200px;
                opacity: 1;
                position: relative;
                -ms-transform: rotate(-30deg);
                -webkit-transform: rotate(-30deg);
                -moz-transform: rotate(-30deg);
                width: 600px;
                z-index: 100;
            }

                ul.portfolio li.feature img{
                    height: 300px;
                    width: 600px;
                }


javascript
Подключаем jQuery библиотеку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


И используя скрипт test.js управляем классом "feature":
$(document).ready(function(){
    $('.portfolio li').click(function() {    
        var new_feature = $(this);    
        if (!new_feature.hasClass('feature')){    
            $('li.feature').removeClass('feature');
            setTimeout(function(){
                new_feature.addClass('feature');
            }, 500);        
        }        
    });
});


Скачать исходник:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 0