Концепция дизайна персональной страницы разработчика/дизайнера
Экспериментальная страница для разработчика/дизайнера со специальным эффектом для главного изображения.
Сегодня мы бы хотели поделиться с вами экспериментальной наработкой. Тематика страницы: портфолио разработчика/дизайнера, в котором применяются различные анимационные эффекты. В демонстрационном примере вы сможете заметить “глитч” эффект, который применяется к тексту и портрету. При переключении на режим “разработчика” в левом нижнем углу, произойдёт смена изображения.
Для реализации анимации использовалась библиотека 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
Просмотров: 6662
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.