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

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

Шаг 1. HTML

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

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

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

index.html

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

Шаг 2. CSS

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

assets/css/styles.css

Далее нам необходимо сгруппировать элементы трансформаций в единое, мы будем использовать .folder div.

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

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

Последним шагом будет реализация наклона открытия папки, реализовать это можно с помощью элемента rotateX.

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

Шаг 3. jQuery

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

assets/js/script.js

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

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