Animowany equalizer w CSS3 i jQuery

Animowany equalizer w CSS3 i jQuery

Animowane detale na stronach internetowych z pewnością zwiększają pozytywny odbiór, często jednak wydają się czasochłonne. Okazuje się jednak, że w paru liniach jesteśmy w stanie osiągnąć ciekawy efekt, który utkwi w podświadomości użytkownika.

Gotowiec

W inauguracyjnym wpisie, gotowiec do wykorzystania na własnej stronie – animowana ikona equalizera. Świetnie nadaje się na przełącznik „włącz/wyłącz dźwięk” w odtwarzaczu filmu.

See the Pen Equalizer icon by Michał Wilk (@devolk) on CodePen.22268

 

Gratisowo prosta ale jakże przydatna funkcja losująca liczbę z zakresu

function randomBetween(min, max) {
    if (min < 0) {
        return min + Math.random() * (Math.abs(min)+max);
    }else {
        return min + Math.random() * max;
    }
}

Chyba nic trudnego? A może da się lepiej?


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.