Welcher Slider funktioniert so wie der hier ganz oben, so dass das Logo/Text immer stehen bleibt und nur das Bild darunter wechselt?
Grundsätzlich jeder Slider, der mit Layern arbeitet. Klassiker ist das kostenpflichtige Layer Slider, aber das kostenlose Smart Slider 3 sollte auch ausreichen. Neben Bildern musst du bei dem Smart Slider noch ein „Static Overlay“ hinzufügen – das ist der feststehende Teil.
Ansonsten mal im Plugin-Verzeichnis suchen.
Kriege ich das mit Elementor hin?
In der kostenlosen Version bietet Elementor keinen Slider. Zur Pro-Version kann ich dir nichts sagen, weil sie mir nicht kostenlos zur Verfügung steht.
Und wie funktioniert das, dass die Schrift beim Scrollen auseinander zieht und dann unsichtbar wird? Hab ich noch nie gesehen und finde ich wahnsinnig schön!
Das ist eine Besonderheit des kommerziellen Themes Rosa. Vielleicht findest du im Plugin-Verzeichnis etwas zum Stichwort „parallax“. Oder sonst mit jQuery selber etwas programmieren. Unter den Suchbegriffen „jQuery fade out on scroll“ findest du Code-Beispiele.
Hey Mario, vielen Dank, sehr interessant!
Also zu Elementor pro kann ich sagen, dass es da einen slider gibt. Ich könnte auf der Ebene darunter das Logo platzieren und dann über Negativ Margin nach oben ziehen. Wenn aber der slider under die ganze Breite geht, verschiebt sich das Logo bei Margin in px ja he nach Bildschirmgröße oder? Kann man das irgendwie relativ lösen statt absolute in Pixel?
Also wahrscheinlich geht es leichter mit dem smart Slider, aber das mit dem relativ interessiert mich schon lange :).
Das fade out probiere ich mal mit einem plugin. Parallax ist die Verschiebung, oder? Das geht mit Elementor, glaub ich, nur dieses auflösen der Schrift (vllt ja CSS opacity?) hat mich interessiert.
Danke und schönes Wochenende!
Wie gesagt: wir bieten hier keinen Support für Premium-Plugins an. Bitte wende dich bei Fragen zu Elementor Pro an den Support.
Zum Fade-Effekt kannst du mal folgendes probieren:
- du installierst das Plugin Code Snippets
- du fügst folgendes Code-Snippet hinzu:
add_action( 'wp_head', 'fade_on_scroll' );
function fade_on_scroll() {
echo '<script>
jQuery(window).scroll(function () {
var y = jQuery(this).scrollTop();
if (y > 500) {
jQuery(\'.fade\').show(\'slow\');
} else {
jQuery(\'.fade\').fadeOut(\'slow\');
}
});
</script>';
}
(Quelle: Fade-in and Out with scroll
- Du erstellst eine Seite mit Überschrift, viel Text, einer Zwischenüberschrift und nochmal viel Text. Der Zwischenüberschrift weist du über die rechte Sidebar über den Punkt „Erweitert“ eine CSS-Klasse
fade (hier ohne den Punkt) hinzu.
- Du schaust dir die Seite an. Beim Scrollen um mehr als 300 Pixel sollte die Zwischenüberschrift ausgeblenden, beim Zurückscrollen wieder eingeblendet werden.
