Jak wykonać preloader w czystym JavaScript’cie?

Zapewne każdy z nas spotkał tzw. preloader, czyli element zasłaniający witrynę, dopóki ta nie zostanie w pełni załadowana. Jak stworzyć coś takiego? Tego dowiemy się w dzisiejszym artykule! 🙂 Efekt końcowy. Zacznijmy od konkretów, bo nie chciałbym marnować Waszego czasu. Demo można znaleźć po tym oto adresem. Chciałbym abyśmy skupili się na mechanice, która powoduje, że…

Czytaj dalej

10 świetnych bibliotek z animacjami, które ożywią Twoje strony internetowe

Nie da się ukryć, że jeśli nie przesadzimy z animacjami, to okazują się bardzo ciekawym elementem, który sprawia, że nasze witryny nabierają życia i stają się znacznie bardziej interaktywne. Tylko, że nieraz stworzenie ciekawej animacji może wymagać sporej ilości pracy w stosunku do otrzymanego rezultatu i właśnie w tym przypadku z pomocą przychodzą nam biblioteki,…

Czytaj dalej

Efekt maszyny do pisania wykonany w JavaScript za pomocą biblioteki Typed.js

Czy kiedykolwiek spotkałeś efekt, w którym tekst samoistnie się pojawia, sprawiając wrażenie pisanego automatycznie? A jeśli tak, to czy myślałeś może jak zrobić coś takiego? W tym wpisie chciałbym pokazać jeden ze sposobów, jakim jest dość popularna biblioteka, o nazwie Typed.js. Zapraszam do lektury! 🙂 Czym jest biblioteka Typed.js? Nazwa ta określa chyba najbardziej rozbudowany…

Czytaj dalej

Wycinanie elementów w CSS dzięki właściwości clip-path

CSS jest rozwijany z każdym dniem, otrzymując coraz to nowe funkcjonalności, które ułatwiają nam tworzenie stron internetowych. Właśnie o jednej z nich chciałbym pomówić w tym artykule, a dokładnie o właściwości clip-path, która to pozwala nam na wycinanie elementów, a tym samym tworzenie mniej prostokątnych stron internetowych. 🙂 Trochę ogólnych informacji. Eksperymentalna właściwość clip-path, pozwala na…

Czytaj dalej

Jak dodać efekt pojawiania się elementów podczas przewijania strony internetowej?

Każda osoba, która przegląda Internet musiała spotkać się z efektem tzw. pojawiającej się treści. Niektórzy z nas mogli wtedy pomyśleć: Jak stworzyć coś takiego? 🙂 Otóż sposobów jest wiele. Ja przez długi czas korzystałem z połączenia Animate.css oraz Viewport Checker, biblioteki opierającej się na jQuery. Niektórzy zamiast tego drugiego używają tzw. Waypoints, z kolei jeszcze…

Czytaj dalej

10 darmowych szablonów PSD, które zwiększą Twoje doświadczenie w tworzeniu stron internetowych

Chyba każda osoba, która kiedykolwiek chciała tworzyć strony internetowe zadała sobie jedno bardzo ważne pytanie: “W jaki sposób mam się tego nauczyć?” Często mogła otrzymać według mnie najlepszą odpowiedź: przez tworzenie własnych projektów. Ale co robić gdy nie mamy pomysłu na żadną witrynę, ani tym bardziej nie chcemy jej wymyślać? W takiej sytuacji z pomocą…

Czytaj dalej

Efekt parallax wykonany w czystym CSS!

Pewnie wielu z Was zna efekt, działający w ten sposób, że konkretna część strony internetowej przesuwa się w innej szybkości niż reszta. Niestety zwykle bazuje on na skryptach JavaScript, które często spowalniają naszą witrynę. Tymczasem da się tego dokonać szybciej oraz znacznie przyjemniej, tylko stylizując nasz element w CSS. Już pokazuję jak to zrobić (tu…

Czytaj dalej

Zmienne znane z programowania. Teraz w czystym CSS!

Czy wiedziałeś o tym, że w CSS można deklarować oraz później wykorzystywać zmienne? Dokładnie! A to wszystko bez używania jakichkolwiek preprocesorów, takich jak Sass czy Less! Mogą się świetnie sprawdzić podczas chociażby kodowania kolorów, gdzie nie musimy kopiować każdego kodu szesnastkowego w celu jego użycia! Wsparcie poszczególnych przeglądarek. Oczywiście zmienne w CSS to stosunkowo świeża…

Czytaj dalej

13 dobrych praktyk, które sprawią, że Twój kod CSS stanie się lepszy!

Ostatnio Bartłomiej Mąkina z bloga Devcorner.pl stworzył artykuł, w którym wymienia 7 złych praktyk podczas pisania kodu CSS. Zainspirowało mnie to do stworzenia swojego wpisu, w którym przedstawiam przeciwieństwo, czyli dobre praktyki 🙂 Dowiemy się dziś dlaczego w ogóle warto zwracać uwagę na poprawność naszego kodu CSS oraz poznamy dokładnie 15 sposobów na zwiększenie jego…

Czytaj dalej