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/


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.