UIKit Web - Snippets - Versionsgeschichte

109.193.152.88 am 10. Juli 2024 um 06:59 Uhr

2024-07-10T06:59:15Z

134.3.86.14 am 19. April 2024 um 09:08 Uhr

2024-04-19T09:08:34Z

134.3.86.14 am 19. April 2024 um 07:13 Uhr

2024-04-19T07:13:18Z

134.3.86.14 am 19. April 2024 um 07:12 Uhr

2024-04-19T07:12:28Z

134.3.86.14: Die Seite wurde neu angelegt: „== Animationen mit Scrollspy in ProcessWire == UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn…“

2024-04-19T07:11:51Z

Die Seite wurde neu angelegt: „== Animationen mit Scrollspy in ProcessWire == UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn…“

Neue Seite

== Animationen mit Scrollspy in ProcessWire ==
UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn ein Element in den View kommt.

'''Schritt 1:''' Festlegen, welche Animationen der Scrollspy auslösen soll. Das bietet sich in einem übergeordneten Container an.
<div id="bd" uk-scrollspy="target: div.ani; cls: uk-animation-slide-bottom-small; delay: 300">
* Target legt fest welche Elemente überwacht werden sollen
* cls legt fest welche Animation abgespielt wird.

'''Schritt 2:''' Im Editor Stile festlegen die man als Redakteur einfach verwenden kann.

← Nächstältere Version		Version vom 10. Juli 2024, 06:59 Uhr
Zeile 1:		Zeile 1:
		+	== Links ==
		+	[[UIKit Framework - Snippets]]
		+
	== Animationen mit Scrollspy in ProcessWire ==		== Animationen mit Scrollspy in ProcessWire ==
	https://getuikit.com/docs/scrollspy		https://getuikit.com/docs/scrollspy

← Nächstältere Version		Version vom 19. April 2024, 09:08 Uhr
Zeile 12:		Zeile 12:

	'''Schritt 2:''' Im Editor Stile festlegen die man als Redakteur einfach verwenden kann.		'''Schritt 2:''' Im Editor Stile festlegen die man als Redakteur einfach verwenden kann.
		+
		+	=== Mehrere Editoranimationen ===
		+	Bei mehreren Animationen kann man den Scrollspy programmatisch nutzen und für jede Animation eine Instanz bauen. Leider funktioniert es nicht (bisher) wenn man das Selbe Target für die Instanzen nutzt. Deshalb muss man schauen wie man verschiedene Targets nutzt.
		+	So kann man ein Snippet z.B. in _main.php in ProcessWire einbauen, dass für mehrere Animationen sorgt. Hier für Links mit der Klasse .ani-link und Bilder mit der Klasse .ani-img. Als Selector für das target attribut nutzen wir einmal .bd und einmal .uk-section.
		+	<syntaxhighlight lang="php">
		+	if($page->opt_1){
		+	$page->additionalFooterData .= '
		+	<script>
		+	var spy1 = UIkit.scrollspy(\'.bd\', {
		+	target: \'.ani-img\',
		+	cls: \'uk-animation-fade\',
		+	delay: 400,
		+	repeat: true
		+	});
		+	var spy2 = UIkit.scrollspy(\'.uk-section\', {
		+	target: \'.ani-link\',
		+	cls: \'uk-animation-slide-left-medium\',
		+	delay: 400,
		+	repeat: true
		+	});
		+	</script>
		+	';
		+	}
		+	</syntaxhighlight>

← Nächstältere Version		Version vom 19. April 2024, 07:13 Uhr
Zeile 1:		Zeile 1:
	== Animationen mit Scrollspy in ProcessWire ==		== Animationen mit Scrollspy in ProcessWire ==
		+	https://getuikit.com/docs/scrollspy
		+	https://getuikit.com/docs/animation
	UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn ein Element in den View kommt.		UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn ein Element in den View kommt.

@@ Zeile 3: / Zeile 3: @@
 '''Schritt 1:''' Festlegen, welche Animationen der Scrollspy auslösen soll. Das bietet sich in einem übergeordneten Container an.
   <div id="bd" uk-scrollspy="target: div.ani; cls: uk-animation-slide-bottom-small; delay: 300">
 * Target legt fest welche Elemente überwacht werden sollen
 * cls legt fest welche Animation abgespielt wird.
 '''Schritt 2:''' Im Editor Stile festlegen die man als Redakteur einfach verwenden kann.