मुझे लगता है कि यह एक पुराने सवाल यह है कि, हालांकि, मैंने हाल ही में इस समस्या पर खुद को ठोकर खाई और सर्वोत्तम कामकाजी कोड खोजने की कोशिश में काफी समय बिताया। जो कुछ भी मैंने पाया वह बहुत जटिल था या विशेष रूप से क्रोम में बहुत कम किए बिना काम नहीं किया। के रूप में दूसरों के द्वारा ने कहा, समस्या शुद्ध सीएसएस द्वारा हल नहीं किया जा सकता है, लेकिन मैं अपने सरल AngularJS समस्या को हल करने के निर्देश दिया:
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
});
};
}]);
यह इस तरह html में इस्तेमाल किया जा सकता:
<body para-back="url/to/image">
यदि आप ऐसा दिखने का उदाहरण देखना चाहते हैं, तो आप this page पर जा सकते हैं।
संभव नहीं है सीएसएस के साथ। –
इससे https://github.com/pederan/Parallax-ImageScroll की सहायता मिलेगी, लेकिन सीएसएस के साथ यह संभव नहीं है कि सभी ने – ariestikto