Fondu de texte lorsque la page défile

J'ai cet exemple de base de travail:

http://www.mharrisweb.co.uk/tester.htm

Est-il de toute façon je peux obtenir la décoloration de texte à faire défiler légèrement, afin de créer une plus fluide tranisiton?

Comme sur ce site:

http://themetrust.com/demos/hero/

Merci beaucoup

Je poste la réponse dans jsfiddle veuillez vérifier
L'exemple de base lien est rompu, pouvez-vous jsfiddle le code?

OriginalL'auteur Bomber | 2013-02-03

  1. 3

    utilisation cette

    var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});
    Qui fonctionne très bien, est-il de toute façon je peux fondu arrière lorsque vous faites défiler vers le haut de la page?

    OriginalL'auteur

  2. 3

    Juste manipuler les marges du texte comme vous l'avez fait de l'opacité.

    Exemple:

    jQuery(function($) {
    var divs = $('.fade');
    $(window).on('scroll', function() {
        var st = $(this).scrollTop();
        divs.css({ 
            'margin-top' : -(st/3)+"px", 
            'opacity' : 1 - st/35
        }); 
    });
});
    Parfait merci beaucoup!
    cela a fonctionné génial. merci

    OriginalL'auteur Gustavo Hoirisch

  3. 0

    Utiliser ceci:

    http://api.jquery.com/animate/

    Il vous permet de douceur, de déplacer un élément d'un donné les coordonnées, vous pouvez déterminer à l'aide de:

    http://api.jquery.com/scrollTop/

    Aussi, vous aurez besoin de ceci:

    http://api.jquery.com/fadeTo/

    Il vous permet de vous à s'estomper pour un particulier de transparence, au lieu de tout le chemin à une totale transparence. Vous en aurez besoin si vous voulez ressembler "themetrust.com" l'exemple que vous avez donné, si vous remarquez que si vous ne faites défiler un peu, il ne s'estompe un peu

    OriginalL'auteur leftclickben

  4. 0

    Ici est quelque chose qui combine un peu les idées déjà discuté.

    $(window).scroll(function(){
    var top = ($(window).scrollTop() > 0) ? $(window).scrollTop() : 1;
    $('.fade').stop(true, true).fadeTo(0, 1 / top);
    $('.fade').css('top', top * 1.3);             
});

    jsfiddle

    OriginalL'auteur Ruben Infante