Создаем анимированную папку в стиле MacOSX

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В данном уроке реализована технология drop-and-drag, с помощью которой можно перетаскивать элементы в папку, кроме этого будет использован jQuery UI и 3D трансформации СSS3. И так, давайте приступим.

Шаг 1. HTML

Разметка упрощена по максимуму, мы добавляем стенки для папки.

<div class="folder">
 <div class="front"></div>
 <div class="back"></div>
</div>

</div>

С данной разметкой, все понятно, никаких вопросов возникнуть не должно.

Внутри контейнера #main — папка и картинки, которые мы будем определять как draggables в использовании с jQuery UI.

index.html

<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>

<html>

<head>

</head>

<body>

</div>?

</div>

</body>

</html>

В конце документа подключаем jQuery библиотеку и jQuery UI, наряду с script.js файлом, о котором мы поговорить чуть позже.

Шаг 2. CSS

Для начала мы рассмотрим общие стили, которые необходимы для преобразования 3D эффектов.

assets/css/styles.css

.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 {

-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.

.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;
}

.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;

}

Далее нам необходимо реализовать активность папки, при котором она будет реагировать на передвижения значка, при этом происходит трансформация самой папки.

.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;
}

.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;

}

Здесь мы устанавливаем фон для передней крышки папки, и применим начальное вращение. Это оставляет заднюю крышку немного позади.

.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;
}

.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.

.folder.open .front{
 -moz-transform:rotateX(-50deg);
 -webkit-transform:rotateX(-50deg);
 transform:rotateX(-50deg);
}

.folder.open .front{

-moz-transform:rotateX(-50deg);

-webkit-transform:rotateX(-50deg);

transform:rotateX(-50deg);

}

Со стилями закончили, перейдем к последнему шагу.

Шаг 3. jQuery

Последним, но не менее важным шагом будет реализация технологии drag&drop для иконок, которые можно перетаскивать в папку, которая будет открываться с помощью трансформаций, которые мы рассмотрели в стилях.

assets/js/script.js

$(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');
 }
 });
});

$(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');

}

});

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Создаем анимированную папку в стиле MacOSX

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. jQuery

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Создаем анимированную папку в стиле MacOSX

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. jQuery

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи