Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 22.12.2018, 15:18   #1
architec
Новичок
 
Регистрация: 22.12.2018
Сообщений: 1
Репутация: 10
Вопрос Режим Cover у background

Есть на странице 4 изображения, размещенные по углам.
2018-12-22_14-02-46.jpg
Хочу добиться размещения всех картинок по углам. Сделать это не сложно.
Но вот на больших экранах картинки маленькие, на малых наоборот большие. А если экран портретный, то вообще картинки друг на друге...
Хорошо бы добиться примерно вот такого результата: http://gaze.tommusdemos.wpengine.com...tartup-tokyo/#

Т.е. не зависимо от размеров экрана, картинки всегда примерно по углам и масштабируются в зависимости от размеров и положения экрана.
Если эти картинки склеить в одно изображение в виде фонового и поставить cover для background, то все получается неплохо...

Причем картинки явно не только масштабируются, но и пропорционально смещаются от центра страницы...
Намучился с этим вопросом прилично! Но так и не смог реализовать пример по первой ссылке... И речь даже не про анимацию, а именно расположение картинок и их масштабирование.
Можно ли реализовать такой эффект на css или JS?

Последний раз редактировалось architec; 22.12.2018 в 15:33.
architec вне форума   Ответить с цитированием
Старый 04.01.2019, 22:54   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,785
Репутация: 2322
По умолчанию

Цитата:
Сообщение от architec Посмотреть сообщение
Можно ли реализовать такой эффект на css или JS?
Можно. Если через CSS, то смотри в сторону media-query и animate-keyframes. Если в JS — опять же media-query и какой-нибудь animate. Можно взять из jQuery или GSAP. Я обычно сам пишу. Для большинства браузеров лучше CSS-решение, для IE & edge лучше JS.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
1px cover Green4el HTML и CSS 1 16.10.2013 22:27
Не получается использовать "background" и "background-color" одновременно. shavedcat HTML и CSS 10 17.11.2012 21:04
background pavelslap HTML и CSS 2 14.01.2012 03:44
background onclick pavelslap HTML и CSS 2 11.05.2011 00:02
CSS Background bill HTML и CSS 1 28.10.2010 22:03


15:43.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru