webentwicklung-frage-antwort-db.com.de

(CSS) Lassen Sie ein Hintergrundbild langsamer als alles andere scrollen

hier ist mein CSS-Code für den Körper:

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

Ich möchte, dass das Bild langsamer als alles andere auf der Seite rollt, um einen einfachen Parallaxeeffekt zu erzielen. Ich habe online gesucht und alle Beispiele, die ich gesehen habe, sind viel komplizierter als ich will.

31
BananaPineapple

Ich bin auf diese Suche nach mehr Flexibilität in meiner Parallaxe gestoßen, die ich mit reinem CSS erstellt habe, und ich möchte nur darauf hinweisen, dass alle diese Leute falsch sind und es mit reinem CSS möglich ist Es ist auch möglich, die Höhe Ihres Elements besser zu steuern.

Sie müssen wahrscheinlich Ihr DOM/HTML ein wenig bearbeiten, um einige Containerelemente zu haben. In Ihrem Fall wenden Sie den Hintergrund auf den Körper an, was Sie stark einschränkt und keine gute Idee ist.

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

So steuern Sie die Höhe mit der prozentualen Länge des Ansichtsfensters basierend auf der Bildschirmgröße:

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;
  }

Die Ebenengeschwindigkeit wird durch eine Kombination der Perspektiv- und Z-Verschiebungswerte gesteuert. Elemente mit negativen Z-Werten rollen langsamer als Elemente mit positiven Werten. Je weiter der Wert von 0 entfernt ist, desto ausgeprägter ist der Parallaxeeffekt (d. H. TranslateZ (-10px) scrollt langsamer als translateZ (-1px)).

Hier ist eine Demo, die ich mit einer Google-Suche gefunden habe, weil ich weiß, dass es viele Ungläubige gibt, sagen Sie niemals unmöglich:

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

63
Neo

sie können etwas einfaches wie hier verwenden: html:

Bewegung

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;

    });
  };

})();

Hier ist jsfiddle

5
Piotr Ciszewski

Wenn Sie ein hohes Hintergrundbild anwenden möchten, verwenden Sie diese 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 + "%";
        });
})();
3

Ich weiß, dass dies sehr spät ist, aber ich fragte mich, ob es nicht einfacher sein würde als die obigen Codes und investierte 15 Minuten meines Lebens.
Hier ist mein Code:

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";
  }
#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
}
<body id="body">
      <main>
        <div id="main1">
        </div>
        <div id="placeholdersoyoucanscroll">
        </div>
    </main>
</body>
1
Tim T.

Mir ist klar, dass dies eine alte Frage ist, aber ich bin vor kurzem selbst auf dieses Problem gestoßen und habe viel Zeit damit verbracht, den besten Arbeitscode zu finden. Alles, was ich fand, war entweder zu kompliziert oder funktionierte nicht ohne viel Verzögerung, besonders in Chrome. Wie von anderen betont, kann das Problem nicht durch reines CSS gelöst werden, aber ich habe meine eigene einfache AngularJS-Direktive erstellt, um das Problem zu lösen:

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
    });
  };
}]);

Es kann im HTML wie folgt verwendet werden:

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

Wenn Sie ein Beispiel sehen möchten, wie es aussieht, besuchen Sie diese Seite .

1
tjespe

Stimmen Sie zu, dass dies nicht nur mit CSS möglich ist, da Sie das Verhältnis von Bild- und Dokumenthöhe berechnen müssen. Ich mag diesen Effekt auch, deshalb habe ich eine einfache Funktion geschaffen, die genau das tut. Hier ist die Funktion und ihr Aufruf des Scroll-Ereignisses:

$(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';
}

Sie finden es hier zusammen mit einem Beispiel und einer visuellen Erklärung, was mit Bild und Dokument wirklich los ist:

Reibungsloses Scrollen des Hintergrundbilds

1
Vuk Djapic