Кто-нибудь знает, как заставить некоторые слова исчезать внутри div, когда пользователь прокручивает мышь, как на этом веб-сайте http://couleecreative.com/. В этом случае я хочу сделать эффект, например: "Привет, мы - крест". используя css3 или jquery, я действительно ценю это, если вы покажете мне. Прошу прощения, я любитель в веб-дизайне
Поскольку представленный вами пример постепенно меняет непрозрачность, я предлагаю решение, в котором выполняется вычисление на основе позиции прокрутки окна и позиции элемента, которую вы хотите скрыть. Например,
$(document).ready(function () {
var elemSelector = "#header-content";
$(window).scroll(function (e) {
var elemTop = $(elemSelector).offset().top;
var elemBottom = elemTop + $(elemSelector).height();
var windowPos = $(window).scrollTop();
if(windowPos>=elemTop){
$(elemSelector).css("opacity",(elemBottom-windowPos<0?0:elemBottom-windowPos)/elemBottom);
}else{
$(elemSelector).css("opacity",1);
}
});
});
Вы можете использовать:
$(window).scroll(fn)
для получения событий прокрутки для окна.
Вы можете проверить значение:
$(window).scrollTop()
чтобы увидеть, находится ли положение прокрутки вверху.
Затем вы можете использовать .hide()
или .show()
или другую опцию изменения размера, чтобы скрыть или показать содержимое на странице в зависимости от положения прокрутки.
Здесь упрощенный пример: http://jsfiddle.net/jfriend00/QZy55/
Я считаю, что этот метод называется Parallax Scrolling, есть несколько ресурсов, в которых есть примеры этого (если вы просто Google "Parallax Scrolling") и учебники, такие как этот: http://net.tutsplus.com/tutorials/html -css-технология/простой параллакс прокрутка-техник/