Parallax Effekt selbst gemacht - Versionsgeschichte

37.49.72.8: /* Performantes Parallaxing */

2020-01-20T08:48:18Z

Performantes Parallaxing

37.49.72.8: /* Performantes Parallaxing */

2020-01-17T10:56:25Z

Performantes Parallaxing

37.49.72.8 am 17. Januar 2020 um 10:47 Uhr

2020-01-17T10:47:07Z

37.49.72.8: /* Performantes Parallaxing */

2020-01-17T10:43:18Z

Performantes Parallaxing

37.49.72.8 am 17. Januar 2020 um 10:34 Uhr

2020-01-17T10:34:14Z

37.49.72.8 am 17. Januar 2020 um 09:45 Uhr

2020-01-17T09:45:51Z

37.49.33.174 am 2. Juli 2018 um 09:01 Uhr

2018-07-02T09:01:16Z

149.172.225.28: /* JavaScript */

2018-03-06T16:16:36Z

JavaScript

149.172.225.28: Die Seite wurde neu angelegt: „Wenig Code, effektiv, jQuery https://www.taniarascia.com/parallax-scroll-effect/ == CSS == .parallax-container { position: rel…“

2018-03-06T16:15:39Z

Die Seite wurde neu angelegt: „Wenig Code, effektiv, jQuery https://www.taniarascia.com/parallax-scroll-effect/ == CSS == <syntaxhighlight lang="css"> .parallax-container { position: rel…“

Neue Seite

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

@@ Zeile 126: / Zeile 126: @@
 ''' 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
@@ Zeile 131: / Zeile 132: @@
   scale = (1px - (-2px)) / 1px) = 3
-For any content that doesn’t have a translateZ value applied, you can substitute a value of zero. This means the scale is (perspective - 0) / perspective, which nets out at a value of 1, which means that it’s been scaled neither up or down. Quite handy, really.
+.parallax-container {

@@ Zeile 95: / Zeile 95: @@
 === 3D Transformation ===
 Vorgehen:
 * '''Container Element''' mit '''overflow-y: scroll''' (und normalerweise overflow-x: hidden)
@@ Zeile 123: / Zeile 124: @@
 </div>
 </syntaxhighlight>

← Nächstältere Version		Version vom 17. Januar 2020, 10:47 Uhr
Zeile 2:		Zeile 2:
	https://developers.google.com/web/updates/2016/12/performant-parallaxing		https://developers.google.com/web/updates/2016/12/performant-parallaxing
	[[Parallax Effekte]]		[[Parallax Effekte]]
		+	https://www.vandelaydesign.com/parallax-scrolling-best-practices-examples-and-tutorials/

← Nächstältere Version		Version vom 17. Januar 2020, 10:43 Uhr
Zeile 92:		Zeile 92:
	* Nutze CSS 3D transforms um genauere parallax Effekte zu erzeugen.		* Nutze CSS 3D transforms um genauere parallax Effekte zu erzeugen.
	* Für Mobile Safari nutze position: sticky damit der parallax effect propagated wird.		* 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
		+	<syntaxhighlight lang="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);
		+	}
		+	</syntaxhighlight>
		+
		+	HTML
		+	<syntaxhighlight lang="html">
		+	<div class="container">
		+	<div class="parallax-child"></div>
		+	</div>
		+	</syntaxhighlight>

← Nächstältere Version		Version vom 17. Januar 2020, 10:34 Uhr
Zeile 85:		Zeile 85:
	</syntaxhighlight>		</syntaxhighlight>
	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'''.		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.

@@ Zeile 1: / Zeile 1: @@
 Siehe auch
-* [[Parallax Effekte]]
+ https://developers.google.com/web/updates/2016/12/performant-parallaxing
 Wenig Code, effektiv, jQuery
-https://www.taniarascia.com/parallax-scroll-effect/
+ https://www.taniarascia.com/parallax-scroll-effect/
 == CSS ==

← Nächstältere Version		Version vom 2. Juli 2018, 09:01 Uhr
Zeile 1:		Zeile 1:
		+	Siehe auch
		+	* [[Parallax Effekte]]
		+
		+
	Wenig Code, effektiv, jQuery		Wenig Code, effektiv, jQuery

@@ Zeile 78: / Zeile 78: @@
    });
 });
+</syntaxhighlight>
 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'''.