iPhone mockup: tworzymy perspektywiczny slider

iPhone mockup: tworzymy perspektywiczny slider

W sieci krążą tysiące darmowych mockup-ów do wykorzystania przy prezentacji własnych produktów. Dlaczego nie wykorzystać ich jako pokaz slajdów? Dziś pokażę w kilku krokach jak stworzyć slider na gotowej grafice przy użyciu transformacji CSS i odrobiny jQuery.

Po pierwsze: nie zaczniemy od zera – wykorzystamy jedną z najlepszych bibliotek JavaScript do pokazu slajdów – Slick Carousel. Podobnych wtyczek istnieje cała masa ale prawda jest taka, że żadna z nich nie daje tylu możliwości i nie jest tak elastyczna na modyfikacje jak Slick.

Po drugie wykorzystamy mockup dostępny do pobrania tutaj: https://dribbble.com/shots/1870354-Free-Awesome-iPhone-6-Mockup

Jak to ugryźć?

Koncepcja jest nadzwyczaj prosta.

  1. Osadzamy grafikę na stronie
  2. Tworzymy typowy slider o proporcjach ekranu iPhone
  3. Dopasowujemy perspektywę i położenie slidera

O ile pierwsze dwa punkty nie będą stanowiły problemu dla osób z podstawową znajomością CSS i HTML, o tyle najtrudniejsze okazuje się przekształcenie slidera tak aby dokładnie wypełniał obszar ekranu iPhone. Aby uzyskać identyczną perspektywę wykorzystamy program Adobe Photoshop i narzędzie Free Transform Path. W pobranym pliku PSD, tworzymy półprzezroczysty prostokąt:

iphone-step1

Następnie łapiąc każdy z kolejnych narożników i przytrzymując klawisz CMD (Mac OS X) , swobodnie przekształcamy obiekt tak aby osiągnąć kształt najbardziej zbliżony do kształtu wyświetlacza.

iphone-step2

Gdy osiągniemy zamierzony kształt czas na najważniejszą sprawę a mianowicie odczyt stopnia przekształceń. Te informacje pokazują się w górnym pasku narzędziowym podczas dokonywania transformacji.

iphone-toolbar

Aby uzyskać podobny efekt w CSS zapisujemy sobie trzy ostatnie parametry podane w stopniach czyli: „Rotate”, „Horizontal skew” oraz „Vertical skew”. Tłumacząc owe parametry na język CSS otrzymujemy taką transformację:
transform: rotate(-37.78deg) skewX(10.92deg) skewY(1deg);

Jeżeli udało Ci się to zrobić, to wiedz, że najgorsze już za Tobą. Teraz zbieramy wszystko do kupy:

 

See the Pen iPhone mockup slider (with slick.js) by Michał Wilk (@devolk) on CodePen.22268

Prawda, że proste?

Zainteresowanych tematem zapraszam również do zapoznania się z materiałami udostępnionymi na Codrops: http://tympanus.net/codrops/2014/11/21/perspective-mockup-slideshow/


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.