search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[Web] Niesamowite możliwości języków webowych – zestaw 1

[Web] Niesamowite możliwości języków webowych – zestaw 1

Postanowiłem stworzyć nową serię wpisów na blogu. Będzie to seria artykułów dotyczących możliwości jakie dają obecne języki webowe.

Bardzo często nawet nie zdajemy sobie sprawy z tego jak wiele różnych rzeczy mniej lub bardziej użytecznych można stworzyć za pomocą JS, HTML5 i CSS3. Dzisiejszy zestaw efektów to znaleziska odkryte w Internecie i w sieciach społecznościowych.

1. Symulacja cieczy i wzory Turringa

HTML5 symulacja cieczy

Ten efekt zadziała w przeglądarkach, które wspierają technologię WebGL, np. Firefox.

2. Dynamiczne animacje w stylu klubowych laserów

HTML5 laserowe stroboskopy

Ten przykład najlepiej oglądać w Google Chrome.

3. Eksperyment ze światłem i muzyką

HTML5 muzyka i światła

Jeden z moich ulubionych. Działa w Firefox i Google Chrome.

4. Generowanie realistycznie wyglądającej postaci za pomocą biblioteki three.js

Three.js - realistyczne modele ludzi

Kiedyś była to sfera zarezerwowana tylko i wyłącznie dla języków programowania gier, typu C++ i bibliotek DirectX. Teraz podobne efekty można osiągnąć za pomocą WebGL i JS. Niesamowita sprawa.

5. Kolejny przykład animacji 3D

Efekt 3D w canvas

Tu mamy do czynienia z nieco prostszym przykładem, ale równie efektownym.

Podsumowanie

Mam nadzieję, że podoba Ci się taka idea serii wpisów w których będę zamieszczał swoje znaleziska. Dzięki nim można znaleźć inspirację do swoich prac, a także podpatrzeć sposoby pisania kodu CSS czy też JS, aby osiagnąć zamierzone efekty.
Co sądzisz o takiej formie wpisów? Zapraszam do komentowania 🙂

  • Comandeer

    Jakoś bardziej lubię samemu sobie poszperać w Sieci, szukając takich dziwadeł 😉 choć takie wpisy również są interesujące
    ALE… 😉 chyba bardziej zainteresowałby mnie wpis typu „znalazłem super hiper efekt w JS z zastosowaniem grafiki 5D i po przeglądnięciu jego kodu doszedłem do wniosku, że kilka rzeczy można usprawnić” (np tak jak CSS Ninja zrobił z drag’n’drop upload w GMailu).

  • Jasne, że można i tak. Lecz do tego trzeba mieć trochę więcej czasu niż ja mam. Wtedy mógłbym na spokojnie przeanalizować zastosowane rozwiązanie a potem ulepszać.