Comment puis-je changer mon fond sur faites défiler à l'aide de CSS?

Mon site web a LE PARFAIT FULL PAGE IMAGE d'arrière-plan. J'ai saisi le code de css astuces.

Si vous visitez mon site vous pouvez le voir en action.

Ce que je voudrais savoir c'est, est-il possible que je puisse avoir ce changement d'image pour une image différente une fois que vous faites défiler une certaine longueur?

Mon but est d'avoir la même image mais avec une bulle de sortir les chiens de la bouche et je devine que les 2 images de ce faire.

Est-ce possible de le faire en CSS uniquement??????

Voici le code que j'utilise actuellement.

html { 
background: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Essayez avec de la parallaxe.
Vérifier mon répondre à partir d'une question similaire.
même question avec jquery solution
Je ne pense pas que c'est possible de le faire avec CSS. Je ne pense pas qu'il existe un moyen de détecter le scrollTop' à partir de ou la "visibilité" d'un élément sans javascript.
J'ai pensé que beaucoup. Ce qui serait le mieux? Vais-je avoir à sacrifier le "parfait plein de fond de page" pour le faire?

OriginalL'auteur rob_towner | 2013-07-11

  1. 11

    Que les autres ont déjà dit, Nop, vous ne pouvez pas seulement avec CSS, mais un peu js code peut le faire pour vous.

    Ex.

    jQuery(window).scroll(function(){
    var fromTopPx = 200; //distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('html').addClass('scrolled');
    }else{
        jQuery('html').removeClass('scrolled');
    }
});

    Et dans votre fichier CSS:

    html {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

html.scrolled {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

    Donc, fondamentalement, vous êtes l'ajout ou la suppression d'une classe à l' HTML tag à une certaine distance à partir du haut avec javascript (jQuery dans ce cas)... et avec CSS, changer cette image.

    De maintenant.. vous pouvez appliquer des transitions de l'image, ou de jouer avec le code à fait slideToggle par exemple, au lieu de changer la classe.... et beaucoup d'autres options.

    Bonne chance

    EDIT:
    Violon exemple: http://jsfiddle.net/pZrCM/

    wow. merci pour cet homme!
    serait-il facile d'ajouter plus d'images qui allait changer à dire 400 et 700 pixels?
    Si c'est easy or not n'est pas le problème... Vous devez trouver ce que vous voulez faire et comment, et puis, trouver le meilleur système pour le faire. Donc, si vous voulez un très grand portrait photo, il suffit de faire défiler vers le bas et vous verrez... Ou ajouter plus de photos et vous allez avoir le même effet. MAIS... La façon dont nous parlons ici avec jQuery Interagit avec la page, selon les mouvements de l'utilisateur (défilement dans ce cas) littéraire changes an object style properties la modification du DOM.
    Oublié le previus commentaire, j'ai mal compris la question. Oui, C'est très facile, suffit d'ajouter un peu plus de if elseif else à la scroll function.
    Ok, la base background-image changement quant à la position de travail dans votre exemple (merci), mais est-il un moyen de le faire fonctionner sous IE? Je sais, c'est une question stupide, mais je pose la question. En fait, il travaille dans IE (8 au moins), mais à chaque fois que le changement se produit (au-dessus de 200px dans l'exemple ci-dessus), l'écran (ou, plus probablement l'élément qui a la commutation de contexte) clignote. De toute façon de raconter, c'est à dire (peut-être) de précontrainte à l'arrière-plan? Ou peut-être l'aide d'un petit fichier d'arrière-plan? Merci

    OriginalL'auteur gmo