Как верстать картинки?

Привет, как верстаете фон у интерактивных элементов? Например маокап для видосика или слайдера? Во вложении пример, как бы вы делали? Поставили с прозрачным центром в абсолютном позиционировании картинку? Заготовить мокап с равным процентным соотношением сторон, сделать отступы с overflow: hidden? Зафигачили бы ГИФкой?)) Вообщем какие есть решения для использования мокапов (фонов телефонов, ноутбуков, мониторов, планшетов) для интерактивных дисплеев? Я к слову не придумала ни чего лучше чем собрать фон с 15% от монитора отступами, кинуть его на фон дива и внутри с padding:15% крутить лонгскрин сайта через GSAP с ScrllMagic - есть более элегантные идеи?
5de8c11ae65bd595885632.gif
  • Вопрос задан
  • 993 просмотра
Решения вопроса 3
@DLeo13
Пожалуйста, поставьте вопрос чётче. Думаю, сейчас вы имеете один ответ из-за проблем с формулировкой.

В любом случае верстка под разные экраны предполагает собой использование адаптивных @ media запросов в css в комбинации с резиновой версткой на flex.

В консоли Google Chrome вы можете посмотреть адаптивность верстки под популярные и не очень популярные экраны, под windows, iOS и Android.
Ответ написан
@mr-troll
Основной принцип разработки - KISS - keep it simple .
Вы же сделали сами для гифку для примера, она вас не устраивает чем? Качество прекрасное, я вот с мобилки смотрю. Оптимизация проигрывания - во всех браузерах потрясающая. Даже coub.com долгое время используют гифки с аудиодорожкой (возможно сейчас для видео выдают, тем кто поддерживает, webp или webm, не суть). Лишнего оверхеда нет, блок рисуется браузером один раз, лишних репеинтов, и прочего, нет, памяти и процессора жрется, вы удивитесь, просто в разы меньше, чем любая анимация с блоками. Из минусов, понятно, не такой красочный мокап, как в пнг,всего 256 цветов и максимум 1 бит прозрачности.
Не хотите гиф, ну, тут вам уже сказали, что нет никаких проблем, в т.ч с адаптивной вёрсткой.
У вас есть блок мокапа, у которого всегда жесткое соотношение сторон (например 4x3). У вас есть блок "экран" с анимацией тоже жёстко заданного соотношения относительно мокапа. Не надо выдумывать, задайте размер и позиционирование абсолютно в процентах. Проценты всегда будут считаться от высоты и ширины родителя (мокапа). Проценты можно высчитать и задавать дробно. Например left:22.222222%.
Как верстать мокап адаптивно? Я бы использовал юнит vw. 1vw = 1% ширины всего экрана. Отличие в том что он применяется и к высоте. Хотите на всю ширину на мобиле мокап 4х3? Задайте width:100vw;height:75vw;.
И не надо js анимации использовать, всё равно не оптимизируете нормально - либо страшные интервалы, либо задолбаетесь рассчитывать requestaninationframe. Используйте css анимации, лонгскрин не надо делать картинкой, надо бекграундом.
2 блока (например сам див и :before), 2 файла изображения, от силы 15 строк css - примерно должно быть в итоге.
Если извратиться через background image - можно в 1 html элемент вообще, с анимацией и без скриптов, адаптивно, клёво.
Ответ написан
@GrekFromRussia
Насколько помню есть спец.величина, которая делит экран на равные части. em вроде. Как результат
padding:5em;
width:90em;
hight:90em;

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы