Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Hover Эффект с использованием SVG для анимации при наведении курсора мыши.

Дата добавления: 07.01.2014 - 23:10
Добавил: Buger
Количество просмотров: 2154
Количество комментариев: 0
Рейтинг материала: 5.0 / 1
Hover Эффект с использованием SVG для анимации при наведении курсора мыши.
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 1
В этом уроке мы будем воссоздавать hover эффект, на сайте. Мы будем использовать SVG для фигуры и Snap.svg для его анимации при наведении курсора мыши.

Форма состоит из треугольника, используя границы и сегодня я хотел бы показать вам, как достичь того же эффекта с помощью SVG и Snap.svg. Существуют широкие возможности для творчества и сегодня мы будем создавать три различных примера. Хорошая вещь использования SVG является то, что мы можем изменить форму, размер их родителей, размер контейнера.

Итак, приступим!

Разметка

Что мы сделаем сначала, так это нужно нарисовать две фигуры в векторном графическом редакторе, например Adobe Illustrator или Inkscape. Каждая форма будет состоять из одного пути и когда мы закончим, мы скопируем точки нашего пути, используемые в нашей разметки. Если вы используете Inkscape вы можете сделать это, выбрав объект и выбрав Path > Object to Path. Путь может быть получен из Edit > XML Editor , который откроет вид, как показано на следующем скриншоте:



"D” (путь к файлу данных) значение-это то, что вы ищете.

Для разметки, у нас появится раздел с классом "grid”, который обернут анкором.
В figure будет содержать изображение, первоначально видимые формы и figcaption:
Код
<sectionid="grid"class="grid clearfix">
    <ahref="#"data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
        <figure>
            <imgsrc="img/1.png"/>
            <svgviewBox="0 0 180 320"preserveAspectRatio="none"><pathd="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
                <h2>Crystalline</h2>
                <p>Soko radicchio bunya nuts gram dulse.</p>
                <button>View</button>
            </figcaption>
        </figure>
    </a>
    <!-- ... -->
</section>

SVG будет иметь соответствующие viewBox значения для графических и preserveAspectRatio "none”. Мы будем определять ширину и высоту в нашей таблице стилей. Информация hover пути будут храниться в данных атрибута (data-attribute) data-path-hover обертывания с анкором.

Давайте добавим стиль для всего этого:

CSS

Обратите внимание, что CSS не будут содержать префиксы.

Стиль, который у нас будут проводиться для всех трех примерах. Во-первых, мы рассмотрим общий стиль и тогда мы будем ставить индивидуальные стили для всех демок.

Мы начнем с grid.
Код
.grid {
    margin: 40px auto 120px;
    max-width: 1000px;
    width: 90%;
}

Анкоры должны быть со значением float: left, и дадим им max-width 250px и width 25%, так как мы хотели бы, чтобы они находились в  четыре позиции в строке. Мы будем заботиться о меньших запросов размеров экрана позже:
Код
.grid a {
    float: left;
    max-width: 250px;
    width: 25%;
    color: #333;
}

Чтобы создать некоторое смещение для нечетных элементов, мы установили верхнего поля 30px и нижнее 30px. Это позволит создать красивый вид на grid:
Код
.grid a:nth-child(odd) {
    margin: 30px 0 -30px 0;
}

Рисунок должен располагаться относительно, потому что нам понадобится, некоторым child бывает абсолютной. С нашей hover эффект могут вызвать переполнение, и мы не хотим, чтобы быть видимым, мы будем ставить overflow: hidden;
Код
.grid figure {
    position: relative;
    overflow: hidden;
    margin: 5px;
    background: #333;
}

Изображение будет занимать всю ширину своего родителя и прозрачностью 0.7. При наведении мы хотим анимации прозрачности, так что добавим перехода:
Код
.grid figure img {
    position: relative;
    display: block;
    width: 100%;
    opacity: 0.7;
    transition: opacity 0.3s;
}

В figcaption нужно сделать абсолютно позиционируемым, и мы будем растягивать ее на всю деталь:
Код
.grid figcaption {
    position: absolute;
    top: 0;
    z-index: 11;
    padding: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
}

Заголовок и абзац оба будут анимированные при наведении, так давайте дадим им соответствующий переход и переместим их немного исходное положение:
Код
.grid figcaption h2 {
    margin: 0 0 20px 0;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 130%;
    transition: transform 0.3s;
}
 
.grid figcaption p {
    padding: 0 20px;
    color: #aaa;
    font-weight: 300;
    transition: opacity 0.3s, transform 0.3s;
}
 
.grid figcaption h2,
.grid figcaption p {
    transform: translateY(50px);
}

Общий стиль кнопки для всех трех примерах заключается в следующем. Кнопка будет также анимировать, так что добавим переход за непрозрачность и для преобразования:
Код
.grid figure button {
    position: absolute;
    padding: 4px 20px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    transition: opacity 0.3s, transform 0.3s;
}

Чтобы избежать мерцания и глюки, мы должны будем дать анимация элементов и их родителей скрытый backface-visibility:
Код
.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
    backface-visibility: hidden;
}

SVG также будет позиционирован абсолютно, и мы будем растягивать его на тот пункт, установив параметр " ширина " и " высота до 100%. Придавая главное значение-1px вместо 0, что будет убирать странные линии в Firefox v.26 (на Mac).
Код
.grid svg {
    position: absolute;
    top: -1px; /* fixes rendering issue in FF */
    z-index: 10;
    width: 100%;
    height: 100%;
}

Цвет заливки путь будет белый:
Код
.grid svg path {
    fill: #fff;
}

На этом этапе также можно попробовать добавить некоторые переходы путь и т.д. измените заливку цветом при наведении курсора мыши.

Общие эффекты наведения для анкора будут следующие:
Код
.grid a:hover figure img {
    opacity: 1;
}
 
.grid a:hover figcaption h2,
.grid a:hover figcaption p {
    transform: translateY(0);
}
 
.grid a:hover figcaption p {
    opacity: 0;
}

Непрозрачность изображения будет установлен в 1, в то время как пункт подписей скользит вверх и исчезает. Заголовок двигаться вверх, тоже.

Давайте стиль индивидуальные демонстрации. Некоторые стили, которые будут общими для более чем одной демки.

В первом и третьем примере, мы хотим, чтобы " белой каймой и располагаться по центру элемента. Он будет скрыт изначально и масштабируется вниз. Другие преобразования используются, чтобы "вытащить” его в нужное положение и центр. При наведении, мы сделаем кнопку масштабирования вверх и исчезают:
Код
.demo-1 body {
    background: #3498db;
}
 
.demo-1 .grid figure button,
.demo-3 .grid figure button {
    top: 50%;
    left: 50%;
    border: 3px solid #fff;
    background: transparent;
    color: #fff;
    opacity: 0;
    transform: translateY(-50%) translateX(-50%) scale(0.25);
}
 
.demo-1 .grid a:hover figure button,
.demo-3 .grid a:hover figure button {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1);
}

Для второго демо, мы будем переопределять некоторые цвета и установите кнопку, скрытые в нижней части рис. Для этого мы устанавливаем снизу 0 и перевести его на 100% (собственной высоты). При наведении мы сделаем это слайд, с другой функцию смягчения "ease-out” (по умолчанию это "ease”):
Код
.demo-2 body {
    background: #e74c3c;
}
 
.demo-2 .grid figcaption h2 {
    color: #e74c3c;
}
 
.demo-2 .grid figcaption p {
    transition-delay: 0.05s;
}
 
.demo-2 .grid figure button {
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    background: #fff;
    color: #333;
    font-weight: 300;
    transform: translateY(100%);
}
 
.demo-2 .grid a:hover figure button {
    transition-timing-function: ease-out;
    transform: translateY(0);
}

headline и paragraph второй и третий пример будет иметь cubic-bezier функция замедления, которые помогут подражать эластичности. Мы будем также делать набор различной длительности без задержки для пунктов при наведении. Это будет гарантировать, что пункты быстро затухают до нашей SVG формы:
Код
.demo-2 .grid figcaption h2,
.demo-2 .grid figcaption p,
.demo-3 .grid figcaption h2,
.demo-3 .grid figcaption p {
    timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
}
 
.demo-2 .grid a:hover figcaption p,
.demo-3 .grid a:hover figcaption p {
    transition-delay: 0s;
    transition-duration: 0.1s;
}

Для третьего демо мы изменим некоторые цвета и оставим заголовок немного преобразовываться при наведении:
Код
.demo-3 body {
    background: #52be7f;
}
 
.demo-3 .grid figcaption h2 {
    color: #52be7f;
}
 
.demo-3 .grid a:hover figcaption h2 {
    transform: translateY(5px);
}

Для небольших экранов, мы хотим изменить количество строк, поэтому мы будем сбросывать width и margin: children. Анкоры, которые должны иметь предел 2-я, 5-я, 8-я, 11-го и так далее, который описывается последовательность 3n-1.
Даже меньших размеров, мы будем регулировать максимальная ширину сетки и изменять некоторые поля заголовка элементов:
Код
@media screen and (max-width: 58em) {
    .grid a {
        width: 33.333%;
    }
 
    .grid a:nth-child(odd) {
        margin: 0;
    }
 
    .grid a:nth-child(3n-1) {
        margin: 30px 0 -30px 0;
    }
}
 
@media screen and (max-width: 45em) {
    .grid {
        max-width: 500px;
    }
 
    .grid a {
        width: 50%;
    }
 
    .grid a:nth-child(3n-1) {
        margin: 0;
    }
 
    .grid a:nth-child(even) {
        margin: 30px 0 -30px 0;
    }
 
 
    .grid figcaption h2 {
        margin-bottom: 0px;
        transform: translateY(30px);
    }
 
    .grid figcaption p {
        margin: 0;
        padding: 0 10px;
    }
}
 
@media screen and (max-width: 27em) {
    .grid {
        max-width: 250px;
    }
 
    .grid a {
        width: 100%;
    }
 
    .grid a:nth-child(even) {
        margin: 0;
    }
}

Со стилями закончили! Давайте двигаться к JavaScript.

JavaScript

Мы будем использовать Snap.svg, отличная библиотека для работы с SVG-файлами.

Давайте начнем с определения скорости и облегчения переменной. Мы будем также определить переменную, которая будет содержать информацию о пути и кружить по пути. При наведении курсора на анкор, мы будем оживлять путь в "to” - путь. При выходе на анкор, мы будем оживлять обратно "from” путь:
Код
(function() {
     
    function init() {
        var speed = 250,
            easing = mina.easeinout;
 
        [].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                pathConfig = {
                    from : path.attr( 'd' ),
                    to : el.getAttribute( 'data-path-hover' )
                };
 
            el.addEventListener( 'mouseenter', function() {
                path.animate( { 'path' : pathConfig.to }, speed, easing );
            } );
 
            el.addEventListener( 'mouseleave', function() {
                path.animate( { 'path' : pathConfig.from }, speed, easing );
            } );
        } );
    }
 
    init();
 
})();

На этом все! Всем спасибо!





Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.