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

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 Three 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.0


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. 🙂

Programista zakochany w JavaScript’cie, twórca stron internetowych i jak widać od niedawna bloger 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *