Задать вопрос

Как сделать адаптивный блок?

Доброго времени суток. Дело в том что мне позарез необходимо понять как на сайте "paganini.com.ua" сделан первый блок. Все что мне очень хочется узнать:

1. Как позиционируется логотип в центре экрана(блока)?
2. Как сделать такую адаптивную фотографию? Ты можешь отскролить масштаб хоть 25%, а картинка будет неизменна, или экран меньше сделать.
3. Как сделать такую шапку как там? В том плане что когда человек начинает скролить, эта шапка скролится, а в дальнейшем фиксируется вверху экрана.

Там как то этот блок занимает весь экран, до момента когда человек начинает скролить. Как это все реализовать?

Да, я знаю что сайт очень старый но мне позарез необходимо понять эти вопросы.
Помогите разобраться с устройством этого блока.
Заранее спасибо за помощь.
  • Вопрос задан
  • 634 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Когда хотите разобраться с каком-то сайтом / блоком / кодом.
Берите и используйте консоль разработчика, она для этого и придумана.
В браузерах, как правило, вызывается клавишами CTRL+SHIFT+I.


По всем пунктам отвечать подробно лень, поскольку тут вообще всё элементарно.

Вкратце.
1. Можно абсолютным позиционированием (position: absolute;), можно через транформацию (transform: translate;).
2. Самый простой способ: через CSS - background: url('...') 50% 50% / cover no-repeat

По 3-му пункту пример можно посмотреть тут https://jsfiddle.net/webirus/99qfLkbo/
Вчера делал только для другого ответа.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
alvvi
@alvvi
export default apathy;
Вы, конечно, будете разочарованы, на на этом сайте лого позиционированно абсолютно никак, поскольку оно является частью слайдов. (т.е. банально наложено в фотошопе на слайды)
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Не стоит ориентироваться на этот сайт ибо он сделан как попало. Логотип прямо в картинках, как Вам и написал Илья Ростопка: paganini.com.ua/wp-content/uploads/2013/07/Paganin...
Если хотите так сделать, но хорошо, возьмите адаптивный слайдер типа fotorama.io и наложите поверх логотип с абсолютным позиционированием.
Ответ написан
Комментировать
Krasnodar_etc
@Krasnodar_etc
fundraiseup
1) Никак. Это не лого, а надпись на всех фотках одинаковая
2)
position: relative;
left: 50%;
transform: translateX(-50%);
(там та же схема, только на JS)
3) Гуглите: "jquery scrolltop"
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы