Lab · Library

flux.js

Fünf Effekte in einem Script mit 4 KB.

Einbinden

Ein Script-Tag. Fehlt GSAP, lädt es sich selbst nach.

flux.min.js flux.js (lesbar)

4 KB gzipped, MIT-Lizenz

index.html
<script src="https://www.max-schleining.de/flux/flux.min.js" defer></script>

<h1 data-flux="reveal">Line by line</h1>

Effekte

  • data-flux="reveal"

    Zeilen gleiten beim Reinscrollen aus einer Maske nach oben.

    data-flux-duration="1.1"

  • data-flux="proximity"

    Buchstaben einer Variable Font werden in Mausnähe dünn und schmal.

    data-flux-radius="360" · data-flux-weight="200,800" · data-flux-width="75,100"

  • data-flux="scramble"

    Der Text entschlüsselt sich beim Drüberfahren.

    data-flux-chars="upperCase"

  • data-flux="marquee"

    Ein endloses Band, das mit deinem Scrollen schneller wird und sich neigt.

    data-flux-speed="0.6" · data-flux-direction="right"

  • data-flux="riso"

    Der Riso-Shader mit drei Farben auf einem Canvas, folgt der Maus.

    data-flux-colors="#f1efe8,#0e0e0e,#ff3b1f" · data-flux-scale · data-flux-grain

Wer im System weniger Bewegung eingestellt hat, bekommt reveal, proximity und marquee abgeschaltet. Lesbar bleibt der Text so oder so.

Ausprobieren

Jede Zeile kriegt ihre eigene Maske und ihren eigenen Moment.

Flux

  • Fahr drüber
  • Hier auch
  • Und hier
Reveal ✶ Proximity ✶ Scramble ✶ Marquee ✶ Riso ✶ 

JavaScript

Inhalt, der später kommt, ein Bundler, ein Framework: Dann startest und stoppst du es selbst.

Flux
app.html
<script src="https://www.max-schleining.de/flux/flux.min.js" data-flux-manual></script>
<script>
  // Bring your own GSAP (optional): Flux.use({ gsap, ScrollTrigger, SplitText, ScrambleTextPlugin })
  Flux.init(document.querySelector('#app'))   // start everything inside #app
  Flux.destroy(document.querySelector('#app')) // stop it and restore the markup
</script>