Exore LTD » jQuery » Гибкий плагин 3D Cube
Лого SiteHere.ru

Ноябрь 29, 2015 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Гибкий плагин 3D Cube

Плагин 3D Cube

Потрясающий плагин, с помощью которого можно создавать 3D кубики для разных целей. Например, в данном уроке с помощью этого плагина мы создадим 3D часы, которые можно настраивать просто поворачивая кубики мышкой. До Нового Года осталось совсем немного, но можно сделать отсчет используя кубики.

Возможно вас заинтересуют цифровые часы с неоновым свечением — CSS3 цифровые часы с помощью jQuery.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

Библиотеке HexaFlip создает свою разметку, а вам необходимо лишь добавить на страницу сайта:

1

    <div id="hexaflip-demo1" class="demo"></div>


CSS часть

Зададим стиль для кубиков:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

.hexaflip-cube {
    font-family: Arial, Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    display: inline-block;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    -o-transition: -o-transform 0.4s;
    -ms-transition: -ms-transform 0.4s;
    transition: transform 0.4s;
}
 
.hexaflip-cube.no-tween {
    -webkit-transition-duration: 0;
    -moz-transition-duration: 0;
    -o-transition-duration: 0;
    -ms-transition-duration: 0;
    transition-duration: 0;
}
 
.hexaflip-cube > div {
    width: 100%;
    overflow: hidden;
    height: 100.5%;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    text-align: center;
    background-color: #333;
    color: #fff;
    font-weight: 100;
    text-shadow: 0 -2px 0 rgba(0,0,0,0.2);
    line-height: 1.5;
}
 
.hexaflip-left,
.hexaflip-right {
    background-color: #555 !important;
}
 
.hexaflip-timepicker .hexaflip-cube:last-child > div:nth-child(odd) {
    background-color: #ff575b;
}


Javascript часть

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

    var hexaDemo3;
    document.addEventListener('DOMContentLoaded', function(){
        hexaDemo3 = new HexaFlip(document.getElementById('hexaflip-demo3'));
 
        // функция, которая устанавливает время
        setTimeout(function(){
            // получаем настоящее время в переменную now
            var now = new Date, 
            // получаем часы
            hour = now.getHours(),
            // получаем минуты
            minute = now.getMinutes().toString(),
            meridian;
 
            // ниже идет проверка на am и pm
            if(hour > 12){
                hour = (hour - 12).toString();
                meridian = 'pm';
            }
            else{
                meridian = 'am';
                (hour === 0) && (hour = 12);
                hour = hour.toString();
            }
 
            // если минута состоит из одной цифры, тогда впереди добавляем ноль
            if(minute.length > 1){
                minute = minute.substr(0, 1) + '0';
            }
            else{
                minute = '00';
            }
 
            hexaDemo3.setValue({ hour: hour, minute: minute, meridian: meridian });
        }, 1);
 
        // выбранные часы с помощью выпадающего списка
        var hourSelect = document.getElementById('hour-select'),
        // выбираем минуты с помощью выпадающего списка
        minuteSelect = document.getElementById('minute-select'),
        // выбираем am или pm вид отображения времени
        meridianSelect = document.getElementById('meridian-select');
 
        document.getElementById('set-button').addEventListener('click', function(){
            var time = {
                hour: hourSelect.value,
                minute: minuteSelect.value,
                meridian: meridianSelect.value
            }
            hexaDemo3.setValue(time);
        });
    }, false);


Вывод

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


Успехов!

Источник: tympanus.net

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *