Достигните летать / исчезать в тексте на свитке

Question

Достигните летать / исчезать в тексте на свитке

0

Я ищу, чтобы получить текстовый эффект, используемый на этой странице в разделе "Созданный для творчества", где текст скользит и исчезает при прокрутке, как бы я это сделал? См. Эту страницу: http://www.fiftythree.com/pencil

Также хочу сделать эту работу на мобильном телефоне.

Благодарю!

Matt 30 нояб. 2013, в 03:47

Источник

0

Не могу увидеть анимацию в моем браузере: S
Mark S 30 нояб. 2013, в 05:26
0

Они не работают на мобильном телефоне, если вы используете мобильный ...
Matt 30 нояб. 2013, в 05:31
0

Ах, это параллакс прокрутка. Это метод, при котором фоновые изображения движутся медленнее, чем у содержащего элемента. Вы можете проверить это простое руководство, чтобы начать работу. Простая техника прокрутки параллакса
Mark S 30 нояб. 2013, в 10:47
0

Нет, я говорю о самом тексте. Не изображения.
Matt 01 дек. 2013, в 04:41
0

Понимаю. Я разместил ответ ниже, проверьте, может ли это помочь вам.
Mark S 01 дек. 2013, в 09:07

Показать ещё 3 комментария

Теги:

jquery

scroll

text

1 ответ

Ещё вопросы

Не могу увидеть анимацию в моем браузере: S
Они не работают на мобильном телефоне, если вы используете мобильный ...
Ах, это параллакс прокрутка. Это метод, при котором фоновые изображения движутся медленнее, чем у содержащего элемента. Вы можете проверить это простое руководство, чтобы начать работу. Простая техника прокрутки параллакса
Нет, я говорю о самом тексте. Не изображения.
Понимаю. Я разместил ответ ниже, проверьте, может ли это помочь вам.

Mark S · Answer 1 · 2013-12-01T06-42-00.000Z

На scroll() получите значение scrollTop() окна, затем сравните с top position() элементов position(). Если scrollTop() больше, чем top position некоторых элементов, примените анимацию/затухание.

Если у вас есть такая разметка.

<div>
    <section>First</section>
    <section>Second</section>
    <section>Third</section>
    <section>Fourth</section>
    <section>Fifth</section>
</div>

Это решение:

$(window).scroll(function(){
var st = $(this).scrollTop(),
    winH = $(this).height(),
    /* you can set this add, 
    depends on where you want the animation to start
    for example if the section height is 100 and you set add of 50,
    that means if 50% of the section is revealed 
    on the bottom of viewport animate text
    */
    add = 150;

$('section').each(function(){
    var pos = $(this).position().top;

    if(st + winH >= pos + add){
        $(this).stop().animate({opacity:1, marginTop:10},'fast');
    }else{
        $(this).stop().animate({opacity:0, marginTop:0},'fast');
    }
});
});

Смотрите этот jsfiddle