Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Август » 26 » ПИКТОГРАММЫ С 3D-ЭФФЕКТОМ


18:05
ПИКТОГРАММЫ С 3D-ЭФФЕКТОМ

ПИКТОГРАММЫ С 3D-ЭФФЕКТОМ

 


 Сегодня мы хотим показать вам, как создавать захватывающие 3D-эффекты  при наведении с использованием CSS3 и JQuery.

В наших примерах мы будем использовать миниатюру, которая раскроет скрытую  информацию при наведении курсора мыши. Мы создадим структуру с JQuery, что позволит сделать изображение сложенным или изогнутым, когда курсор мыши находится над ним. Для эффекта перекатывания мы будем использовать CSS 3D-преобразования.


ПОСМОТРЕТЬ ДЕМО                   СКАЧАТЬ ИСТОЧНИКА

 

Пожалуйста, обратите внимание: результат этого урока будет работать только в браузерах, которые поддерживают соответствующие свойства CSS.

Мы будем опускать префиксы в этом уроке. Но Вы, конечно, сможете найти их в файлах.

РАЗМЕТКА

Разметка для миниатюр будет выглядеть следующим образом:

 

<div id="grid" class="main">

 

    <div class="view">

 

        <div class="view-back">

            <span data-icon="A">566</span>

            <span data-icon="B">124</span>

            <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>

        </div>

 

        <img src="images/1.jpg" />

 

    </div>

 

    <div class="view">

 

    <!-- ... -->

 

    </div>

 

    <!-- ... -->

    

</div>

 

 

 

Каждая миниатюра переходит в подразделение с другим подразделением для деталей (вид-назад). Структура, которую мы хотим создать для каждого подразделения с классом Посмотреть с использованием  JavaScript заключается в следующем:

 

<div class="view">

 

    <div class="view-back">

        <!-- ... -->

    </div>

    

    <div class="slice s1" style="background-image: url(images/1.jpg); ">

        <span class="overlay"></span>

        

        <div class="slice s2" style="background-image: url(images/1.jpg); ">

            <span class="overlay"></span>

            

            <div class="slice s3" style="background-image: url(images/1.jpg); ">

                <span class="overlay"></span>

                

                <div class="slice s4" style="background-image: url(images/1.jpg); ">

                    <span class="overlay"></span>

                    

                    <div class="slice s5" style="background-image: url(images/1.jpg); ">

                        <span class="overlay"></span>

                    </div><!-- /s5 -->

                

                </div><!-- /s4 -->

                    

            </div><!-- /s3 -->

                

        </div><!-- /s2 -->

            

    </div><!-- /s1 -->

    

</div><!-- /view -->

 

 

 

Каждый срез будет иметь соответствующие изображение, поскольку это фоновое изображение и так как мы имеем  вложенную структуру, то это позволит нам контролировать эффект. Кроме того, мы добавим наложение промежуток, который мы будем использовать, чтобы создать эффект более реалистичным.

Наши JavaScript функции выглядит следующим образом:

 

$.fn.hoverfold = function( args ) {

 

    this.each( function() {

    

        $( this ).children( '.view' ).each( function() {

        

            var $item   = $( this ),

                img     = $item.children( 'img' ).attr( 'src' ),

                struct  = '<div class="slice s1">';

                    struct  +='<div class="slice s2">';

                        struct  +='<div class="slice s3">';

                            struct  +='<div class="slice s4">';

                                struct  +='<div class="slice s5">';

                                struct  +='</div>';

                            struct  +='</div>';

                        struct  +='</div>';

                    struct  +='</div>';

                struct  +='</div>';

                

            var $struct = $( struct );

            

            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );

            

        } );

        

    });

 

};

 

 

 

Давайте сначала определим некоторые общие стили, а затем мы рассмотрим пример.

 

CSS

Давайте определим стиль для вида подразделений. Что важно здесь то, что мы добавляем перспективу:

 

.view {

    width: 316px;

    height: 216px;

    margin: 10px;

    float: left;

    position: relative;

    border: 8px solid #fff;

    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);

    background: #333;

    perspective: 500px;

}

 

 

Частям будут нужны некоторые свойства 3D переходов:

 

.view .slice{

    width: 60px;

    height: 100%;

    z-index: 100;

    transform-style: preserve-3d;

    transform-origin: left center;

    transition: transform 150ms ease-in-out;

    

}

 

 

 

 

.view div.view-back{

    width: 50%;

    height: 100%;

    position: absolute;

    right: 0;

    background: #666;

    z-index: 0;

}

 

 

Давайте создадим стили пролетов и ссылкок:

 

 

.view-back span {

    display: block;

    float: right;

    padding: 5px 20px 5px;

    width: 100%;

    text-align: right;

    font-size: 16px;

    color: rgba(255,255,255,0.6);

}

 

.view-back span:first-child {

    padding-top: 20px;

}

 

.view-back a {

    display: bock;

    font-size: 18px;

    color: rgba(255,255,255,0.4);

    position: absolute;

    right: 15px;

    bottom: 15px;

    border: 2px solid rgba(255,255,255,0.3);

    border-radius: 50%;

    width: 30px;

    height: 30px;

    line-height: 22px;

    text-align: center;

    font-weight: 700;

}

 

.view-back a:hover {

    color: #fff;

    border-color: #fff;

}

 

 

 

Для значка перед пролетом мы будем использовать значок шрифта, который мы создали с Fontello . Так как мы добавили данный значок в атрибут пролетов, мы можем использовать псевдо-класс: прежде чем открыть ее:

 

.view-back span[data-icon]:before {

    content: attr(data-icon);

    font-family: 'icons';

    color: #aaa;

    color: rgba(255,255,255,0.2);

    text-shadow: 0 0 1px rgba(255,255,255,0.2);

    padding-right: 5px;

}

 

 

 

Все, за исключением первого среза, должно  быть перемещено  вправо (помните, у нас есть вложенная структура):

 

.view .s2,

.view .s3,

.view .s4,

.view .s5 {

    transform: translateX(60px);

}

 

 

 

Давайте установим соответствующие позиции фона для каждого среза для фонового изображения:

 

.view .s1 {

    background-position: 0px 0px;

}

.view .s2 {

    background-position: -60px 0px;

}

.view .s3 {

    background-position: -120px 0px;

}

.view .s4 {

    background-position: -180px 0px;

}

.view .s5 {

    background-position: -240px 0px;

}

 

 

 

Наложения  изначально имеют непрозрачность 0 и мы добавим переход и изменим  уровень прозрачности при наведении:

 

.view .overlay {

    width: 60px;

    height: 100%;

    opacity: 0;

    position: absolute;

    transition: opacity 150ms ease-in-out;

}

 

.view:hover .overlay {

    opacity: 1;

}

 

 

Давайте просто исправим положение  Z-Index для. И мы также добавим переход для браузеров, которые не поддерживают 3D-преобразования:

 

.view img {

    position: absolute;

    z-index: 0;

    transition: left 0.3s ease-in-out;

}

 

 

 

В случае, если мы видим, что браузер не поддерживает все эти модные 3D-свойства, мы просто загрузим  дополнительную таблицу стилей fallback.css которая будет иметь следующее содержание:

 

.view {

    overflow: hidden;

}

 

.view:hover img {

    left: -85px;

}

 

.view div.view-back {

    background: #666;

}

 

 

Это позволит сдвинуть слайд-налево, когда мы наведем курсор.

Теперь давайте взглянем на пример!

Пример

В этом примере мы хотим создать складной эффект. Для этого мы отрегулируем в перспективе значение отображаемого разделения и переход для всех по разделам:

 

.view {

    perspective: 1050px;

}

 

.view div {

    transition: all 0.3s ease-in-out;

}

 

 

Второй, третий, четвертый и пятый кусочек будут переведены в 3D, создавая двойной эффект:

 

.view:hover .s2{

    transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);

}

.view:hover .s3,

.view:hover .s5{

    transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);

}

.view:hover .s4{

    transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);

}

 

 

Каждый из этих кусочков будет перемещен влево. Это должно быть значение их ширины, но мы хотим, не показывать маленький разрыв, поэтому мы используем 59px. Второй срез будет поворачиваться -45 градусов, что заставляет его повернуть влево. Передняя часить  вращается в другую сторону, а третий и пятый оба поворочивают на 90 градусов.Помните, что мы находимся в вложенной структуре. Как только мы вращаем родителей, дети все будут поворачивать.

Чтобы выглядело более реалистично, мы добавим некоторые градиенты:

 

.view .s2 > .overlay {

    background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

}

 

.view .s3 > .overlay {

    background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

}

 

.view .s4 > .overlay {

    background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);

}

 

.view .s5 > .overlay {

    background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

}

 

 

 

Часть миниатюр, с командой показал, когда мы наводим курсор, также будет иметь градиент фона, так как мы хотим, имитировать тени падающие на него:

 

.view div.view-back{

    background: linear-gradient(left, #0a0a0a 0%,#666666 100%);

}

 

 

Есть много различных возможностей для эксперимента с этим. 
Надеюсь, вы найдете то что вас вдохновляет!

 

ПОСМОТРЕТЬ ДЕМО                             СКАЧАТЬ ИСТОЧНИКА

 

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 746 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди