Библиотека Anime.js для анимации объектов в HTML и в SVG с красивой документацией. Поддерживаются простые движения, параметрические, различные циклы и привязка к таймлайну.

Пример результата в gif-анимации.

Живой код этого примера.

Новостной сайт «Медуза» рассказала в своём блоге какой стала система управления редакции к 2017 году. Иными словами, как выглядит CMS у интернет-СМИ.

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

Подобный рассказ о первой версии системы был опубликован в 2015 году.

Комбинация кода для всплывающих блоков при прокрутке. Блоки, попавшие в видимость при загрузке, видны сразу, без анимации. Но можно специально попросить их появиться классом .slide-up-start.

Для наглядности, горизонтальные блоки повёрнуты контейнером и обратно повёрнуты содержимым. Ещё тут интересное использование :nth-of-type, чтобы в несколько строк разнообразить задержку в анимации и раскраску контейнеров.

Из чего состоит код веб-страницы, которую загружает пользователь, сегодня?

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

Легко заметить, что основное содержимое кода это навигация, интеграция с соцсетями и счётчики.

Исторический сложилось, что принципы указания размеров элементов веб-страницы в стилях CSS были сформированы при небольших, по сегодняшним меркам, разрешениях экранов. При этом в CSS приняты к использованию несколько различных систем измерения: привязанные к размерам пикселя px, к пропорциям браузера % и к размера шрифта em и pt. Чтобы не связываться с этим историческим наследием можно использовать современные возможности стилей.

Чтобы быстро адаптировать сайт к высоким разрешениям, не переделывая ничего кардинально, следует в стилях CSS на всеохватывающий тэг HTML поставить увеличение с помощью последовательных диапазонов media queries.

@media (min-width: 4200px) and all {
html{zoom: 3;}
}

@media (min-width: 3500px) and (max-width: 4199px) {
html{zoom: 2.5;}
}

@media (min-width: 2800px) and (max-width: 3499px) {
html{zoom: 2;}
}

@media (min-width: 2000px) and (max-width: 2799px) {
html{zoom: 1.5;}
}

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

Способ стоит использовать только на вёрстке не рассчитанной на высокие разрешения. Свойство zoom поддерживается сегодня практически всеми современными браузерами.