@Comsequent
Пишу потихоньку.

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

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

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

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

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

PS Я понимаю, что большинство приутствующих не читает на иврите. Сайт д.б о кофе; кофемолки, кофеварки и все связанное с этим продуктом
PSS Если выскажете просто, общее ощущение от страницы ,или грубые ошибки верстки, буду длагодарен)
  • Вопрос задан
  • 288 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
На счет шрифта, для @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`);
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы