• Главная»
  • Уроки»
  • CSS»
  • Концепция дизайна персональной страницы разработчика/дизайнера

Концепция дизайна персональной страницы разработчика/дизайнера

demosourse

Экспериментальная страница для разработчика/дизайнера со специальным эффектом для главного изображения.

Сегодня мы бы хотели поделиться с вами экспериментальной наработкой. Тематика страницы: портфолио разработчика/дизайнера, в котором применяются различные анимационные эффекты. В демонстрационном примере вы сможете заметить “глитч” эффект, который применяется к тексту и портрету. При переключении на режим “разработчика” в левом нижнем углу, произойдёт смена изображения.

Для реализации анимации использовалась библиотека anime.js от Julian Garnier. Портрет взят с Unsplash.com. Также некоторые элементы анимированы через Charming.js от Yuan Qing.

Изображение разработчика было создано с помощью генератора Text-Image.com.

Внимание: в данном примере используются современные технологии CSS Flexbox и 3D Transforms.

В демонстрационном примере вы сможете увидеть несколько режимов отображения.

Изначально страница отображается в режиме “дизайнера”. Иногда на портрете появляются небольшие квадраты:

При наведении мыши на кнопку “Work with me link” портрет будет разделён на две части. Первая половина от режима дизайнера, вторая от разработчика.

При смене режима, портрет заменится другим изображением.

Надеемся, что данный пример будет вам полезен!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://tympanus.net/codrops/2017/04/18/developerdesigner-page-layout-concept/
Перевел: Станислав Протасевич
Урок создан: 18 Апреля 2017
Просмотров: 6536
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^