DH
David Hellmann
2016/06/26

Bodyclass per Javascript setzen um CSS Verhalten zu steuern

Seit ein paar Monaten bin ich ja mit meiner eigenen kleinen Boilerplate unterwegs, die von mir als Grundlage für neue Projekte genutzt wird. Mit dabei sind auch paar kleinere Javascript Snippets die ich ständig im Einsatz habe. Eines davon ist bodyclass.js was im Grunde nichts weiter macht, als beim Laden der Website ein paar Klassen zum body hinzufügt.

bodylclass.js

      
        /**
 * Set Body Classes
 */

var _body     = document.querySelector('body'),
    _steps    = 1000,
    _duration = 3000,
    _timer    = 0,
    _i        = 1;


while (_timer <= _duration) {

  if (_timer == 0) {

    _body.classList.add('is_ready');

  } else {

    setTimeout(function() {

      _body.classList.add('is_now_' + (_i * _steps));
      _i++;

    }, _timer);

  }

  _timer = _timer  + _steps;
}

Nehmen wir das ganze doch mal etwas auseinander…

      
        var _body     = document.querySelector('body'),
     _steps    = 1000,
     _duration = 3000,
     _timer    = 0,
     _i        = 1;

Im ersten Schritt werden die Variablen gesetzt. _body ist dabei das Ziel wo die Klassen hinzugefügt werden. _steps und _duration stehen in Verbindung. _duration ist dabei der höchstmögliche Wert in ms und _steps gibt an in welchen ms Sprüngen letztendlich hochgezählt wird.

_timer dient zum hoch zählen der _steps bis _duration erreicht wurde. _i ist ein einfach Zähler, der die _steps letztendlich multipliziert und es an einen Klassennamen hängt.

Die while Schleife läuft jetzt solange durch bis _steps kleiner gleich _duration ist.

      
        while (_timer <= _duration) {

  if (_timer == 0) {

    _body.classList.add('is_ready');

  } else {

    setTimeout(function() {

      _body.classList.add('is_now_' + (_i * _steps));
      _i++;

    }, _timer);

  }

  _timer = _timer  + _steps;
}

Dabei wird _timer immer wieder mit dem _steps Wert addiert. Innerhalb der while Schleife ist eine weitere if Abfrage vorhanden. Dort wird geprüft ob _timer gleich 0 ist und falls das der Fall ist, bekommt der body die Klasse "is_ready" hinzugefügt. Das heißt unsere Javascript Datei ist geladen und ausgeführt. Wenn _timer größer 0 ist wird der else Teil ausgeführt. Dort wird dann die setTimeout Funktion so oft aufgerufen bis die bis _timer größer als _duration ist. In dem Beispiel oben wäre das genau drei mal.

Letztendlich landen hier dann zusätzlich zur "is_ready" Klasse auch noch "is_now_1000, is_now_2000, is_now_3000" im body Element. Letztendlich recht unspektakulär aber bei mir wie gesagt des öfteren im Einsatz. Das mir wichtige dabei ist, dass ich etwas habe was fix ist wovon ich ausgehen kann um dann Sachen wie folgende zu machen:

      
        .aboutIntro__image {
  transform: translate3d(0, 200px, 0);
  transition: all 0.5s ease-out;
  opacity: 0;

  .is_now_1000 & {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: all 0.5s 0.1s ease-out;
  }
}

.aboutIntro__content {

  .copy {
    transform: translate3d(0, 300px, 0);
    transition: all 0.5s ease-out;
    opacity: 0;

    .is_now_1000 & {
      transform: translate3d(0, 100px, 0);
      opacity: 1;
      transition: all 0.5s 0.6s ease-out;
    }

    .aboutIntro__vertical {
      transform: translate3d(0, 100px, 0) rotate(-90deg);
      transition: all 0.5s ease-out;
      opacity: 0;

      .is_now_1000 & {
        transform: translate3d(0, -5px, 0) rotate(-90deg);
        opacity: 1;
        transition: all 0.5s 1s ease-out;
      }
    }
  }

  .headline {
    transform: translate3d(0, 300px, 0);
    transition: all 0.5s ease-out;
    opacity: 0;

    .is_now_1000 & {
      transform: translate3d(0, 100px, 0);
      opacity: 1;
      transition: all 0.5s 0.35s ease-out;
    }

    &::before {
      transform: translate3d(0, 200px, 0);
      transition: all 0.5s ease-out;
      opacity: 0;

      .is_now_1000 & {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        transition: all 0.5s 0.85s ease-out;
      }
    }
  }
}

Vielleicht kann ja jemand was damit anfangen. Wenn nicht, dann nicht :) Fragen und Anregungen gern in die Kommentare.

Development
Tags css development javascript
comments powered by Disqus

Maybe interesting…

UP