Анимация хедера при скролле?

Question

[Джон Голт]

Подскажите решения, как можно написать примерно такой красивый анимированный хедер, как здесь www.hellolumio.com/#hello

Answer 1

[Марк]

Вот очень простой пример кода: jsfiddle.net/JJ8Jc/3234

Answer 2

[Андрей Б.]

в гугле решений полным полно.
используй scrollTop()

Answer 3

[Ilya Korablev]

Посмотрите.
Это, конечно, не совсем то, но я думаю, что можно изменить.
И еще.

Answer 4

[Анна Бакурова]

Вопрос поставлен не чётко. но сама суть реализации такова: при скролле до определённого расстояния добавляем класс шапке, а у этого класса стили другие + transition для плавности

Если не хотите заморачиваться с js то вот плагин
Пользоваться так
(function($){
$(window).load(function() {
$('body').libriscrollpage({
element: $('.b-header')
});
});
})(jQuery);

Плагин присваиваем элементу к которому нужно добавлять классы и удалять
В опции element находится элемент который меняет положение относительно верха (в данном случае шапка)
Если Вам нужно шапке присвоить класс и её же отслеживать (как в примере Вашем) то element указывать не нужно, просто инициализируете плагин

Далее к элементу что присвоили плагин нужно добавить дата атрибуты
data-offset-top - должен содержать расстояние в пикселях или название класса элемента при скролее до которого переключаются заданные классы
data-remove-class - должен содержать класс который нужно добавить при скролле до заданного расстояния (если не задавать, то по умолчанию 'active')
data-remove-class - должен содержать класс который нужно удалить при скролле на заданное расстояние (если не задавать, то по умолчанию 'noActive')

Будут проблемы пишите

Comments

[Анна Бакурова]

Только по ссылке перепишите код себе, не ссылайтесь на ресурс, а то Я позже перемещу код