Сегодня мы бы хотели поделиться с вами экспериментальным слайд-шоу. Идея основана на большой навигационной концепции с сайта Wild, где можно посмотреть проекты в полноэкранном режиме или в режиме карусели. Есть множество методов, которые бы позволили реализовать подобное, но мы попытаемся воссоздать это слайд-шоу с помощью библиотеки Dragdealer.js и 3D-преобразования. Основная идея заключается в переводе ползунка по оси Z, что позволит ему быть либо в полноэкранном режиме, либо в уменьшенном размере карусели. При переключении фактический размер слайд-шоу и удаление преобразования, когда они больше не нужны, позволит слайд-шоу иметь "реальный" размер (т.е. 25% от окна). 

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

Мы используем CSS переходы, CSS анимации, созданные с помощью bounce.js и анимаций SVG с помощью Snap.svg. Мы также используем шрифт Font Awesome и профиль изображений из Random User Generator.

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

Примеры используют JavaScript и Canvas для создания различных анимаций header’а. Каждый пример использует свой собственный файл JavaScript, но каждый из них имеет сходство. 

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

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

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

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

Иногда мы задаёмся вопросом, как упаковать все эти возможные действия, которые у нас есть в один конкретный UI. Для кнопок выпадающего меню есть, конечно, много всяческих возможностей. Другая идея заключается в использовании взаимодействия при перетаскивании элемента. Сегодня мы хотим поделиться с вами некоторыми идеями такого рода взаимодействий. Идея состоит в том, чтобы позволить перетаскивать некий элемент, а затем показать некую droppable область, которая бы отвечала за определённые действия. Это сэкономит много места в UI и даст интересную динамику взаимодействий.

Область применения может быть самой различной, например:  категоризации и организации контента.