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

 

Для получения такого эффекта мы будем использовать случайные картинки с сервиса Instagram, о котором мы писали ранее, и библиотеки Box2D которая имитирует возможности физики. Следует заметить, для того чтобы выводились у вас случайные картинки с сервиса Instagram вам необходимо зарегистрироваться и получить код разработчика на developer console. И так, приступим.

Шаг 1. HTML

Для начала мы рассмотрим разметку, на самом деле все элементарно просто. У нас есть некоторые стили CSS, подключенные в шапке, и некоторые JS файлы в подвале (JQuery с двумя плагинами, и script.js файл, о котором мы расскажем чуть позже).

index.html

Фотографии будут включены в #gallery div и #gravityButton который вызывает JQuery плагин гравитации.

Шаг 2. jQuery

Мы рассмотрим параметры скрипта,в котором приводятся параметры включения гравитации, а также ваш клиент-ID и Ваш ACCESS Token из сервиса Instagram.

assets/js/script.js

Последним шагом будет активация плагина по клику на gravityButton #.

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

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