(CSS) Faire une image d'arrière-plan de défilement plus lent que tout le reste

voici mon code CSS pour le corps:

body {
  padding: 0;
  margin: 0;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-color: grey; 
  background-size: 100%;
}

Ce que je veux faire, c'est de faire en sorte que l'image défile plus lent que tout le reste sur la page pour faire un simple effet de parallaxe. J'ai regardé en ligne et tous les exemples que j'ai vu sont beaucoup plus compliqué que ce que je veux.

Pas possible avec les CSS.
cela aidera à github.com/pederan/Parallax-ImageScroll mais il n'est pas possible avec les css comme tout le monde dit

InformationsquelleAutor | 2015-03-24

67

Je suis tombé sur ce que la recherche de plus de flexibilité dans mon parallaxe de vitesse que j'ai créé avec de la pure CSS et je veux juste faire remarquer que tous les ces gens sont mauvais et qu'il est possible avec de la pure CSS Il est également possible de contrôler la hauteur de votre élément de mieux.

Vous devrez probablement modifier votre DOM/HTML un peu pour avoir quelques éléments conteneurs, dans votre cas, vous êtes en application de l'arrière-plan pour le corps qui va limiter beaucoup et ne semble pas être une bonne idée.

http://keithclark.co.uk/articles/pure-css-parallax-websites/

Ici est de savoir comment vous le contrôle de la hauteur avec Fenêtre d'affichage de pourcentage de la longueur basé sur la taille de l'écran:

https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
```
  .forefront-element {
    -webkit-transform: translateZ(999px) scale(.7);
    transform: translateZ(999px) scale(.7);
    z-index: 1;
  }

  .base-element {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .background-element {
    -webkit-transform: translateZ(-999px) scale(2);
    transform: translateZ(-999px) scale(2);
    z-index: 3;
  }
```
Couche de la vitesse est contrôlée par une combinaison de la perspective et de la Z les valeurs de traduction. Éléments négatifs avec les valeurs Z défiler plus lentement que ceux avec une valeur positive. Plus la valeur est de 0 le plus marqué l'effet de parallaxe (c'est à dire translateZ(-10px) fera défiler plus lentement que translateZ(-1px)).

Voici une démo je l'ai trouvé avec une recherche sur google parce que je sais qu'il y a beaucoup de non-croyants là-bas, ne jamais dire impossible:

http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
- Je tenais à préciser que ce n'est pas une bonne solution si vous êtes inquiet au sujet de la compatibilité du navigateur. Sur la dernière version de Firefox/Chrome de la rédaction de ce document, il y a une barre blanche qui s'affiche à gauche de chaque conteneur. Aussi, sur Chrome, les éléments d'arrière-plan apparaissent très floue. Tandis que l'effet se produit, l'aspect visuel n'a pas encore de comparaison de JS solutions, et par conséquent, cette pure CSS solution ne fonctionne pas.
- Aussi cette modifiant le défilement de l'effet des appareils mobiles. i:e l'iPad et l'iPhone ne pourra pas continuer le défilement lorsque vous relâchez la touche qui se sent collant. Toutefois, contrairement à Jquery parallaxe techniques, cela fonctionne dans tous les navigateurs y compris safari.
InformationsquelleAutor Neo

vous pouvez utiliser quelque chose de simple comme ici:
html:

Mouvement

css:

body {

  min-height:4000px;
  background-image: url("http://www.socialgalleryplugin.com/wp-content/uploads/2012/12/social-gallery-example-source-unknown-025.jpg");
}

h1 {margin-top:300px;}

js:

(function(){

  var parallax = document.querySelectorAll("body"),
      speed = 0.5;

  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

      el.style.backgroundPosition = elBackgrounPos;

    });
  };

})();

Ici est jsfiddle

Y aurait-il une possibilité de quitter l'arrière-plan horizontal de placement intact? J'utilise ce pour un héros de l'image que j'ai besoin de coup de pouce autour avec background-position en fonction de la taille de l'écran. Sinon, excellente solution!

InformationsquelleAutor Piotr Ciszewski

Si vous souhaitez appliquer une haute image d'arrière-plan, l'utilisation de ce JS:

(function () {
        var body = document.body,
                e = document.documentElement,
                scrollPercent;
        $(window).unbind("scroll").scroll(function () {
            scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
            body.style.backgroundPosition = "0px " + scrollPercent + "%";
        });
})();

c'est très simple et fonctionne très bien. aussi unlikepure css solutions qu'elle n'est pas floue et terrible de la recherche. +1

InformationsquelleAutor Valentin Seehausen

D'accord qu'il n'est pas possible, juste avec les css, parce que vous avez à calculer l'image et de document rapport hauteur.
J'aime aussi cet effet, c'est pourquoi créé fonction simple qui ne fait que cela. Voici la fonction et de son appel sur l'événement scroll:

JS:

$(window).on('scroll', function() {
smoothBackgroundScroll("relative/image/url");
});
function smoothBackgroundScroll(imgsrc) {
function loadImageHeight(url, width) {
var img = new Image();
img.src = url;
if (width) {
img.width = width;
}
return img.height;
}
var dh, wh, ih, st, posy, backh, backw;
if (!this._smoothBackgroundScroll) {
var bcksize = $(document.body).css('background-size');
var bmatch = /(\w+)\s*(\w+)/.exec(bcksize);
if (!bmatch || bmatch.length < 3) {
backh = loadImageHeight(imgsrc)
} else {
backh = parseInt(bmatch[2]);
if (isNaN(backh)) {
backw = parseInt(bmatch[1]);
backh = loadImageHeight(imgsrc, parseInt(backw));
}
}
this._smoothBackgroundScroll = {
dh: $(document).height()
, wh: $(window).height()
, ih: backh
}
}
dh = this._smoothBackgroundScroll.dh;
wh = this._smoothBackgroundScroll.wh
ih = this._smoothBackgroundScroll.ih;
st = $(document).scrollTop();
posy = (dh - ih) * st / (dh - wh);
document.body.style.backgroundPosition = 'center ' + posy + 'px';
}

Vous pouvez le trouver ici avec l'exemple et explication visuelle de ce qui se passe vraiment avec l'image et de document:

Lisse défilement de l'image d'arrière-plan

Pas vrai, il a été possible avec les CSS depuis des années. Voir ici

InformationsquelleAutor Vuk Djapic

Je me rends compte que c'est une vieille question, cependant, j'ai récemment tombé sur ce problème moi-même et a passé beaucoup de temps à essayer de trouver le meilleur code de travail. Tout ce que j'ai trouvé était soit trop compliqué ou ne fonctionne pas sans la traîne beaucoup, surtout dans google Chrome. Comme souligné par d'autres, le problème ne peut être résolu par pur CSS, mais j'ai fait mon propre simple AngularJS directive pour résoudre le problème:

app.directive("paraBack", ['$window', function ($window) {
return function(scope, element, attrs) {
element.css("background-image", "url("+attrs.paraBack+")"); //Apply the background image with CSS
element.css("background-attachment", "fixed"); //Disable background scrolling
var max = Infinity;
var image = new Image(); //Create a JavaScript image so that the code below can be run when the background is loaded
image.src = attrs.paraBack;
image.onload = function () {
max = image.height - window.innerHeight; //Stop scrolling after the bottom of the picture is reached
var xOffset = -(image.width/2-window.innerWidth/2);
element.css("background-position-x", xOffset+'px'); //Horizontally align the background
}
var scrollHandler = function () {
var offset = Math.floor(this.pageYOffset*0.1); //Set background to scroll at 10% of scrolling speed
if (offset<max) {
element.css('background-position-y', '-'+offset+'px'); //If not the bottom of the image is reached, move the background (scroll)
}
};
angular.element($window).on('scroll', scrollHandler); //Set the defined scrollHandler function to be ran when user scroll
scope.$on('$destroy', function () {
angular.element($window).off('scroll', scrollHandler); //Unbind the function when the scope is destroyed
});
};
}]);

Il peut être utilisé dans le code html comme ceci:

<body para-back="url/to/image">

Si vous voulez voir un exemple de ce à quoi ça ressemble, vous pouvez visiter cette page.

InformationsquelleAutor tjespe

Je sais que c'est très tard, mais je me demandais si il ne serait pas plus simple que le code ci-dessus et investi 15 minutes de ma vie.

Voici mon code:

JS:

document.getElementById("body").onscroll = function myFunction() {  
var scrolltotop = document.scrollingElement.scrollTop;
var target = document.getElementById("main1");
var xvalue = "center";
var factor = 0.5;
var yvalue = scrolltotop * factor;
target.style.backgroundPosition = xvalue + " " + yvalue + "px";
}

CSS:

#main1 {
background-image: url(https://images.unsplash.com/photo-1506104489822-562ca25152fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
background-position: top center;
background-attachment:scroll;
background-size: cover;
height: 80vh;
width: 100%;
}
#placeholdersoyoucanscroll{
height:100vh
}

HTML:

<body id="body">
<main>
<div id="main1">
</div>
<div id="placeholdersoyoucanscroll">
</div>
</main>
</body>

InformationsquelleAutor Tim T.

-3

Meilleure façon est de le faire avec jQuery.
Il y a beaucoup de sites sur ce sujet, par exemple:
- Pas vrai, il a été possible avec les CSS depuis des années. Voir ici
InformationsquelleAutor linuscl

Vous devez vous connecter pour publier un commentaire.