In den meisten ZETA Layouts sind die Logos starr, d.h. sie lassen sich nicht in Bezug auf eine Animation beim Scrollen in der Größe nicht verändern. Ich würde mir wünschen, dass man das Logo im jeweiligen Zeta Layout beim Scrollen in der Größe animiert verändern kann. Zum Beispiel, dass es am Anfang größer eingeblendet wird und beim herunterscrollen der Seite kleiner wird - dies seht man sehr oft auf modernen Websites, ist aber bei Zeta aktuell nicht möglich.
Logo Skalieren / Animieren
-
Hallo,
Schau mal bei Mario widget-zp.de da wirst du fündig
Grüße Ela
-
Hallo mksteinmetz,
beim Layout "Flat Responsive" ist das möglich. Beispiel: https://content.zeta-producer.com/layouts/flat-responsive-slate/ -
Ich würde es doch einfach mit Css lösen, anstatt irgendwelche Widgets einzufügen.
Gruß Markus
-
Hallo mksteinmetz,
beim Layout "Flat Responsive" ist das möglich. Beispiel: https://content.zeta-producer.com/layouts/flat-responsive-slate/Ja ich weiß, nutze aber "Top Responsive" und da geht es leider nicht - weiß leider auch nicht wie ich das mit CSS lösen kann.
-
Ganz ohne JS wird das nicht gehen.
Folgendermaßen kannst du das für "Top Responsive" umsetzen.
- Gehe zu Erweitert > Attribute und öffne das Attribut footer_script.
- Hier fügst du untenstehenden Code ein und bestätigst mit OK.
- Sicherheitshalber würde ich anschließend noch Erweitert > Erstellen > Alle Seiten erstellen durchführen.
JavaScript
Alles anzeigen<script> jQuery(document).ready(function(){ jQuery(window).scroll(function(){ if(jQuery(this).scrollTop()>=50){ jQuery('#logo img').attr('style','transform:scale(.6); transition:transform 300ms;'); } else if (jQuery(this).scrollTop()<50) { jQuery('#logo img').attr('style','transform:scale(1); transition:transform 300ms;'); } }) }) </script>Was macht das Script:
- Wird die Seite mehr als 50 Pixel nach unten gescrollt wird das Logo auf 60% Größe skalliert. Die Animationszeit beträgt dabei 300 Milliskunden.
- Wird die Seite wieder nach oben gescrollt (50px vom oberen Rand) wird das Logo wieder auf 100% Größe skalliert. Die Animationszeit beträgt dabei 300 Milliskunden.
-
Danke, das funktioniert super! Allerdings habe ich beim Skalieren auf 60% oben nun zu viel Abstand zum Rand im Vergleich zu 100% - Kann man beim beim Verkleinern auch den Abstand oben zum Rand irgendwie festlegen oder das dieser gleich dem von 100% ist? Ich vermute es liegt an der Topline, hier kann den Nach Scrollen ebenfalls diese verkleinern, hier müsste sich das Logo dann mitanpassen, d.h. wenn die Topline bei Normal auf 180px steht und nach Scrollen auf 140px müsste man das Logo auch 40px hochschieben können.
EDIT: Ich glaube ich habe es jetzt durch ein wenig Anpassen der Werte und einem Zusatz im Code hinbekommen. Eine Frage noch - wie wäre der Befehl, dass das Javascript auf mobile nicht ausgeführt wird?
EDIT 2: Ich bekomme es leider doch nicht hin, dass sich das Logo nach dem Skalieren nach einen bestimmen Wert nach oben schiebt.
-
Folgender Code sollte da funktionieren:
JavaScript
Alles anzeigen<script> if($(window).width() < 767) { jQuery(document).ready(function(){ jQuery(window).scroll(function(){ if(jQuery(this).scrollTop()>=50){ jQuery('#logo img').attr('style','transform:scale(1);'); } }) }) } else { jQuery(document).ready(function(){ jQuery(window).scroll(function(){ if(jQuery(this).scrollTop()>=50){ jQuery('#logo img').attr('style','transform:scale(.6) translateY(-10px); transition:transform 300ms;'); } else if (jQuery(this).scrollTop()<50) { jQuery('#logo img').attr('style','transform:scale(1) translateY(0); transition:transform 300ms;'); } }) }) } </script>- Der Wert translateY(-10px); verschiebt das Logo in diesem Fall um 10px nach oben. Diesen musst du je nach Logo-Größe und Zoomfaktor anpassen.
- Das Script liest die Seitenbreite beim laden der Seite aus. Deshalb wird in der Browser-Vorschau die (Ansicht Smartphone) den Code nicht abbilden.
- Zum Testen in der Browservorschau bitte das Browserfenster entsprechend verkleinern und anschließend die Seite aktualisieren.
-
Hallo,
das ist ja mal ein schönes script, vielen Dank! Hab's direkt übernommen (leichtlast.de).
Ich hab dazu noch eine Frage:
Wäre es möglich im gleichen Schritt die Header-Höhe zu verringern? Gerade in der mobilen Ansicht könnte man so recht viel Platz raus holen.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!