Parallax Effekt selbst gemacht

Siehe auch

https://developers.google.com/web/updates/2016/12/performant-parallaxing
Parallax Effekte

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.

<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.

Performantes Parallaxing

https://github.com/GoogleChromeLabs/ui-element-samples

• Keine Scroll Events nutzen keine background-position verwenden
• Nutze CSS 3D transforms um genauere parallax Effekte zu erzeugen.
• Für Mobile Safari nutze position: sticky damit der parallax effect propagated wird.

3D Transformation

Vorgehen:

• Container Element mit overflow-y: scroll (und normalerweise overflow-x: hidden)
• Das Container Element bekommt Werte für perspective und perspective-origin: 0 0;
• Das Kindelement bekommt einen transform: translateZ. Damit die Bewegung das Element nicht Skaliert musst du mit scale dagegen arbeiten.

CSS

.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  transform: translateZ(-2px) scale(3);
}

HTML

<div class="container">
  <div class="parallax-child"></div>
</div>