(CSS) Machen Sie ein Hintergrundbild Scroll langsamer als alles andere

Question

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

Was ich will, es zu tun, so dass die Bildrollen langsamer als alles andere auf die Seite, um einen einfachen Parallax-Effekt zu erzielen. Ich habe online geschaut und alle Beispiele, die ich gesehen habe, sind viel komplizierter als das, was ich möchte.

Answer 1

Ich bin auf diese Suche nach mehr Flexibilität in meiner Parallaxgeschwindigkeit gestoßen, die ich mit reinem CSS erstellt habe und möchte nur darauf hinweisen, dass alle diese Leute falsch liegen und es mit reinem CSS möglich ist Es ist auch möglich Kontrolliere die Höhe deines Elementes besser.

Sie werden wahrscheinlich Ihr DOM/HTML etwas bearbeiten müssen, um einige Containerelemente zu haben, in Ihrem Fall werden Sie den Hintergrund auf den Körper anwenden, was Sie sehr einschränken wird und nicht als eine gute Idee erscheint.

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

Hier ist, wie Sie die Höhe steuern mit Ansichtsfenster-Prozentsatz lenghts basierend auf 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; 
    } 

Schicht Geschwindigkeit durch eine Kombination aus der Perspektive gesteuert wird und die Z Übersetzungswerte. Elemente mit negativen Z-Werten werden langsamer gescrollt als solche mit einem positiven Wert. Je weiter der Wert von 0 entfernt ist, desto ausgeprägter ist der Parallaxeneffekt (d. H. TranslateZ (-10px) wird langsamer scrollen als translateZ (-1px)).

Hier ist eine Demo-I mit einer Google-Suche gefunden, weil ich weiß, dass viele Nicht-Gläubigen gibt es da draußen, sagen nie unmöglich:

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

Answer 2

Der beste Weg ist, es mit jQuery zu tun. Es gibt eine Menge von Websites darüber, zum Beispiel:

• jQuery to give impression of background scrolling slower
• http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
• http://callmenick.com/2014/09/08/advanced-parallax-scrolling-effect/

Answer 3

einig, dass es nicht möglich ist, nur mit CSS, da Sie berechnen müssen Bild und Dokument Höhenverhältnis. Ich mag auch diesen Effekt, deshalb erstellte einfache Funktion, die genau das tut. Hier ist Funktion und seine Aufforderung an Scroll-Ereignisse:

$(window).on('scroll', function() { 
 
\t smoothBackgroundScroll("relative/image/url"); 
 
}); 
 

 
function smoothBackgroundScroll(imgsrc) { 
 
\t function loadImageHeight(url, width) { 
 
\t \t var img = new Image(); 
 
\t \t img.src = url; 
 
\t \t if (width) { 
 
\t \t \t img.width = width; 
 
\t \t } 
 
\t \t return img.height; 
 
\t } 
 

 
\t var dh, wh, ih, st, posy, backh, backw; 
 
\t if (!this._smoothBackgroundScroll) { 
 
\t \t var bcksize = $(document.body).css('background-size'); 
 
\t \t var bmatch = /(\w+)\s*(\w+)/.exec(bcksize); 
 
\t \t if (!bmatch || bmatch.length < 3) { 
 
\t \t \t backh = loadImageHeight(imgsrc) 
 
\t \t } else { 
 
\t \t \t backh = parseInt(bmatch[2]); 
 
\t \t \t if (isNaN(backh)) { 
 
\t \t \t \t backw = parseInt(bmatch[1]); 
 
\t \t \t \t backh = loadImageHeight(imgsrc, parseInt(backw)); 
 
\t \t \t } 
 
\t \t } 
 
\t \t this._smoothBackgroundScroll = { 
 
\t \t \t dh: $(document).height() 
 
\t \t \t , wh: $(window).height() 
 
\t \t \t , ih: backh 
 
\t \t } 
 
\t } 
 
\t dh = this._smoothBackgroundScroll.dh; 
 
\t wh = this._smoothBackgroundScroll.wh 
 
\t ih = this._smoothBackgroundScroll.ih; 
 
\t st = $(document).scrollTop(); 
 
\t posy = (dh - ih) * st/(dh - wh); 
 
\t document.body.style.backgroundPosition = 'center ' + posy + 'px'; 
 
}

Sie können es hier zusammen mit Beispiel und visueller Erklärung finden, was wirklich los ist mit Bild und Dokument:

Smooth background image scrolling

Answer 4

Wenn Sie ein hohes Hintergrundbild anwenden möchten, verwenden Sie dieses JS:

Answer 5

Ich weiß, dass dies eine alte Frage ist, Ich bin jedoch kürzlich selbst auf dieses Problem gestoßen und habe viel Zeit damit verbracht, den besten funktionierenden Code zu finden. Alles, was ich gefunden habe, war entweder zu kompliziert oder hat nicht funktioniert, ohne viel nachzuhängen, besonders in Chrome. Wie von anderen darauf hingewiesen wird, kann das Problem nicht durch reine CSS gelöst werden, aber ich habe meine eigene einfache AngularJS Richtlinie 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 in dem HTML-Code wie folgt verwendet werden:

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

Wenn Sie ein Beispiel sehen möchten, wie es aussieht, können Sie this page besuchen.

Answer 6

Sie etwas Einfaches wie hier verwenden können: 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