10 świetnych efektów użytych na zdjęciach

Front-end 5 minut czytania

Współczesne wersje technologii webowych powalają nam na tworzenie bardzo ciekawych efektów, które sprawiają, że nasze witryny stają się znacznie bardziej interaktywne oraz przyjemniejsze w odbiorze.

Dlatego w tym artykule pokażę Ci przykłady tego, w jaki sposób przy pomocy CSSa oraz JavaScriptu możemy stworzyć świetne efekty gotowe do użycia na wszelkich grafikach dodanych do stron internetowych. Zapraszam!

Numer 1: Three Image Transition by Szenia Zadvornykh.

Autor: Jrsqn.

See the Pen Image Transition by Szenia Zadvornykh by Jrsqn (@last-first) on CodePen.

Numer 2: Romantic Zoom Effect.

Autor: Adrien Bachmann.

See the Pen Romantic Zoom Effect by Adrien Bachmann (@AdrienBachmann) on CodePen.

Numer 3: Direction-aware 3D hover effect (Concept).

Autor: Noel Delgado.

See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.

Numer 4: Venetian Blinds.

Autor: Dimitra Vasilopoulou.

See the Pen Venetian Blinds by Dimitra Vasilopoulou (@mimikos) on CodePen.

Numer 5: 3D Hover Interaction

Autor: Bhakti Al Akbar.

See the Pen 3D Hover Interaction by Bhakti Al Akbar (@balapa) on CodePen.

Numer 6: Image with reflection and proximity effect on hover.

Autor: Tiago Alexandre Lopes.

See the Pen Image with reflection and proximity effect on hover by Tiago Alexandre Lopes (@TiagoLopes) on CodePen.

Numer 7: Split image in tiles.

Autor: Fabio Ottaviani.

See the Pen Split image in tiles by Fabio Ottaviani (@supah) on CodePen.

Numer 8: 3D Thumb Image Hover Effect.

Autor: MrPirrera.

See the Pen 3D Thumb Image Hover Effect by MrPirrera (@pirrera) on CodePen.

Numer 9: Displacementmap image transition.

Autor: Felix Knox.

See the Pen Displacementmap image transition by Felix Knox (@flexmotion) on CodePen.

Numer 10: SVG clip-path Hover Effect.

Autor: Noel Delgado.

See the Pen SVG clip-path Hover Effect by Noel Delgado (@noeldelgado) on CodePen.

Podsumowanie.

Tak oto prezentuje się zestawianie dziesięciu bardzo ciekawych efektów użytych na zdjęciach i stworzonych za pomocą CSSa oraz w kilku przypadkach JavaScriptu.

Standardowo w razie jakichkolwiek uwag lub pytań zapraszam Cię do zostawienia komentarza. 🙂

Komentarze

Może dodasz coś od siebie?