LG OledTV strona produktowa nowej serii telewizorów LG

Firmy LG Electronics nie trzeba szerzej prezentować. Jest jednym ze światowych liderów oferujących rozwiązania z dziedziny elektroniki użytkowej a także od kilku lat jest wiodącym producentem matryc używanych w telewizorach oraz monitorach komputerowych. Prezentowana strona internetowa powstała na zlecenie firmy K2 i prezentuje nową serię telewizorów klasy OledTv.

W czasie tworzenia strony dla LG byłem pracownikiem firmy Webidea. Projekt graficzny jak i cała koncepcja dotycząca działania strony powstała w firmie K2 a ja byłem odpowiedzialny za zaprogramowanie od początku do końca w pełni działającej strony internetowej. Założenia projektowe nie przewidywały integracji szablonu graficznego z żadnym konkretnym CMS'em więc moja praca polegała na stworzeniu strony produktowej przy użyciu statycznych plików HTML z dodatkiem funkcjonalności oferowanych przez język JavaScript.

Konstrukcja strony zastosowane rozwiązania i kluczowe cechy

LG OledTV - strona startowa
Dostraczony przez firme K2 projekt graficzny przewidywał, że cała strona dzieli sie na kilka sekcji. Każda z sekcji w pełni zajmowała obszar widoczny przeglądarki i odpowiednio dostosowywała się do jego rozmiaru. Sekcje różniły się między sobą i charakteryzowały się odmienną funkcjonalnością oraz zachowaniem. Z tego powodu całość podzieliłem na moduły JavaScript AMD, które udstępniały proste API pozwalające na uruchamianie i wyłączanie odpowiedniego modułu. Do ładowania modułów zastosowałem bibliotekę RequireJS, dzięki czemu mogłem w prosty sposób dołączać do modułów odpowiednie zależności i potrzebne biblioteki. Nawigowanie pomiędzy sekcjami realizowane było za pomocą menu umieszczonego u góry strony lub za pomocą rolki myszki więc poruszanie po stronie było bardzo proste i intuicyjne. Aby uzyskać płynny efekt przejazdu pomędzy sekcjami zastosowałem bibliotekę velocity.js, która posłużyła do animowania transformacji CSS. Całość zbudowałem z zachowaniem zasad RWD (Responsive Web Design), jednak dla urządzeń mobilnych stworzyłem duplikat strony o uproszczonej funkcjonalności. Do wykrywania urządzeń mobilnych posłużyłem się biblioteką mobiledetect, która pozwala na wykrycie danego urządzenia poprzez badanie nagłówka User-Agent.
LG OledTV - działy
Sekcje opisujące cechy telewizorów z serii OledTV były podzielone na trzy fragmenty. Każdy z tych działów przesuwał się w poziomie, a dołożony efekt parallax pozwalał na pokazanie różnic pomiędzy technologią starego typu a nową technologią OledTv. Do konstrukcji tych działów zastosowałem wtyczkę parallax.js, która w łatwy sposób pozwala na uzyskanie wrażenia głębi przesuwających się warstw a jednocześnie dzięki zastsosowaniu przejść CSS całośc dziaął w bardzo płynny i przyjemny dla oka sposób.
LG OledTv - obracający się telewizor
Jednym z ważniejszych elementów strony był interaktywny pokaz telewizora w 360 stopniach. Na podstawie dostraczoncych klatek animacji zaprogramowałem pokaz wykorzytsując bibliotekę reel. Tą samą bibliotekę zastosowałem do stworzenia poklatkowych animacji, które pojawiały się w działach pokazujących możliwości telewizorów serii OledTv.

Podsumowanie odnośniki i podstawowe informacje