Создаем анимированную папку в стиле MacOSX
В последнее время основными тенденциями для сайта стали уникальные фишки, которые раньше не встречались на сайтах, идеи бывают достаточно разными, от убегающего меню, до изображений, которые можно самому разбросать по экрану, при этом они будут подчиняться всем законам физики. Не удивительно, что данные элементы притягивают взор посетителя, ведь ранее такого еще никто не делал. В данном уроке мы рассмотрим интересный способ реализации анимированной папки в стиле популярной системы MacOs.
В данном уроке реализована технология drop-and-drag, с помощью которой можно перетаскивать элементы в папку, кроме этого будет использован jQuery UI и 3D трансформации СSS3. И так, давайте приступим.
Шаг 1. HTML
Разметка упрощена по максимуму, мы добавляем стенки для папки.
1 2 3 4 |
<div class="folder"> <div class="front"></div> <div class="back"></div> </div> |
С данной разметкой, все понятно, никаких вопросов возникнуть не должно.
Внутри контейнера #main — папка и картинки, которые мы будем определять как draggables в использовании с jQuery UI.
index.html
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 |
<html> <head> <meta charset="utf-8" /> <!--Query UI Стили --> <link rel="stylesheet" href="http://jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <!-- Остальные стили --> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="main"> <div class="folder"> <div class="front"></div> <div class="back"></div> </div>? <img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" /> <!-- Больше иконок тут .. --> </div> <!-- JavaScript --> <script src="jquery-1.8.3.min.js"></script> <script src="ui/1.9.2/jquery-ui.js"></script> <script src="assets/js/script.js"></script> </body> </html> |
В конце документа подключаем jQuery библиотеку и jQuery UI, наряду с script.js файлом, о котором мы поговорить чуть позже.
Шаг 2. CSS
Для начала мы рассмотрим общие стили, которые необходимы для преобразования 3D эффектов.
assets/css/styles.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.folder { -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; position: absolute; top: 50%; left: 50%; z-index: 0; width: 160px; height: 120px; margin: -100px 0 0 -60px; } |
Далее нам необходимо сгруппировать элементы трансформаций в единое, мы будем использовать .folder div.
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 |
.folder div{ width:150px; height:115px; background-color:#93bad8; //Включение 3D пространства для трансформаций// -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; /* Включение гладкой анимированных переходов*/ -webkit-transition:0.5s; -moz-transition:0.5s; transition:0.5s; /* Отключение выделения текста для папки */ -webkit-user-select: none; -moz-user-select: none; user-select: none; position:absolute; top:0; left:50%; margin-left:-75px; } |
Далее нам необходимо реализовать активность папки, при котором она будет реагировать на передвижения значка, при этом происходит трансформация самой папки.
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 |
.folder .front{ border-radius:5px 5px 0 0; -moz-transform:rotateX(-30deg); -webkit-transform:rotateX(-30deg); transform:rotateX(-30deg); -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; transform-origin:50% 100%; background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%); background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%); background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%); box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset; z-index:10; font: bold 26px sans-serif; color: #5A88A9; text-align: center; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); line-height: 115px; } |
Здесь мы устанавливаем фон для передней крышки папки, и применим начальное вращение. Это оставляет заднюю крышку немного позади.
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 |
.folder .back{ background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%); background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%); background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%); border-radius:0 5px 0 0; box-shadow:0 -1px 1px rgba(0,0,0,0.15); } .folder .back:before{ content:''; width:60px; height:10px; border-radius:4px 4px 0 0; background-color:#93bad8; position:absolute; top:-10px; left:0px; box-shadow:0 -1px 1px rgba(0,0,0,0.15); } /* Тени */ .folder .back:after{ content:''; width:100%; height:4px; border-radius:5px; position:absolute; bottom:5px; left:0px; box-shadow:0 4px 8px #333; } |
Последним шагом будет реализация наклона открытия папки, реализовать это можно с помощью элемента rotateX.
1 2 3 4 5 |
.folder.open .front{ -moz-transform:rotateX(-50deg); -webkit-transform:rotateX(-50deg); transform:rotateX(-50deg); } |
Со стилями закончили, перейдем к последнему шагу.
Шаг 3. jQuery
Последним, но не менее важным шагом будет реализация технологии drag&drop для иконок, которые можно перетаскивать в папку, которая будет открываться с помощью трансформаций, которые мы рассмотрели в стилях.
assets/js/script.js
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 |
$(function() { var folder = $("#main .folder"), front = folder.find('.front'), img = $("#main img"), droppedCount = 0; img.draggable(); folder.droppable({ drop : function(event, ui) { // Удаления перетаскиваемых иконок ui.draggable.remove(); // Обновления контента front.text(++droppedCount); }, activate : function(){ // Когда пользователь начинает перетаскивать иконку folder.addClass('open'); }, deactivate : function(){ // Закрыть папку folder.removeClass('open'); } }); }); |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 04.12.2012 в 00:15, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |