Bearbeiten von „Parallax Effekt selbst gemacht“

Wenig Code, effektiv, jQuery

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

== CSS ==
<syntaxhighlight lang="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. */
}
</syntaxhighlight>
'''.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.

<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

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