
Ноябрь 29, 2015 Запись была обновлена
Гибкий плагин 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)