Супер папка Mac OSx с анимациями на CSS3 и JQuery
↓ Также Вам будет интересно ↓
В этом коротком уроке мы собираемся сделать папку Mac OSx на CSS3, используя 3D трансформацию, градиент, тени и другие эффекты css. Кроме того, мы собираемся использовать JQuery UI и его свойство перетаскивания, чтобы построить довольно интерактивный вид.
Данная концепция, я думаю, может пригодиться Вам для создания, например, юзабельных админ панелей, создания корзины или чего либо ещё (всё ограничивается лишь фантазией).
HTML разметка
Разметка для создания анимационной папки очень проста – нам нужно всего два элемента DIV
, т.е. передняя и задняя часть папки, в которую будут перетаскиваться элементы:
1 2 3 4 |
<div class="folder"> <div class="front"></div> <div class="back"></div> </div> |
В идеале, мы должны свести стили css к минимуму, поэтому в зависимости от псевдо элементов :before и :after добавим мелкие детали. Смотрите рисунок ниже для примера.
Внутри DIV
с классом #main
мы поместим саму папку и значки, которые мы будем устанавливать, с использованием JQuery UI. Подключаемые скрипты:
1 2 3 |
<script src="/jquery-1.8.3.min.js"></script> <script src="/ui/1.9.2/jquery-ui.js"></script> <script src="/web-developer/css/assets/js/script.js"></script> |
Теперь давайте обсудим наиболее важную часть – css стилизация.
CSS стили
Для начала, мы будем заниматься папкой с классом folder
. Для этого же элемента, мы задаем эффекта 3D CSS анимации.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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; } |
После этого, мы будем стилизовать div
с классом front
и back
, которые вместе составляют целостную папку. Я сгруппировал правила, что эти элементы имеют общий блок 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 |
.folder div{ width:150px; height:115px; background-color:#93bad8; -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; } |
Я использую свойство анимации transition
, Это приведет к тому, чтобы папки будет плавным, когда мы начинаем перетаскивание одной из иконок. Далее идет DIV
с классом front
:
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 33 |
.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); } /* The top part */ .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); } /* The shadow */ .folder .back:after{ content:''; width:100%; height:4px; border-radius:5px; position:absolute; bottom:5px; left:0px; box-shadow:0 4px 8px #333; } |
Все, что осталось, это определение класса open
. Когда этот класс добавляется, передняя часть папки будет наклонена в результате увеличенного значения rotateX
.
1 2 3 4 5 |
.folder.open .front{ -moz-transform:rotateX(-50deg); -webkit-transform:rotateX(-50deg); transform:rotateX(-50deg); } |
Отлично! Теперь поработаем с jquery, чтобы это все у нас заработало.
JQuery
Как уже упоминалось выше, мы используем скрипт JQuery UI перетаскивания & падения, чтобы позволить пользователю перемещать иконки. Когда пользователь перемещает иконку, мы будем применять к папке класс open
, который вызывает переход CSS3.
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) { // Remove the dragged icon ui.draggable.remove(); // update the counters front.text(++droppedCount); }, activate : function(){ // When the user starts draggin an icon folder.addClass('open'); }, deactivate : function(){ // Close the folder folder.removeClass('open'); } }); }); |
Заключение
Это здорово, что так много можно сделать с помощью CSS3 без особых усилий. Но это может быть еще круче – вы можете использовать этот эффект, чтобы пользователи могли загружать файлы просто перетаскивая их в окно браузера на Ваш сайт.
Пробуйте, экспериментируйте! Если у вас получилось что-то интересное – дайте мне знать!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
@
Здравствуйте!
Для чего это может пригодиться на сайте?
/
Применений может быть масса, особенно на проектах, где применяется загрузка файлов, или что-то подобное.