Parallax Effekt selbst gemacht

Siehe auch

https://developers.google.com/web/updates/2016/12/performant-parallaxing
Parallax Effekte
https://www.vandelaydesign.com/parallax-scrolling-best-practices-examples-and-tutorials/

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

Effektiver weil vom Browser gerendert kann man Animation mit den 3D Transformationen erreichen. 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>

Skalierung berechnen

perspective: 1px sorgt dafür, dass das Kind Element im 3D Raum nach hinten geschoben wird. Der Browser versucht die Perspektive zu berechnen und verkleinert das Kindelement entsprechend. Für ein Parallax möchte man normalerweise die Größe erhalten (nicht immer). Man kann dagegen arbeiten, indem man eine passende Skalierung berechnet:

scale = (perspective - distance) / perspective

Im Beispiel oben:

scale = (1px - (-2px)) / 1px) = 3

Inhalt ohne translateZ ist die Skalierung

(perspective - 0) / perspective

also 1.

Zwischenelemente

Wenn in der Hierarchie Elemente zwischen Eltern und Kind kommen muss man die 3D Eigenschaft mit transform-style: preserve-3d erhalten. Sonst rechnet der Browser keine Perspektive.

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

.parallax-container {
  transform-style: preserve-3d;
}