web-dev-qa-db-fra.com

jquery fade out div avec page scroll

J'essaie de faire disparaître une sortie lorsque la page défile vers le bas (avec le défilement de page - et pas seulement avec un effet de fondu). J'ajuste l'opacité de la div lorsque la page défile à l'aide de ce code ici:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
        $('.logo_container').css({'opacity':( 100-scroll )/100});
});

Mon problème ici est que pour moi cela s’efface trop vite, je voudrais un fondu beaucoup plus subtil lorsque l’utilisateur défile. Quelqu'un peut-il penser à une meilleure logique pour faire disparaître en fondu un fondu plus lent et plus lent?.

voici un JSFIDDLE montrant mon code en action

jquerycssopacityscrolltop
6
Sam Skirrow

Cela fonctionne très bien avec ce VIOLON avec une logique très simple. Utilisé ce morceau de jquery pour le faire fonctionner:

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();

    $('.logo_container, .slogan').css({
        'opacity': ((height - scrollTop) / height)
    }); 
});

(height - scrollTop)/height donne un ensemble de valeurs qui est forme linéaire 1 à 0.

Exemple:

height = 430px et scrollTop = 233px.

(height - scrollTop)/height donnera l'opacité environ 0,45.

17
Kunjan Thadani

Solution A

jQuery animer

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    $('.logo_container, .slogan').stop().animate(
        {opacity: (( 180-scroll )/100)+0.1},
        "slow"
    );
});

Solution B

Transition CSS

.wrapper {
    height:1000px
}
.logo_container {
    background:red;
    width:250px;
    height:500px;
    position:relative;
    margin:0px auto;
    transition: opacity 1s ease;
}
2
Tymek

amélioration de la solution en modifiant cette partie ( 1000-scroll )/1000

JSFIDDLE

j'espère que ça aide

0
Nima Derakhshanjan