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

Question

[bxspb]

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

Comments

[alex]

bxspb, а если сделать видеозахват с экрана, открыв сайт в нужном разрешении через режим адаптивного дизайна в девтулзах браузера, и потом все это дело приготовить в каком-нибудь видеоредакторе и на выходе получить .gif например?

[bxspb]

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

[dom1n1k]

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

[bxspb]

dom1n1k, ну наложите, просветите.
я как пример по проще изначально написала, вот реальный, есть где то на сайте блок, в зависимости от стилей он может менять свой размер и скорее всего свое соотношение сторон, где то в этом блоке нужно сделать фон, и у этого фона НЕ ПО ЦЕНТРУ, а с каким то смещением есть область 16:9 , размеры которой соответственно меняются в зависимости от устройства, есть лонгскрол, причем не прямой а с изгибом, вот хочу прокатить этот лонг сверху вниз и направо по этой области, плавно, красиво, без гифок или видосов, и при этом ЕСТЕСТВЕННО сохранить адаптивность, ни о каких PX речи быть не может.

Блестните знаниями

[bxspb]

dom1n1k, и да, дырочку вырезать нельзя на картинке что играет роль фона, надо вот на нее, точнее на прямоугольник на ней наложить div с overflow:hidden, а в нем уже катать ваш лонгскрин, как в общем то я и делаю, и раньше думала что это я тупая, и нихрена не умею, но судя по комментам не все так плохо.

[dom1n1k]

bxspb, вам стоит начать с конкретизации ТЗ (причем не для нас, а именно для себя). Четко прописать (или выяснить у дизайнера) что и как должно себя вести. Вот вы пишете:
- "скорее всего свое соотношение сторон" - всё-таки нужно сохранять соотношение сторон или нет? это важно.
- "НЕ ПО ЦЕНТРУ, а с каким то смещением есть область 16:9" - с каким смещением? ведь должен быть какой-то желаемый алгоритм позиционирования этого блока на словах?
- что должно происходить, если внешний блок сжимается слишком сильно? есть ли у него какие-то ограничения?
- что такое лонгскролл с изгибом?

Потому что в такой расплывчатой постановке задача действительно выглядит сложно. Но если всё конкретизировать и наложить разумные ограничения - я думаю, решится относительно просто.
Например, в чем проблема позиционировать ваш блок 16:9 абсолютно с отступами от одного угла в процентах?
Как сохранять соотношение сторон - погуглите "css aspect ratio".
Внутри внутреннего блока делаете overflow hidden с скролите его скриптом как угодно и в любую сторону.

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

[bxspb]

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

Answer 1

[Leo]

Пожалуйста, поставьте вопрос чётче. Думаю, сейчас вы имеете один ответ из-за проблем с формулировкой.

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

В консоли Google Chrome вы можете посмотреть адаптивность верстки под популярные и не очень популярные экраны, под windows, iOS и Android.

Answer 2

[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 элемент вообще, с анимацией и без скриптов, адаптивно, клёво.

Comments

[bxspb]

Спасибо ,

Например left:22.222222%.
Как верстать мокап адаптивно? Я бы использовал юнит vw. 1vw = 1% ширины всего экрана. Отличие в том что он применяется и к высоте. Хотите на всю ширину на мобиле мокап 4х3? Задайте width:100vw;height:75vw;.

- это вот прям по делу, остальное к ответу на вопрос "какой формат для анимации мне использовать и как оптимизировать дизайн?" но такого вопроса не было ;)

Используйте css анимации, лонгскрин не надо делать картинкой, надо бекграундом.

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

Используйте css анимации

это как без js привязать таймлайн анимации к скроллу? Я чего то не знаю? ))

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

мне мало интересны посетители со старыми нокиями )) Реально спасибо за ответ, есть полезная инфа

[mr-troll]

Сделал два простых примера, с адаптивностью:
https://usabili.ru/labs/mockup/ собственно зацикленная анимация
https://usabili.ru/labs/mockup/onscroll.html - js анимация привязанная к скролу окна.

> это как без js привязать таймлайн анимации к скроллу? Я чего то не знаю? ))

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

> мне мало интересны посетители со старыми нокиями
> на сафари анимация смещения бекграунда часто дерганая при быстром скролле

мне мало интересны посетители со старыми iphone 11 pro =) я с компа сижу, тут и аппаратное ускорение, и прочие фишки. Тем не менее, чтобы у вас в сафари анимация не лагала, надо понимать как она устроена и что тормозит. У реального пользователя (как я) на айфончике или, там, самсунге, будет открыть 40 вкладок в браузере, и 20 приложений - музыка, мессенджеры и прочее. Поэтому ресурсы чтобы обрабатывать вашу анимацию будут очень ограничены. Поэтому надо профилировать. Например в хроме в девтулз открыть вкладку performance - выбрать там cpu 6x slowdown и посмотреть. Если в анимации будет ~60fps - то всё хорошо.

[bxspb]

mr-troll,

новые подробности постоянно всплывают

я писала

крутить лонгскрин сайта через GSAP с ScrllMagic

,

Интересно как бы вы анимацию гифки прокручивали по скролу

- ну сиквенцию ни кто не отменял, даже эпл этим грешат на новых эирподсах

https://usabili.ru/labs/mockup/onscroll.html - js анимация привязанная к скролу окна.

- Рекспект, все четко, могете, практикуете))

будет открыть 40 вкладок в браузере, и 20 приложений - музыка, мессенджеры и прочее

не будут, это рабочие планшеты, там онли сафари в режиме киоска и одна вкладка

Answer 3

[GrekFromRussia]

Насколько помню есть спец.величина, которая делит экран на равные части. em вроде. Как результат

padding:5em;
width:90em;
hight:90em;

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

Comments

[bxspb]

Спасибо за ответ, как узнать в em отступы от края до "экрана" на фоне?

[GrekFromRussia]

bxspb, element = document.getElementById('id');
И дальше свойства которые нужно узнать можно записать в отдельную переменную
margin = window.getComputedStyle(element).margin;
Если же задано через html

element = document.getElementById('id');
margin = element.style.margin;

Вроде так

[bxspb]

GrekFromRussia, о, да, кстати реально вариант. Попробую

[bxspb]

GrekFromRussia, интересно, а можно через js получить число. на сколько процентов изменилась ширина картинки от оригинала в текущем положении? Что то гугл мягко послал.

[DimaIs]

bxspb, Можете попробовать вот это решение, правда, нужно точно знать, какие начальные значения ширины и высоты

$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
    });
});

[Leo]

Em это относительная величина к шрифту.
https://learn.javascript.ru/css-units

В JS достаточно получить элемент из document и посмотреть его offsetWidth.