LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Создаем анимированные часы/таймер при помощи CSS и jQuery

Таймер

В этой статье, мы расскажем вам, как создать красочные и анимированные jQuery/CSS часы в стиле “Halo”, которые помогут вам следить за драгоценным временем.

Шаг 1 – XHTML

Как обычно, мы начинаем с разметки XHTML. Хитрость состоит в том, что XHTML не содержится в demo.html, но динамически вставляется в страницу с помощью jQuery.

Это избавляет нас от необходимости вручную вводить блоки кода для каждого из циферблатов (их у нас три: для часов, минут и секунд). В этом разборе кода мы будем предполагать, что дисплеи у наших часов будут трех разных цветов, но в демо-версии я упростил все до одного цвета. Просто мне так больше нравится! ))

Давайте взглянем на XHTML, который вставляется jQuery:

<!-- Первый класс (зеленый в данном случае) выделяется динамически -->
<div class="green clock"</div>

<!-- Этот div хранит значение единиц, - секунд, минут или часов -->
<div class="display"></div>

<!-- Черная область, которая скрывает основной фон -->
<div class="front left"></div>

<!-- Левая часть фона: -->
<div class="rotate left">
<div class="bg left"></div>
</div>

<!-- Правая часть фона: -->
<div class="rotate right">
<div class="bg right"><div id="fcbg"></div></div>
</div>

</div>

Этот код содержится в jquery.tzineClock / jquery.tzineClock.js. Он генерируется три раза: первый для часов, второй для минут, и третий для секунд. Затем, они анимируются и обновляются каждую секунду.

Существуют три класса, которые присваиваются самому верхнему контейнеру в процессе генерации – зеленый, синий и красный. Мы меняем цвет циферблата путем присвоения того или инного класса.

Переходим к следующему шагу…

Таймер 2

Шаг 2 – CSS

Прежде, чем наши стили будут иметь какое либо влияние на страницу, мы должны включить их в head часть нашего файла:

demo.html

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />

Эти строки кода, импортируют styles.css и jquery.tzineClock.css на страницу. Первый, стилизует демо страницу, а второй, красочные циферблаты (они являются частью плагина).

Теперь мы можем более внимательно взглянуть на правила CSS:

styles.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Простой сброс страницы */
    margin:0;
    padding:0;
}

body{
    /* Установка по умолчанию цвет текста, фона и шрифта */
    color:#fff;
    font-size:13px;
    background: #222;
    font-family:Arial, Helvetica, sans-serif;
}

#fancyClock{
    height:200px;
    width:600px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -300px;
}

Это все, что необходимо для стилизации демо страницы. Сначала, мы делаем простой сброс CSS, который будет гарантировать, что элементы на странице выглядят одинаково в разных браузерах.

Затем, мы стилизуем body страницы и fancyClock div, в который, мы позже вставим три циферблата. Также центрируем его на экране за счет абсолютной позиции и смещения величины margin.

jquery.tzineClock.css

.clock{
    /* .clock div Динамически создан jQuery */
    background-color:#222;
    height:200px;
    width:200px;
    position:relative;
    overflow:hidden;
    float:left;
}

.clock .rotate{
    /* Есть два .rotate divs - один для каждый половины фона-подложки */
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
}

.rotate.right{
    display:none;
    z-index:11;
}

.clock .bg, .clock .front{
    width:100px;
    height:200px;
    background-color:#222;
    position:absolute;
    top:0;
}

.clock .display{
    /* Содержит число секунд, минут или часов */
    position:absolute;
    width:200px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    z-index:20;
    color:#F5F5F5;
    font-size:60px;
    text-align:center;
    top:65px;
    left:0;

    /* CSS3 text shadow: */
    text-shadow:4px 4px 5px #333333;
}

/* Левая часть бэкграунда */

.clock .bg.left{ left:0; }

/* Индивидуальная стилизация каждого цвета : */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(img/bg_blue.png) no-repeat left top; }

/* Правая часть бэкграунда */
.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
    left:0;
    z-index:10;
}
#fcbg{ background:url(img/bg_grey.png)
repeat-x; width:600px;height:200px;z-index:11;position:absolute;}

jquery.tzineClock.css является частью нашего плагина (наряду c jquery.tzineClock.js) и он стилизирует красочные циферблаты . Контейнер #fcbg является нашей подложкой под циферблаты и показывает границы циферблата.

Одним из наиболее интересных моментов, является использование отдельных правил для стилизации цвета циферблатов.

Шаг 3 – jQuery

Перенос всего JavaScript в плагин делает очень легким повторное использование кода, и в то же время позволяет нам использовать возможности jQuery селекторов и методов.

Чтобы была возможность использовать jQuery библиотеку, мы сначала должны, включить пару скриптов в страницу:

demo.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tzineClock/jquery.tzineClock.js"></script>
<script type="text/javascript" src="script.js"></script>

Первым файлом, является сама библиотека, включена из Google CDN. Затем, у нас есть плагин и скрипт-файл, который запускает демо.

script.js

$(document).ready(function(){
    /* Этот код выполняется после того, как DOM был полностью загружен */

    $('#fancyClock').tzineClock();

});

Давайте копнём немного глубже в плагин:

jquery.tzineClock.js – Часть 1

(function($){
    // Глобальный объект используемый функцией плагина:
    var gVars = {};

    // Продление основы jQuery:

    $.fn.tzineClock = function(opts){

        // "this" содержит элементы, которые были выбраны при вызове плагина:
	$('elements').tzineClock();
        // Если селектор вернул более одного элемента, мы используем первый:
        var container = this.eq(0);
        if(!container)
        {
            try{
                console.log("Invalid selector!");
            } catch(e){}

            return false;
        }

        if(!opts) opts = {};

        var defaults = {
            /* Дополнительные опции будут добавлены в будущих версиях плагина. */
        };

        /* Слияние предоставленых параметров с параметрами по умолчанию,
(будет использоваться в будущих версиях плагина): */

        $.each(defaults,function(k,v){
            opts[k] = opts[k] || defaults[k];
        });

        // Вызов функции setUp и передача container,
        // будет доступна для setUp функции, как "this":

        setUp.call(container);

        return this;
    }

    function setUp()
    {
        // Цвета циферблата:
        var colors = ['orange','blue','green'];

        var tmp;
        for(var i=0;i<3;i++)
        {
            // Создание нового элемента и установка цвета, как имя класса:

            tmp = $('<div>').attr('class',colors[i]+' clock').html(
                '<div class="display"></div>'+
                '<div class="front left"></div>'+
                '<div class="rotate left">'+
                '<div class="bg left"></div>'+
                '</div>'+
                '<div class="rotate right">'+
                '<div class="bg right"></div>'+
                '</div>'
            );

            // Присоединение к fancyClock контейнеру:
            $(this).append(tmp);

            // Назначение некоторых элементов как переменных, для скорости:
            tmp.rotateLeft = tmp.find('.rotate.left');
            tmp.rotateRight = tmp.find('.rotate.right');
            tmp.display = tmp.find('.display');

            // Добавление циферблата, как глобальной переменной.
Будет доступна в качестве gVars.colorName
            gVars[colors[i]] = tmp;
        }

        //Настройка интервала, выполняемого каждые 1000 миллисекунд:
        setInterval(function(){

            var currentTime = new Date();
            var h = currentTime.getHours();
            var m = currentTime.getMinutes();
            var s = currentTime.getSeconds();

            animation(gVars.green, s, 60);
            animation(gVars.blue, m, 60);
            animation(gVars.orange, h, 24);
        },1000);
    }

Создание плагина для jQuery сводится к определению пользовательской функцию с помощью метода jQuery.fn. Таким образом, ваша функция доступна на любых элементах, которые вы обычно используете на jQuery.

Например, в script.js, мы выбираем div ширину id fancyClock и используем tzineClock () метод: $ (‘# FancyClock’) tzineClock ();. Элементы, которые мы выбрали, позже передаются tzineClock функции и доступны через “this” свойство.

Поскольку, там может быть выбран более чем один элемент, мы извлекаем только первый из множества с помощью eq(0) метода. Позже, у нас есть setUp() функция, которая вставляет разметки для циферблатов и настраивает интервал, который будет обновлять цифры каждую секунду.

jquery.tzineClock.js – Часть 2

function animation(clock, current, total)
    {
        // Расчет текущего угла:
        var angle = (360/total)*(current);

        var element;

        if(current==0)
        {
            //Скрытие правой половины background:
            clock.rotateRight.hide();

            // Сброс вращения левой части:
            rotateElement(clock.rotateLeft,0);
        }

        if(angle<=180)
        {
            // Левая часть вращается, а правая, в настоящее время, скрыта:
            element = clock.rotateLeft;
        }
        else
        {
            // Первая часть вращения завершен, поэтому начинает вращаться
правая часть:
            clock.rotateRight.show();
            clock.rotateLeft.show();

            rotateElement(clock.rotateLeft,180);
            element = clock.rotateRight;

            angle = angle-180;
        }

        rotateElement(element,angle);

        // Настройка текста внутри элемента, вставки нуля, если необходимо:
        clock.display.html(current<10?'0'+current:current);
    }

    function rotateElement(element,angle)
    {
        // Вращение элемента, в зависимости от браузера:
        var rotate = 'rotate('+angle+'deg)';

        if(element.css('MozTransform')!=undefined)
            element.css('MozTransform',rotate);

        else if(element.css('WebkitTransform')!=undefined)
            element.css('WebkitTransform',rotate);

        // Версия для Internet Explorer с помощью фильтров, работает,
но немного с багами:

        else if(element.css("filter")!=undefined)
        {
            var cos = Math.cos(Math.PI * 2 / 360 * angle);
            var sin = Math.sin(Math.PI * 2 / 360 * angle);

            element.css("filter","progid:DXImageTransform.Microsoft.Matrix
(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',
FilterType='nearest neighbor')");
            element.css("left",-Math.floor((element.width()-200)/2));
            element.css("top",-Math.floor((element.height()-200)/2));
        }
    }
})(jQuery)

Последние две функции, используемые плагином, это animation и rotateElement. Первая функция обновляет циферблат, в соответствии с переданными значениями (мы также передаем параметр с максимальным значением, для того, чтобы функция могла вычислить вращение).

Вторая функция – вращает переданный элемент. Вращение работает только для Firefox, Safari, Chrome и IE6 +. Internet Explorer не поддерживает CSS3 rotation, используемый другими браузерами, но предоставляет фильтр, который позволяет сделать подобное преобразование.

На этом, наши красочные часы jQuery готовы! Высоких вам конверсий! 

10 марта 2016

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".