Супер папка Mac OSx с анимациями на CSS3 и JQuery | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSСупер папка Mac OSx с анимациями на CSS3 и JQuery
Дата: 12.07.2013 в 23:50 | Просмотров: 2749

Супер папка Mac OSx с анимациями на CSS3 и JQuery

папка mac os, эффекты css
Скачатьбесплатно с сервера
Демодемонстрация

В этом коротком уроке мы собираемся сделать папку Mac OSx на CSS3, используя 3D трансформацию, градиент, тени и другие эффекты css. Кроме того, мы собираемся использовать JQuery UI и его свойство перетаскивания, чтобы построить довольно интерактивный вид.

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

HTML разметка

Разметка для создания анимационной папки очень проста – нам нужно всего два элемента DIV, т.е. передняя и задняя часть папки, в которую будут перетаскиваться элементы:

В идеале, мы должны свести стили css к минимуму, поэтому в зависимости от псевдо элементов :before и :after добавим мелкие детали. Смотрите рисунок ниже для примера.

эффекты css, анимационная папка

Внутри DIV с классом #main мы поместим саму папку и значки, которые мы будем устанавливать, с использованием JQuery UI. Подключаемые скрипты:

Теперь давайте обсудим наиболее важную часть – css стилизация.

CSS стили

Для начала, мы будем заниматься папкой с классом folder. Для этого же элемента, мы задаем эффекта 3D CSS анимации.

После этого, мы будем стилизовать div с классом front и back, которые вместе составляют целостную папку. Я сгруппировал правила, что эти элементы имеют общий блок folder div:

Я использую свойство анимации transition, Это приведет к тому, чтобы папки будет плавным, когда мы начинаем перетаскивание одной из иконок. Далее идет DIV с классом front:

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

Все, что осталось, это определение класса open. Когда этот класс добавляется, передняя часть папки будет наклонена в результате увеличенного значения rotateX.

Отлично! Теперь поработаем с jquery, чтобы это все у нас заработало.

JQuery

Как уже упоминалось выше, мы используем скрипт JQuery UI перетаскивания & падения, чтобы позволить пользователю перемещать иконки. Когда пользователь перемещает иконку, мы будем применять к папке класс open, который вызывает переход CSS3.

Заключение

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

Пробуйте, экспериментируйте! Если у вас получилось что-то интересное – дайте мне знать! ;)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com/2012/12/mac-osx-animated-folder-css3/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Александр:
      @

      Здравствуйте!

      Для чего это может пригодиться на сайте?

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

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

Добавить комментарий