Parallax-Effekt bearbeitet von Gunnar Bittersmann 31.10.2022 23:05 @@Gunnar Bittersmann> Parallax-Effekt ist doch ein [JavaScript-Einzeiler](https://codepen.io/gunnarbittersmann/pen/MWXaJRa?editors=0010)‽Was der Einzeiler tut:* Der Länge des Scrollwegs ist die Höhe des gesamten Dokumenteninhalts `document.documentElement.offsetHeight`{:.language-js} abzüglich der Höhe des Viewports `window.innerHeight`{:.language-js}.* Die relative Scrollposition ist das Verhältnis der absoluten Scrollposition `window.scrollY`{:.language-js} zum gesamten Scrollweg: `window.scrollY / (document.documentElement.offsetHeight - window.innerHeight)`{:.language-js}* Das Verhältnis wird in Prozent umgerechnet, d.h. × 100%. `* 100`{:.language-js} passiert innerhalb von `${ … }`{:.language-js}; das Prozentzeichen wird an die Zahl angehangen: `` `${ … }%` ``{:.language-js} *([template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals))*{:@en}.* Den Wert könnte man nun direkt `document.documentElement.style.backgroundPositionY`{:.language-js} zuweisen. Ich bin aber kein Freund davon, Werte von CSS-Eigenschaften mit JavaScript zu ändern. Deshalb weise ich den Wert der *[custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)*{:@en} `--y` zu.* Durch `html { background-position: center var(--y, top) }`{:.language-css} im Stylesheet kommt der Wert bei der CSS-Eigenschaft an. (`top` ist der Defaultwert, wenn `--y` nicht anderswo gesetzt ist.)Der Rest des Scripts sorgt dafür, dass ein `scroll`-Eventhandler gesetzt wird, sofern der Nutzer seinem Browser nicht gesagt hat, dass er lieber auf zu viel Bewegung auf der Seite verzichtet.🖖 Живіть довго і процвітайте{:@uk}-- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix
Parallax-Effekt bearbeitet von Gunnar Bittersmann 31.10.2022 23:29 @@Gunnar Bittersmann> Parallax-Effekt ist doch ein [JavaScript-Einzeiler](https://codepen.io/gunnarbittersmann/pen/MWXaJRa?editors=0010)‽Was der Einzeiler tut:* Der Länge des Scrollwegs ist die Höhe des gesamten Dokumenteninhalts `document.documentElement.offsetHeight`{:.language-js} abzüglich der Höhe des Viewports `window.innerHeight`{:.language-js}.* Die relative Scrollposition ist das Verhältnis der absoluten Scrollposition `window.scrollY`{:.language-js} zum gesamten Scrollweg: `window.scrollY / (document.documentElement.offsetHeight - window.innerHeight)`{:.language-js}* Das Verhältnis wird in Prozent umgerechnet, d.h. × 100%. `* 100`{:.language-js} passiert innerhalb von `${ … }`{:.language-js}; das Prozentzeichen wird an die Zahl angehangen: `` `${ … }%` ``{:.language-js} *([template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals))*{:@en}.* Den Wert könnte man nun direkt `document.documentElement.style.backgroundPositionY`{:.language-js} zuweisen. Ich bin aber kein Freund davon, Werte von CSS-Eigenschaften mit JavaScript zu ändern. Deshalb weise ich den Wert der *custom property*{:@en} `--y` zu.* Durch `html { background-position: center var(--y, top) }`{:.language-css} im Stylesheet kommt der Wert bei der CSS-Eigenschaft an. (`top` ist der Defaultwert, wenn `--y` nicht anderswo gesetzt ist.)Der Rest des Scripts sorgt dafür, dass ein `scroll`-Eventhandler gesetzt wird, sofern der Nutzer seinem Browser nicht gesagt hat, dass er lieber auf zu viel Bewegung auf der Seite verzichtet.🖖 Живіть довго і процвітайте{:@uk}-- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix
Parallax-Effekt bearbeitet von Gunnar Bittersmann 31.10.2022 23:14 @@Gunnar Bittersmann> Parallax-Effekt ist doch ein [JavaScript-Einzeiler](https://codepen.io/gunnarbittersmann/pen/MWXaJRa?editors=0010)‽Was der Einzeiler tut:* Der Länge des Scrollwegs ist die Höhe des gesamten Dokumenteninhalts `document.documentElement.offsetHeight`{:.language-js} abzüglich der Höhe des Viewports `window.innerHeight`{:.language-js}.* Die relative Scrollposition ist das Verhältnis der absoluten Scrollposition `window.scrollY`{:.language-js} zum gesamten Scrollweg: `window.scrollY / (document.documentElement.offsetHeight - window.innerHeight)`{:.language-js}* Das Verhältnis wird in Prozent umgerechnet, d.h. × 100%. `* 100`{:.language-js} passiert innerhalb von `${ … }`{:.language-js}; das Prozentzeichen wird an dien StringZahl angehangen: `` `${ … }%` ``{:.language-js} *([template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals))*{:@en}.* Den Wert könnte man nun direkt `document.documentElement.style.backgroundPositionY`{:.language-js} zuweisen. Ich bin aber kein Freund davon, Werte von CSS-Eigenschaften mit JavaScript zu ändern. Deshalb weise ich den Wert der *custom property*{:@en} `--y` zu.* Durch `html { background-position: center var(--y, top) }`{:.language-css} im Stylesheet kommt der Wert bei der CSS-Eigenschaft an. (`top` ist der Defaultwert, wenn `--y` nicht anderswo gesetzt ist.)🖖 Живіть довго і процвітайте{:@uk}-- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix
Parallax-Effekt bearbeitet von Gunnar Bittersmann 31.10.2022 23:11 @@Gunnar Bittersmann> Parallax-Effekt ist doch ein [JavaScript-Einzeiler](https://codepen.io/gunnarbittersmann/pen/MWXaJRa?editors=0010)‽Was der Einzeiler tut:* Der Länge des Scrollwegs ist die Höhe des gesamten Dokumenteninhalts `document.documentElement.offsetHeight`{:.language-js} abzüglich der Höhe des Viewports `window.innerHeight`{:.language-js}.* Die relative Scrollposition ist das Verhältnis der absoluten Scrollposition `window.scrollY`{:.language-js} zum gesamten Scrollweg: `window.scrollY / (document.documentElement.offsetHeight - window.innerHeight)`{:.language-js}* Das Verhältnis wird in Prozent umgerechnet, d.h. × 100%. `* 100`{:.language-js} passiert innerhalb von `${ … }`{:.language-js}; das Prozentzeichen wird an den String angehangen: `` `${ … }%` ``{:.language-js} *([template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals))*{:@en}.* Den Wert könnte man nun direkt `document.documentElement.style.backgroundPositionY`{:.language-js} zuweisen. Ich bin aber kein Freund davon, Werte von CSS-Eigenschaften mit JavaScript zu ändern. Deshalb weise ich den Wert der *custom property*{:@en} `--y` zu.* Durch `html { background-position: center var(--y, top) }`{:.language-css} im Stylesheet kommt der Wert bei der CSS-Eigenschaft an. (`top` ist der Defaultwert, wenn `--y` nicht anderswo gesetzt ist.)🖖 Живіть довго і процвітайте{:@uk}-- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix
Parallax-Effekt bearbeitet von Gunnar Bittersmann 31.10.2022 23:10 @@Gunnar Bittersmann > Parallax-Effekt ist doch ein [JavaScript-Einzeiler](https://codepen.io/gunnarbittersmann/pen/MWXaJRa?editors=0010)‽ Was der Einzeiler tut: * Der Länge des Scrollwegs ist die Höhe des gesamten Dokumenteninhalts `document.documentElement.offsetHeight`{:.language-js} abzüglich der Höhe des Viewports `window.innerHeight`{:.language-js}. * Die relative Scrollposition ist das Verhältnis der absoluten Scrollposition `window.scrollY`{:.language-js} zum gesamten Scrollweg: `window.scrollY / (document.documentElement.offsetHeight - window.innerHeight)`{:.language-js} * Das Verhältnis wir in Prozent umgerechnet, d.h. × 100%. `* 100`{:.language-js} passiert innerhalb von `${ … }`{:.language-js}; das Prozentzeichen wird an den String angehangen: `` `${ … }%` ``{:.language-js} * Den Wert könnte man nun direkt `document.documentElement.style.backgroundPositionY`{:.language-js} zuweisen. Ich bin aber kein Freund davon, Werte von CSS-Eigenschaften mit JavaScript zu ändern. Deshalb weise ich den Wert der *custom property*{:@en} `--y` zu. * Durch `html { background-position: center var(--y, top) }`{:.language-css} im Stylesheet kommt der Wert bei der CSS-Eigenschaft an. (`top` ist der Defaultwert, wenn `--y` nicht anderswo gesetzt ist.) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix
nicht angemeldet nicht angemeldet
