Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Разделение Экрана и Анимирование (https://javascript.ru/forum/css-html/65211-razdelenie-ehkrana-i-animirovanie.html)

bwinqcom 04.10.2016 14:23

Разделение Экрана и Анимирование
 
Вложений: 1
Пример находиться на сайте ВВС США https://www.airforce.com/
Конкретно меня интересует анимация при нажатии на кнопку.
Область делиться на 5 ровных областей, при этом с анимацией и адаптацией к разрешению, либо растягиваются либо сжимаются
Очень хочется подробно узнать как это реализовано

Rise 04.10.2016 15:28

Крутой сайт не как у некоторых...

Coriolan161 04.10.2016 16:07

bwinqcom,
Слушай тут ничего сложного в принципе и нет
1) Анимация - создаешь класс анимации для блоков и через var anim = setInterval каждому блоку вешаешь этот класс. Потом clearInterval(anim)
2) Событие window.onresize
3) Ширина каждого блока - 100% делить на пять в css. или flex

Coriolan161 04.10.2016 16:07

bwinqcom,
И на нокауте сделано)))

рони 04.10.2016 16:17

:write: блок на весь экран и 5 блоков нулевой высоты, по кнопке на боди класс "анимате" и большой блок исчез , 5 блоков выросли и никаких onresize и setInterval, сплошное css

Coriolan161 04.10.2016 18:13

рони,
молодец:thanks:


Часовой пояс GMT +3, время: 00:04.