Pokażę Wam, jak przy pomocy „gołego” JavaScript można zrobić na stronie internetowej animowany baner, nawet taki wielowarstwowy z efektem paralaksy.
Efekty paralaksy już od dawna są bardzo popularne. Chociaż to tylko wodotrysk, to bardzo uatrakcyjniają stronę zwłaszcza typu one-page. Do ich obsługi powstało sporo pluginów, ale wiele z nich można uzyskać ręcznie wklepując kilkadziesiąt linijek kodu. Pokażę Wam, jak to zrobić.
Sliderów jest w internecie ogromna ilość. Niektóre są bardzo proste, inne totalnie wypasione, a ich kod jest większy od biblioteki jQuery. Nie chciałem być gorszy i napisałem swój na własne potrzeby. Teraz udostępniam dla Was.
Czasami zachodzi potrzeba wyświetlenia miniatur galerii, żeby zdjęcia dokładnie wypełniały szerokość ekranu bez względu na jego wielkość. Tak to działa między innymi w Google Grafika czy Adobe Stock. Taki minimalistyczny plugin przygotowałem także na swoje potrzeby.
Uwielbiam minimalizm i 100% kontroli nad kodem, dlatego bardzo długo z nieufnością podchodziłem do jQuery. Teraz jednak widzę, jaki byłem niemądry, ta biblioteka ma naprawdę moc. Oczywiście bez przesady, są rzeczy, które łatwiej i szybciej się zrobi w gołym JavaScript, jednak w wielu przypadkach pozwala zaoszczędzić wiele pracy.
Obiekt Canvas to świetny wynalazek. Długo do niego nie podchodziłem, ze względu na początkową niekompatybilność wszystkich przeglądarek (zwłaszcza MSIE), poza tym nigdy nie był mi specjalnie potrzebny. Teraz jednak zaszła konieczność jego użycia, a najwięcej problemów sprawiło głupie 15 bajtów.
Siedziałem sobie niedawno w Zamkowych Tarasach z waniliowym latte w kubku i Macbookiem przed sobą. Kawa nie była ze Starbucksa, bo go nie ma jeszcze w Lublinie, ale Mac był jak najbardziej Applowski. Miałem potrzebę wysłać tu na bloga kilka zdjęć. Skorzystałem więc ze swojego multiuploadera i... dupa. Nie działał. Jak to się mogło stać?