Как сделать сделать плавную смену элементов на фоне без перезагрузки?

Question

[Sodasss]

Доброго времени суток, уважаемые знатоки, хочу научиться создавать переходы с 3D элементами, что бы при переходе на другую страницу, элементы плавно сменялись, а при взаимодействии с другими элементами, как на пример, при нажатии на кнопки меню, сменяется расположение элемента. В. голову пришло сразу barba.js и greensock, но нашел примеры, просто бесшовных переходов с "прелоудерам", можете, пожалуйста, подсказать статьи, видео или ресурсы, где можно почитать, как это реализовывается ? Дуду очень благодарен, если сможете подсказать ресурсы где можно изучить это !
Для примера, сайт и на фоне спираль ДНК
https://abiturient.ssmu.ru/en/

Answer 1

[Алексей Илларионов]

Не совсем понятно, что конкретно вы имеете в виду ) В вашем примере на фоне - просто цикличное видео. Уточните задачу.

Comments

[Sodasss]

Это не видео, попробуйте перейти на другие вкладки или нажать на бургер меню радом с "About SibMed"

[Алексей Илларионов]

Sodasss, да, посмотрел. Ну, конкретно в данном случае это можно было бы сделать просто увеличением видео, transform: scale )
А вообще, то, о чём вы говорите, состоит из 3 технологий:
1. Отрисовка 3D в браузере.
2. Абсолютное или фиксированное CSS-позиционирование.
3. Javascript-интерактивность.

1. Отрисовка 3D в браузере.
Это реализуется с помощью технологии WebGL, который рисует в теге canvas 3D-элементы. Есть очень классная библиотека three.js, с помощью которой легко можно работать с 3D.

2. Абсолютное или фиксированное CSS-позиционирование.
С помощью этого вы можете размещать элементы как угодно на странице (подробно).

В общем, вы размещаете 3D на canvas, задаёте ему position: fixed или absolute и отлавливаете действия пользователя и в зависимости от них что-то делаете с 3D.

[Sodasss]

superalesha, ООО, точно, Спасибо !