scroll animation mit javascript?
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("pic").style.marginTop = "0px";
document.getElementById("pic").style.marginLeft = "900px";
document.getElementById("pic").style.width = "100px";
document.getElementById("pic").style.height = "100px";
document.getElementById("h1").style.width = "1003px";
document.getElementById("h1").style.height = "60px";
document.getElementById("h1").style.marginTop = "0px";
document.getElementById("h1").style.textAlign = "center";
} else {
document.getElementById("pic").style.marginTop = "110px";
document.getElementById("pic").style.marginLeft = "800px";
document.getElementById("pic").style.width = "200px";
document.getElementById("pic").style.height = "200px";
document.getElementById("h1").style.width = "250px";
document.getElementById("h1").style.height = "50px";
document.getElementById("h1").style.marginTop = "195px";
}
Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?
..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?
Sry, bin totaler Anfänger =)
gibt es eine bessere Lösung für mein Vorhaben
Was genau ist dein Vorhaben?
Die beiden Elemente (pic - h1) verschmelzen beim scrollen quasi zu einem Kopf der Seite.. evtl ensteht eine nav bar daraus, dass soll nur ein bisschen schöner animiert werden.
Was hat das jetzt mit Scrollen zu tun? Du registrierst zwar einen Listener, ja, aber selber was am scrollen ändern tust du ja nicht... Was ist dein Ziel?
Die beiden Elemente sind Standardmäßig wie im else Teil erwähnt positioniert.
Der if Teil wird ausgeführt und die Elemente ändern ihre Position (sobald man scrollt).
2 Antworten
window.onscroll = scrollFunction;
So kannst du den Code in deiner ersten Zeile verkürzen.
Zur Frage, auch wenn ich bei deinen Code garkeinen Zusammenhang mit deiner Frage sehe:
Mit folgender CSS-Änderung kannst du einstellen, dass das Scrollen smooth sein soll:
html {
scroll-behavior: smooth;
}
Ah. Da brauchst du einfach folgende CSS-Eigenschaft bei den Elementen:
transition: margin 0.5s;
JAAA =) genau dass war es.. Vielen vielen Dank.
..dass Script kann ich so lassen ? oder kann ich die verschiedenen Style befehle pro Element auch in eine Zeile packen ?
Kannst du so lassen. Kompakter geht's fast nicht.
Du könntest (vor dem if)
document.getElementById("pic")
und
document.getElementById("h1")
in Variablen speichern, und die dann im if-else benutzen, dann wär der Code horizontal nicht so breit.
Aber ansonsten.. Du könntest natürlich die CSS Sachen in eine CSS-Klasse auslagern, und die dann mit
element.classList.add("klassenname")
hinzufügen, bzw. sie mit
element.classList.remove("klassenname")
wieder entfernen.
Danke geniale Idee... manchmal kann man den Wald vor lauter Bäumen nicht sehen =)
Schau dir mal jQuery an. Dort gibt es eine animate Funktion, mit welcher du sagen kannst, animiere von hier zu hier
Ansonsten kann ich aber auch das arbeiten mit Klassen empfehlen und dann in CSS animieren
Entschuldigung, ich habe sie schlecht formuliert.
Das Script funktioniert ohne Probleme und tut was es soll. Jedoch ändern die beiden Elemente ihre Position so schlagartig.. Ich hätte dass gern etwas smoother =)