Ein HTML Synthesizer mithilfe von Audiolet.js

Ein rudimentärer Versuch einen Javascript-Audio-Synthesizer zu erstellen. Es handelt sich noch um eine recht frühe Version, die ich gerne noch um einige Funktionen erweitern möchte, damit daraus irgendwann vielleicht mal ein „vollwertiger“ Synthesizer entsteht.

Dieser Synthesizer bietet Low-Pass und High-Pass Filter und einen Delay-Effekt mit einigen Einstellugnen.

Update: Ich habe auch eine neuere Version mit einer anderen Sound-Bibliothek gemacht, wo ich den Sound etwas besser im Griff habe.

FontAwesome: Pulsierendes Herz

FontAwesome ist klasse, wenn man mal schnell Icons haben möchte. Unkompliziert einzubinden und flexibel in der Anwendung. In den Stylesheets von FontAwesome sind bereits einige wenige nützliche Animationen mit dabei (fa-spin, fa-pulse), aber man kann sich sehr einfach weitere, sinnvolle Helfer-Klassen definieren, wie zum Beispiel hier:

Folgender zusätzlicher SCSS-Code wurde dafür verwendet:

.fa-beat {
  animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
  0% {
    transform:scale(1);
  }
  5% {
    transform:scale(1.25);
  }
  20% {
    transform:scale(1);
  }
  30% {
    transform:scale(1);
  }
  35% {
    transform:scale(1.25);
  }
  50% {
    transform:scale(1);
  }
  55% {
    transform:scale(1.25);
  }
  70% {
    transform:scale(1);
  }
}

Hinweis: Damit die CSS-Animation browser-übergreifend funktioniert braucht man in manchen Browsern immer noch Vendor-Prefixes: vgl. caniuse.com

Nur mit CSS: Akkordeons mit animiertem Plus-Minus-Symbolen

Funktionsweise

Neben den entsprechenden Akkordion-Buttons befindet sich eine versteckte Checkbox.
Mithilfe des General sibling selectors (Allgemeiner Geschwister-Selektor) kann der Akkordion-Inhalt entsprechend dem Status der Checkbox verändert werden.

Also zum Beispiel:

<input type="checkbox" />
<div class="accordion-content"></div>
.accordion-content {
  display:none;
}
input:checked ~ .accordion-content {
  display:block;
}

Onlinepartei – Social Politplatform wieder online!

http://onlinepartei.eu

Source-Code auf Github: https://github.com/grilly86/onlinepartei/

Top