Будьте в курсе событий

Некая анимация чтобы привлечь внимание к товару

Главная » Новости » Некая анимация чтобы привлечь внимание к товару

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

Предлагаем свою идею, она устроена очень просто, мы рассмотрим это ниже, а сначала покажем демо. Следует учесть, данный пример работает только на современных браузерах, так как демо написано без вендорных префиксов и оперирует Level 3 Events.

Демо

Исходники этого примера Скачать, архив состоит из файлов:

index.html - разметка
style.css - стили
script.js - скрипты
example-icon.png - демо иконка
page-imitation.png - изображение воображаемой страницы

Лицензия Можете использовать бесплатно в коммерческих и личных целях.

Как это работает?

Первым делом создадим разметку так называемой motion-области, в пределах которой происходит анимация. Чтобы подготовить эту область, на тело документа сразу навесим обработчик onload-события - им станет функция prepareMotion. Вот как выглядит разметка из показанного выше демо.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Some animation to capture the attention</title>

        <link href="style.css" rel="stylesheet" />
        <script src="script.js"></script>
    </head>

    <body onload="prepareMotion()">
        <div class="motion">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div></div>
        </div>
    </body>
</html>

Расположение 5 span-ов и 1 div, вложенных в контейнер motion-области, схематично показано на следующем рисунке. Span-ы служат для вращения текста, где пятый является верхним, а четыре предшествующих ему образуют полупрозрачный хвост. Div служит для краткого описания, появляющегося под вращающимся текстом.

Javascript

Код скрипта так же простой, содержит всего 5 переменнных (из них 4 технические) и 5 коротких функций.

Как было отмечено ранее, стартовой точкой скрипта является функция prepareMotion. Механизм её работы:

Находит на странице motion-область.
Запоминает указатели на её span-ы и div, чтобы не искать их каждый раз.
Обновляет motion-область, то есть заполняет её контейнеры текстом текущей фразы.
Подключает функцию trackMotion в качестве слушателя событий начала каждого цикла анимации.
- В свою очередь та функция-слушатель будет просто обновлять motion-область следующей фразой на 5.585 секунде очередной итерации. Ведь в этой секунде анимации поворот текста наиболее приемлемый (направлен торцом к зрителю), чтобы незаметно сменить текст другим.

Кстати Фразы ваших текстов опишите один за другим в переменной phrases, как показано ниже. Количество фраз произвольное, а отдельная фраза может быть обычной строкой или объектом.

var phrases = [ 'We starts!',

                { text: 'Special offer',
                  info: 'A little description example.' },

                { text:  'Discount 15%',
                  color: 'magenta',
                  info:  'Another color example.'},

                { text:  'icon example',
                  color: 'gray',
                  info:  '<img src="example-icon.png" />' },

                { text:  'link example',
                  color: 'gray',
                  info:  'Read <a href="#">more</a> about this product.' } ];

var spans = null,
    infos = null,
    idx   = 0,
    busy  = false;

function getPhrase ( field ) {
    if (typeof phrases[idx] != 'object') {
        return field == 'text' ? phrases[idx] : '';
    }
    return field in phrases[idx] ? phrases[idx][field] : '';
}

function updateMotion () {
    var text  = getPhrase('text'),
        color = getPhrase('color'),
        info  = getPhrase('info');
    for (var i = 0; i < spans.length; i++) {
        spans[i].setAttribute('data-title', text);
        spans[i].setAttribute('class', color);
    }
    infos.innerHTML = info;
}

function nextPhrase () {
    idx++;
    if (idx >= phrases.length) { idx = 0; }
    updateMotion();
}

function prepareMotion () {
    var area = document.querySelector('.motion');
    if (area) {
        spans = area.querySelectorAll('span');
        infos = area.querySelector('div');
        updateMotion();
        spans[0].addEventListener('animationstart', trackMotion);
        spans[0].addEventListener('animationiteration', trackMotion);
    }
}

function trackMotion () {
    if (!busy) {
        busy = true;
        setTimeout(function () {
            nextPhrase();
            busy = false;
        }, 5585);
    }
}

CSS

Хотелось бы отметить, в нашем примере мы демонстрировали только motion-область, поэтому чтобы не усложнять код посторонней разметкой, на фон документа просто положили скриншот воображаемой страницы.

/* имитируем воображаемую страницу */
* {
    box-sizing: border-box;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    position: relative;
}
html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
body { background: #fff url('page-imitation.png') center top no-repeat; }

/* ========== motion-область ========== */
.motion {
    font-family: Verdana, Tahoma, Arial;
    margin: 35px auto;
    height: 480px;
    width: 640px;
    animation: suppressLag 8s infinite ease-in-out;
}

    /* краткое описание */
    .motion > div {
        color: #888;
        display: block;
        font-size: 30px;
        line-height: 1.5;
        width: 45%;
        text-align: center;
        position: absolute;
        top: 60%;
        left: 40%;
        animation: showInfo 8s infinite ease-in-out;
    }
        .motion > div img {
            border-radius: 4px;
            display: block;
            margin: 0 auto;
            max-height: 150px;
        }
        .motion > div a       { color: #08f; }
        .motion > div a:hover { color: #f80; }

    /* каждый span состоит из 2 слоёв */
    .motion > span {
        display: block;
        font-size: 45px;
        font-weight: bold;
        height: 50%;
        width: 75%;
        text-align: center;
        position: absolute;
        top: 40%;
        left: 25%;
    }
        .motion > span:before,
        .motion > span:after {
            color: #ccc;
            text-shadow: #fff 0 0 5px;
            content: attr(data-title);
            margin: 1px 0 0 1px;
            height: 100%;
            width: 100%;
            opacity: .2;
            position: absolute;
            top: 0;
            left: 0;
            animation: rotatePhrase 8s infinite ease-in-out;
        }
        .motion > span:before {
            margin: 0;
            opacity: .1;
        }

            /* остальные слои (от 3 до 10) сдвинуты и чуть ярче */
            .motion > span:nth-child(2)        { margin: 2px 0 0 2px; }
            .motion > span:nth-child(2):before { opacity: .3; animation-delay: 20ms; }
            .motion > span:nth-child(2):after  { opacity: .4; animation-delay: 40ms; }
            .motion > span:nth-child(3)        { margin: 4px 0 0 4px; }
            .motion > span:nth-child(3):before { opacity: .5; animation-delay: 60ms; }
            .motion > span:nth-child(3):after  { opacity: .6; animation-delay: 80ms; }
            .motion > span:nth-child(4)        { margin: 6px 0 0 6px; }
            .motion > span:nth-child(4):before { opacity: .7; animation-delay: 100ms; }
            .motion > span:nth-child(4):after  { opacity: .8; animation-delay: 120ms; }
            .motion > span:nth-child(5)        { margin: 8px 0 0 8px; }
            .motion > span:nth-child(5):before { opacity: .9; animation-delay: 140ms; }
            .motion > span:nth-child(5):after  { opacity: 1;  animation-delay: 160ms; }

        /* цвета верхнего слоя */
        .motion > span:nth-child(5):after     { color: #c22; }
        .motion > .red:nth-child(5):after     { color: #c22; }
        .motion > .green:nth-child(5):after   { color: #2c2; }
        .motion > .blue:nth-child(5):after    { color: #22c; }
        .motion > .cyan:nth-child(5):after    { color: #2cc; }
        .motion > .yellow:nth-child(5):after  { color: #cc2; }
        .motion > .magenta:nth-child(5):after { color: #c2c; }
        .motion > .black:nth-child(5):after   { color: #222; }
        .motion > .gray:nth-child(5):after    { color: #777; }
        .motion > .silver:nth-child(5):after  { color: #ccc; }

    /* анимация */
    @keyframes rotatePhrase {
        0%, 15% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        100%    { transform: rotateX(360deg) rotateY(360deg) rotateZ(-360deg); }
    }
    @keyframes showInfo {
        0%, 57%  { opacity: 1; }
        66%, 84% { opacity: 0; }
        100%     { opacity: 1; }
    }
    @keyframes suppressLag {
        0%, 65%   { opacity: 1; }
        73%       { opacity: 0; }
        88%, 100% { opacity: 1; }
    }

Недостатки

Поскольку функция trackMotion задействует метод setTimeout, точность времени которого не гарантирована, то на медленных компьютерах возможны лаги (запоздание) и текст фраз в отдельных случаях может меняться не в тот момент, как ожидалось.

Обсуждение

«Олег | 15 июн 23:51

Ну так а в чем польза сей крутилки на странице товара?

Ответить

«Oley | 17 июн 03:45

Выпендрится чтобы. Когда о товаре больше нечего сказать.

Ответить

«Максим | 17 июн 12:20

Демо как технарь освоил transform из css animation.
Был бы дизайнер анимация привлекла бы.
Изучите примеры на codepen. А вообще такое должен делать художник.

Ответить