Как сделать паралакс эффект для картинки и текст + решить проблему проблему со шрифтами?

Question

[Comsequent]

Прошу здорой критики и помощи.
Сайт https://icoffee.netlify.com/
Выдалось два свободных дня и решил вот сделать заготовку, для себя, для души. Так я, ни разу не дизайнер, идей надергал с миру по нитке. Все перелиновывалось и редактировалось не раз и не два. Кроме прочего захотел попробовать сделать паралакс эффект в хидере.

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

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

Особо интересно мнение господ Ankhena и @xmoonlight

PS Я понимаю, что большинство приутствующих не читает на иврите. Сайт д.б о кофе; кофемолки, кофеварки и все связанное с этим продуктом
PSS Если выскажете просто, общее ощущение от страницы ,или грубые ошибки верстки, буду длагодарен)

Comments

[Kovalsky]

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

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

"Если выскажете просто, общее ощущение от страницы" - херовое довольно ощущение, всё ведь на иврите, ничего не понятно. А если серьезно, то вроде бы кроме прыгающей менюшки в хэдере всё остальное норм. Ну не самый интересный дизайн, почти веб1.0, но в целом это можно интерпретировать как строгий минимализм

Это конечно очень трогательно, что вы вручную собираете стили, но вы бы сэкономили миллион часов времени если бы пользовались например SCSS, серьезно.

А про параллакс я не понял. Вы лучше сначала оформите параллакс хоть как-то, а потом уже приходите с проблемой.

Глупости не по теме

"в хидере" - в хэдере
Анна Ankhena скорее дама, мне кажется

[Comsequent]

Kovalsky,

"в хидере" - в хэдере

прошу прощения за акцент...

Анна Ankhena скорее дама

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

[Ankhena]

Comsequent,
Про технические вопросы вам уже ответили.

Критиковать дизайн и картинки я не хочу, но скажу про вертикальные отступы. Хочется побольше воздуха.

[Comsequent]

Ankhena,

Критиковать дизайн и картинки я не хочу

Жаль...

про вертикальные отступы. Хочется побольше воздуха

Спасибо, обязательно сделаю

Answer 1

[Александр]

На счет шрифта, для @font-face добавляем font-display: swap;, для установки шрифта*, body { ... }, и там где еще необходимо, font-family: 'Ваш шрифт', дефолтные шрифты; (

font-family: 'Assistant', 'Segoe UI', Arial, Helvetica, sans-serif;

). Таким образом, будет отображен первый доступный шрифт, а после загрузки - Ваш.

UPD:
На счет красивого хэдера, можно сделать так:

const header = document.querySelector('.header');
const maxHeight = window.innerHeight;
const minHeight = 150;

window.addEventListener('scroll', () => {
    const height = Math.max(minHeight, maxHeight - window.scrollY);

    header.style.setProperty('height', `${height}px`);
});

Comments

[Comsequent]

@Seasle

const header = document.querySelector('.header');
const maxHeight = window.innerHeight;
const minHeight = 150;

window.addEventListener('scroll', () => {
    const height = Math.max(minHeight, maxHeight - window.scrollY);

    header.style.setProperty('height', `${height}px`);
});

Спасибо.
Нечто подобное я исполнил. В консоли, мой вариант, работает изумительно. Но, после применения стиля к хидеру, на половине высоты экрана скролл отказался работать.
Ещё раз, Спасибо!