Верстка + CSS анимация сайта

Есть готовый макет сайта для десктопной и мобильной версии в Figma, а также отдельные требования по реализации CSS анимации. 

Необходимо сверстать сайт, учитывая все требования и рекомендации.

Информация по сайту, которую нужно учитывать при верстке

Для всех страниц

1. 

Логотип сайта является ссылкой на главную страницу сайта, на всех страницах сайта, за исключением главной страницы. На главной странице ссылкой не является.

При клике по ссылкам навигации пользователь переходит в текущей вкладке на соответствующую страницу сайта.

При нажатии на кнопку Hire us в хедере, в текущем окне браузера появляется попап с формой заявки.

2. 

На всех основных страницах сайта (Главная, Услуги, О нас, Портфолио) на первом экране будет размещаться анимированная 3D модель, поверх которой будет написано название страницы.

3. 

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

При нажатии на Send в блоке Hire us, кнопка должна сузиться и приобрести форму квадрата, а затем из квадрата переформироваться в куб. После превращения, куб должен сделать несколько поворотов вокруг своей оси, а после вернуться в положение квадрата и расшириться до размеров попапа с текстом благодарности.

Есть видео в котором показана как это все должно работать, его можно посмотреть по этой ссылке: https://drive.google.com/drive/folders/1Wo1dDp6LSLYCuZ-c0fKKB5916A5P3Zse?usp=sharing 

4. 

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

Кубы должны быть в тех же цветах и текстурах, что использовались для 3D модели.

Фрагмент страницы с кубами: https://prnt.sc/unrpsh

5.

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

Как должна выглядеть анимация можно посмотреть по ссылке  https://drive.google.com/drive/folders/1XYvp9NNSkHdjv4EG5LS9u2sPCKbFWHxI?usp=sharing.

Куб нужно оформить в том же цвете и с той же текстурой, что использовались для оформления главной 3д модели.

Фрагмент страницы, где будет размещаться виджет на сайте: https://prnt.sc/uqe8cm

6.

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

7.

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

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

Важно: большой куб собирается всего один раз, то есть анимация будет зациклена с момента вылета маленьких кубов.

Есть видео пример, на котором показано, как это выглядит: https://drive.google.com/drive/folders/1YF4877m-0PwxrUbkOV2I_Qxi-TAgXR_o?usp=sharing но в конце этого ролика, большая фигура разлетается обратно. Такого быть не должно.

8.

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

На странице Home

1.

На экране с заголовком Services используемые иконки должны быть кнопками, при нажатии на которые осуществляется переход на соответствующую страницу в этой же вкладке браузера.

2.

На экране с заголовком Skills слева необходимо реализовать анимацию падающих с верхней части экрана 3д кубов, на которых будут изображены иконки программ и других систем, с которыми работает компания.

Есть демо видео, на котором отображена примерная анимация, но без скилов на кубах. 

Ссылка на видео: https://drive.google.com/drive/folders/1QjjrRzrYh5bylKThEuRMAxfzoHZNEfVL?usp=sharing

Также пример реализации подобной анимации можно посмотреть на сайте  https://geniusmarketing.me/pm/ в правой части экрана. Только в этом случае использовалась 2д графика, нас же интересует 3д.

Кубы должны быть в тех же цветах и текстурах, что использовались для 3D модели. В соотношении 85% серебро, 15% - медь.

Список скиллов: Laravel, Symfony, CakePHP, Git, Nodejs, Reactjs, Mangodb, WordPress, Shopify, Magento, WooCommerce, HTML5, CSS3, Bootstrap, GridSystems, HTML5 Boilerplate, JQuery, Angularjs, Photoshop, Figma, Adobe Illustrator, Adobe After Effects, Sketch.

3.

На экране Work кнопка See more должна открывать страницу Portfolio с отформатированным по типу работы кейсами (если кнопка была нажата под кейсом с веб разработкой, то переводить на портфолио с отобранными кейсами по веб разработке) в этой же вкладке браузера.

4.

На экране Reviews кнопка See case должна переводить на страницу кейса, о котором говорится в тексте отзыва, и открывать ее в этой же вкладке браузера.

На странице Services

1. 

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

Эта анимация должна срабатывать лишь в том случае, если пользователь наведет на мокап курсор мышки.

Есть пример реализации такой анимации, его можно посмотреть перейдя по ссылке: https://stealthmedia.com/web-design-portfolio/website-design/

Фрагмент страницы, на которой будут размещены мокапы: https://prnt.sc/uqea9n

2.

Кнопка See more осуществляет переход на страницу описания услуги в этой же вкладке браузера.

3.

При нажатии на кнопку Hire us, в текущем окне браузера должен появляться попап с формой заявки.

На странице Portfolio

1.

Кнопки Web design, Web development, Identity предназначены для сортировки кейсов. При нажатии на них перед пользователем должны открываться кейсы, соответствующие выбранной категории работы. Если пользователь не нажал ни на одну из кнопок, кейсы должны отображаться в произвольном порядке вперемешку.

2.

Появление обложек кейсов должно быть анимированным.

Какой должна быть анимация: каждую картинку необходимо разрезать на 4-5 вертикальных равных полосок, но не делать между ними оступ. Начальный кадр: пустой экран. Далее с того места, где должна размещаться верхняя граница изображения, поочередно полоски, из которых состоит изображение, начинают спускаться вниз до нижней границы, раскрывая картинку.

Как это должно выглядеть наглядно на примере нашего сайта видео нет. Однако пример реализации такой анимации можно посмотреть по ссылке: https://dribbble.com/shots/4618675-Geex-Arts

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

Страница галереи на сайте: https://prnt.sc/uqeb3h
 

3.

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

На странице About us

1.

На экране Our super team есть плитка состоящая из 6 одинаковых квадратов (3 квадрата в 2 ряда). В каждом ряду в двух квадратах размещены фотографии, а в оставшемся одном текст.

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

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

Реализованного примера анимации нет, но ее можно посмотреть по следующей ссылке: https://www.pinterest.com/pin/724657396282656970/?nic_v2=1a6vmSbVE (16 секунда на видео).

Текст, который нужно будет вставить: «We are ready to start working on your project».

Фотографии, которые нужно будет добавить отправлю исполнителю после начала работы.

Как выглядит окно Наша команда на сайте: https://prnt.sc/uqebvn

2.

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

3.

На экране meet us closer при нажатии на левую обложку поверх страницы должно открываться видео. При нажатии на правую обложку в новой вкладке браузера должен открываться пдф-файл с презентацией.

На странице кейса

На страницах кейса, в которых компания подробно рассказывает о проделанной работе над определенным проектом, должна быть анимация перелистывания между предыдущим и следующим кейсом.

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

При этом пользователю не нужно тянуть страницу до самого упора противоположной части экрана. Ему достаточно зажать стрелку и потянуть ее до определенной точки (например, до центра экрана).

Как это выглядит наглядно, к сожалению, примера нет.

Страница кейса на сайте: https://prnt.sc/uqedds

На странице 404

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

Также после появления кубов и цифр, на экране должна появиться надпись ops, page not found.

Кубы нужно оформить в том же цвете и с теми же текстурами, что и основная модель.

Есть пример, как должна выглядеть анимация, но без текстур: https://drive.google.com/drive/folders/1xc8b05IgP0EwR8nPZ-iLRw521620wWWV?usp=sharing 

В мобильной версии

На странице About us 

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

Должно получиться так (фото, фото, фото, текст, фото, фото, фото, текст).

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

Дизайн предоставлю после предварительного согласования всех нюансов с исполнителем. 

ПРОСЬБА ПИСАТЬ И ДЕЛАТЬ СТАВКИ ТОЛЬКО ПОСЛЕ ДЕТАЛЬНОГО ОЗНАКОМЛЕНИЯ С ТЗ!!!