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

Question

[Илья Ватрушка]

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

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

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

Да, я знаю что сайт очень старый но мне позарез необходимо понять эти вопросы.
Помогите разобраться с устройством этого блока.
Заранее спасибо за помощь.

Answer 1

[Сергей Горячев]

Когда хотите разобраться с каком-то сайтом / блоком / кодом.
Берите и используйте консоль разработчика, она для этого и придумана.
В браузерах, как правило, вызывается клавишами CTRL+SHIFT+I.

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

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

По 3-му пункту пример можно посмотреть тут https://jsfiddle.net/webirus/99qfLkbo/
Вчера делал только для другого ответа.

Answer 2

[alvvi]

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

Answer 3

[Максим Тимофеев]

Не стоит ориентироваться на этот сайт ибо он сделан как попало. Логотип прямо в картинках, как Вам и написал Илья Ростопка: paganini.com.ua/wp-content/uploads/2013/07/Paganin...
Если хотите так сделать, но хорошо, возьмите адаптивный слайдер типа fotorama.io и наложите поверх логотип с абсолютным позиционированием.

Answer 4

[Егор Живагин]

1) Никак. Это не лого, а надпись на всех фотках одинаковая
2)

position: relative;
left: 50%;
transform: translateX(-50%);

(там та же схема, только на JS)
3) Гуглите: "jquery scrolltop"