Firmenschriftzug beim Scrollen verkleinern

VeniVidi schrieb am 16.07.2019 um 18:33 Uhr

Hallo zusammen. Ich habe einen großen Firmenschriftzug, der beim Aufrufen der Seite viel Platz einnimmt. Das soll so sein. Dadurch bleibt aber wenig platz für Content. Daher würde ich gern machen, dass beim Scrollen der Schriftzug am oberen Rand fixiert und verkleinert wird. Wenn es dafür eine coole Zoom-Out Animation gibt, umso besser. Kann man das mit WD16 machen?

Kommentare

BeRo schrieb am 16.07.2019 um 20:30 Uhr

[...] Daher würde ich gern machen, dass beim Scrollen der Schriftzug am oberen Rand fixiert und verkleinert wird. [...]

Edit 17.07. 10:39 h

Vergiss alles, was ich Dir gestern zum "Einbau" der Scriptcodes gesagt habe (siehe unten), es geht sehr viel einfacher.
Der WD bringt schon alle Tools mit, die Du für die Umsetzung Deines Vorhabens benötigst. 🤓

Die Zauberworte heißen: "Triggerobjekt" und "Web-Animation"
Als Triggerobjekt, das beim Auftauchen auf dem Bildschirm das große Logo einblendet, legst Du zunächst z. B. eine Linie an, die Du 2 px vom oberen Seitenrand entfernt platzierst. Der Linie gibst Du einen beliebigen Namen, hier "Trigger"

Dann definierst Du für das große Logo die Web-Animation, die, nach Auslösung durch das Triggerobjekt, das große Logo sichtbar werden lässt.

Das war's im Wesentlichen schon... 😋

Die entsprechend umgebaute Demo kannst Du hier ansehen.
Die Projektdatei(en), die neue und die alte kannst Du hier herunterladen.

Beide Projektdateien enthalten auch die Smartphone Variante...

Viel Erfolg 👍

*********************************************************************
Der Vollständigkeit halber hier noch mein Beitrag von gestern:
-------

[...] Daher würde ich gern machen, dass beim Scrollen der Schriftzug am oberen Rand fixiert und verkleinert wird. [...]

Das ist mit ein paar Zeilen JScript und ein paar Mausklicks zu machen. 😉

Hier die online Demo

So wird's gemacht:

Erstell eine neue Ebene (z. B. "Logo (lock)"), direkt oberhalb der MouseOver Ebene
(Das Attribut (lock) ist wichtig!)
In der neuen Ebene erstellst Du die Grafik (das große Logo) und gruppierst sie mit einem geeigneten Hintergrund, der so groß ist, dass das "normale", kleine Logo damit verdeckt werden kann.
Positioniere die neue Logo Gruppe wie gewünscht so, dass das kleine Logo verdeckt wird
Aktiviere für das kleine Logo (+ NavBar etc.?) die Optionen "fixiert" und "nicht ausdehnen"

Jetzt must Du nur noch dafür sorgen, dass das neue, große Logo automatisch ein- und ausgeblendet wird, wenn die Website geöffnet- oder gescrollt wird.
Dazu legst Du zunächst in einem Dummy Button außerhalb der Seite einen Link an, der auf die popup Ebene "Logo (lock)" zeigt. Das sorgt dafür, dass der Inhalt der Ebene nicht permanent angezeigt wird.

Damit die popup Ebene (das große Logo) schon beim Öffnen der Seite sichtbar ist, legst Du im HTML Head der Seite einen HTML Ein Zeiler an, der so aussieht:

<body onload= "xr_cpu(4)">

Der sorgt dafür, dass die popup Ebene (4), die direkt über der MouseOver Ebene liegt, schon beim Start der Seite angezeigt wird.

Damit das große Logo (die popup Ebene) beim Scrollen der Seite verschwindet und damit das kleine Logo sichtbar wird, kopierst Du den u. a. JScript Code in den HTML Head der Seite

<script>
window.onscroll = function() {Logo_off()};
function Logo_off() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    xr_ppc('xr_xp4'); // grosses Logo wird ausgeblendet
  } else {
    xr_cpu(4); // grosses Logo wird eingeblendet
  }
}
</script>

Die im Code enthaltene JS Funktion wird schon aktiv, wenn die Seite nur um 2 Pixel gescrollt wird.
Beim abwärts Scrollen wird das große Logo ausgeblendet. Beim aufwärts Scrollen zum oberen Rand wird es wieder sichtbar.

Die zur o. a. Demo gehörende Projektdatei kannst Du hier herunterladen, für eigene Experimente.

Viel Erfolg

VeniVidi schrieb am 18.07.2019 um 15:36 Uhr

Danke, ich werde mit deinem Ansatz ein Bisschen herumspielen. Eine Frage noch: Hat WD16 eine Schrumpfanimation? Besonders gern würde ich das dicke Logo auszoomen in die linke Ecke, wo es dann stehen bleibt. Kann natürlich auch eine Illusion sein und es bleibt dann eine verkleinerte Version an der Stelle.

BeRo schrieb am 19.07.2019 um 20:18 Uhr

[...] Hat WD16 eine Schrumpfanimation? [...]

Leider (noch) nicht. 😏

[...] Besonders gern würde ich das dicke Logo auszoomen in die linke Ecke, wo es dann stehen bleibt [...]

Auch das geht, wenn Du ein paar Zeilen CSS3 investierst. 😉

Wenn ich das mit der oben schon gezeigten Vorlage umsetze, dann sieht das so aus (klick).
Nachteil der CSS3 Version ist, dass der MS Internet Explorer das Verfahren nicht fehlerfrei umsetzen kann. Er bleibt der Linie treu, mal wieder "eine extra Wurst" zu braten... 😒

Der für den Effekt nötige CSS3 Code ist überschaubar:

<style>
@-moz-keyframes fade {
from {-moz-transform: scale(1.0); }
to { -moz-transform: scale(0.38) translate(-80%, -80%);}
}
@-webkit-keyframes fade {
from { -webkit-transform: scale(1.0); }
to { -webkit-transform: scale(0.38) translate(-80%, -80%); }
}
@-ms-keyframes fade {
from { -ms-transform: scale(1.0); }
to { -ms-transform: scale(0.38) translate(-80%, -80%); }
}
@keyframes fade {
from { transform: scale(1.0); }
to { transform: scale(0.38) translate(-80%, -80%); }
}.box {
-moz-animation: fade 5s ;
-moz-animation-fill-mode: forwards;
-moz-animation: delay: 5s ;
-webkit-animation: fade 5s ;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 5s ;
-ms-animation: fade 5s ;
-ms-animation-fill-mode: forwards;
-ms-animation-delay: 5s ;
animation: fade 5s ;
animation-fill-mode: forwards;
animation-delay: 5s ;
}
</style><img src="./index_htm_files/Logo.jpg"  class="box">

Der Code ist aufgebläht, weil für jede Browservariante eigene Befehle nötig sind. Ansonsten hat die keyframe Methode nur Vorteile. Einer davon ist das Startverhalten. CSS Keyframe Code wird automatisch aktiviert, ohne ein Triggerobjekt (z. B. Link Button) zu zünden.

Die Projektdatei zur o. a. Demo kannst Du hier herunterladen. Darin ist auch der modifizierte Code für die Smartphone Variante enthalten.
Schau's Dir mal an.

Viel Erfolg