Parallax Effekt selbst gemacht

Wenig Code, effektiv, jQuery

https://www.taniarascia.com/parallax-scroll-effect/

CSS

.parallax-container {
  position: relative;
  height: 500px;
}
.parallax {
  position: absolute;
  height: 200%;
  width: 100%;
  z-index: -1;
}
.content {
  background: #fff;
  height: 600px /* This height is only for 
  demonstration purposes since I have no content. 
  It's not necessary for the code to work. */
}

.parallax-container

• legt die Höhe fest
• position relativ ermöglicht Kontrolle über das absolut positionierte Kindelement.

.parallax

• Inner div enthält Background Image
• Absolut positioniert (siehe oben)
• Höhe kann variieren
• Breite muß definiert werden 100% since the element is now absolute. Finally, a
• negative z-index -> image remains contained to the height of parallax-container.

Content All HTML layout elements have a transparent background by default. If you choose to use parallax, simply setting your background color on the body element won’t be enough anymore – you’ll have to place all of your non-parallax content inside of elements with a background color. I’m going to create a .content class that simply has a background color so that my content will always appear over the parallax image.

HTML

Putting it Together

• top and bottom empty section damit man scrollen kann.

<section class="content"></section>

<section class="parallax-container">
  <div class="parallax" style="background: url(image.jpg) center center / cover no-repeat;"></div>
</section>

<section class="content"></section>

• On the .parallax div, I edit the style attribute and add a background image.
• The background image will be horizontally and vertically centered in the div, cover the entire div, and not repeat.
• Kommentar: Verbesserung wäre ein Schwerpunkt

JavaScript

• We’re going to create a variable for the parallax class, and count all instances using .length.
• Next, we’ll create a scroll function.
• Let the browser know that we’re going to do an animation with requestAnimationFrame.
• Create a for loop, capturing each parallax element in currentElement, and how much has been scrolled with scrolled.
• Finally, multiply how much has been scrolled with a negative pixel value, and apply that to the transform: translate3D of the CSS of the individual parallax element.

<syntaxhighlight lang="javascript"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

var parallaxElements = $('.parallax'),

   parallaxQuantity = parallaxElements.length;

$(window).on('scroll', function () {

 window.requestAnimationFrame(function () {
   for (var i = 0; i < parallaxQuantity; i++) {
     var currentElement = parallaxElements.eq(i);
     var scrolled = $(window).scrollTop();
     currentElement.css({
       'transform': 'translate3d(0,' + scrolled * -0.3 + 'px, 0)'
     });
   }
 });

});

I’m not a fan of including parallax on mobile, so I would add an if statement on the jQuery and a @media query on the CSS to only allow parallax after a certain screen width.