70-480 – Tworzenie animowanego i adaptacyjnego interfejsu użytkownika

70-480

Animacja obiektów poprzez stosowanie przejść CSS; stosowanie przekształceń 3-D i 2-D; dostosowywanie interfejsu użytkownika na podstawie kwerend dotyczących nośników (dostosowywanie urządzeń do formatów wyjściowych, rozwiązań do wyświetlania i prezentowania informacji), ukrywanie lub wyłączanie elementów sterujących.



Tytuł oraz opis materiału dzisiejszego wpisu zaczerpnięte z oficjalnego przewodnika do egzaminu 70-480 nie są być może zbyt czytelne i zrozumiałe. Jest to część poświęcona transformacjom CSS (2D oraz 3D) oraz @media queries.

CSS3 transitions

Dzięki CSS3 jesteśmy w stanie zdefiniować przejścia / animacje bez użycia Flash, czy JavaScript. Dzieje się tak za sprawą właściwości transition, która pozwala pokazać przejście z jednego stylu w inny. Tworzone animacje można łączyć z właściwościami translate oraz transform, o czym pisałem już wcześniej.

Dzięki właściwości transition jesteśmy w stanie wskazać jaką inną właściwość chcemy animować oraz przez jak długi czas. Tym samym musimy podać dwa argumenty:

  • właściwość, którą chcemy animować
  • czas animacji – bez podania czasu nie zobaczymy animacji, bo wartość domyślnie ustawiona będzie na 0

Spójrzmy na przykład animacji zmiany wysokości elementu blokowego, która trwać będzie jedną sekundę: transition: height 1s. Wystarczy, że najedziemy na poniższy czerwony prostokąt by zobaczyć efekt.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Należy pamiętać, że np. przeglądarka Internet Explorer 9 nie wspiera własności: transiton. Pełny wykaz wsparcia: http://caniuse.com/#feat=css-transitions

Efekty możemy również łączyć, podając kolejne wartości po przecinku. Spójrzmy zatem na przykład animacji zarówno wysokości jak i szerokości: transition: height 1s, width 2s z tą różnicą, że efekt animacji dla zmiany wysokości elementu potrwa jedną sekundę, a zmiana szerokości elementu dwie sekundy.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Własność transition rozbita została na kilka różnych własności, które podawać możemy niezależnie:

  • transition-property – jaką własność chcemy animować
  • transition-duration – przez jaki czas
  • transition-timing-function – jaką funkcję czasu chcemy użyć w stosunku do prędkości oraz czasu animacji (ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier)
  • transition-delay – opóźnienie w wywołaniu animacji

Wszystkie cztery wartości możemy oczywiście połączyć w jedno: transition. Spójrzmy na przykład dwóch takich samych animacji utworzonych na dwa róże sposoby.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Jeśli chodzi o funkcje czasu, to świetnie opisano i pokazano to na stronie: http://www.the-art-of-web.com/css/timing-function/

Różnymi opcjami możemy eksperymentować ponownie na tech demo przygotowanym przez Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_transitions.htm

Transformacje CSS3 2D

O transformacja 2D pisałem już w jednym z pierwszych wpisów: 70-480 – Programowe stosowanie stylów do elementów HTML

Transformacje CSS3 3D

Spójrzmy najpierw na przykład:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Widzimy tutaj wykorzystanie animacji za pomocą własności transition, która określona została dla własności transform. To własnie ta własność powoduje, że możemy manipulować elementami blokowymi, wykorzystując w tym celu następujące funkcje:

  • rotateX (angle) – obrót wokół osi X
  • rotateY (angle) – obrót wokół osi Y
  • rotateZ (angle) – obrót wokół osi Z
  • rotate3d (x, y, z, angle) – obrót wokół wektora definiowanego przez parametry x, y, z
  • scaleX (x) – skalowanie wzdłuż osi X
  • scaleY (y) – skalowanie wzdłuż osi Y
  • scaleZ (z) – skalowanie wzdłuż osi Z
  • scale3d (x, y, z) – skalowanie wzdłuż wektora definiowanego przez parametry x, y, z
  • translateX (x) – przesunięcie wzdłuż osi X
  • translateY (y) – przesunięcie wzdłuż osi Y
  • translateZ (z) – przesunięcie wzdłuż osi Z
  • translate3d (x, y, z) – przesunięcie wzdłuż wektora definiowanego przez parametry x, y, z
  • perspective (n) – definicja perspektywy
  • matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) – mix wszystkiego powyżej, poszczególne wartości odpowiadają odpowiednim przekształceniom

Oprócz własności transform, wyróżniamy także:

Tutaj również przychodzi nam z pomocą demo od Microsoft:  http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_3d-transforms.htm

CSS3 @media queries

W kontekście własności / atrybutu @media można napisać bardzo wiele. Atrybut (html) / własność (CSS) ten / ta służy do definiowania (w uproszczeniu) różnych rodzajów styli w zależności od urządzenia, które wyświetla stronę oraz od rozdzielczości dostępnej na ów urządzeniu.

Świetny, a zarazem krótki artykuł, który to opisuje znalazłem na css-tricks.com i pozwolę sobie odesłać Was do niego: Logic in Media Queries

Pokazywanie i ukrywanie elementów za pomocą CSS

O tym również pisałem już wcześniej: 70-480 – Programowe stosowanie stylów do elementów HTML

Roundup #11 – Mobify, Freetile, TiltShift, Enquire, jsPDF

Roundup #11 - Mobify, Freetile, TiltShift, Enquire, jsPDF

Mobify

Mobify.js is an open source client-side web framework that helps you adapt any website to support any device. Powering millions of daily mobile visits to your favourite websites.


Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.

Pinterest-like Layout Plugin without Fixed Column Width


TiltShift

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

CSS3 Tilt-Shift Effect jQuery Plugin


Enquire

A lightweight JavaScript library for handling CSS media queries.

  • Deal with your media queries being matched (and even unmatched!)
  • Respond to browser events with aplomb
  • And if you want to get really fancy, run one-time setup routines
Handle CSS Media Queries With JS – Enquire.js

jsPDF

PDF files that are created online usually make use of the server-side languages (and their extensions/libraries for PDF).

jsPDF, a free JavaScript library, doesn’t need any server-side script and can create PDF files on the client-side.

Create PDF Files With JavaScript – jsPDF


[1], [2], [3]

Roundup #6 – Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Roundup #6 - Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Screenqueri

Screenqueri.es is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions.

Screenqueri.es – A responsive design testing tool


JZoopraxiscope

JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.

JZoopraxiscope – A jQuery plugin for making animations from static images


Meny

A three dimensional and space efficient menu concept created with JavaScript and CSS3.

Meny – A CSS 3D fold-in menu concept


BigVideo

BigVideo.js – The jQuery Plugin for Big Background Video.

Showing Big Background Video with BigVideo.js


Really Simple Slideshow

Really Simple Slideshow is a jQuery plugin for creating image slideshows. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

Really Simple Slideshow: A Flexible Slider Plugin


jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

jQuery Picture – A Plugin For Responsive Images


Infinity

Infinity is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant. The code is hosted on Github, and distributed under the BSD License. The annotated source is available, as are demos both with Infinity turned off and on.

Infinity.js


lorem

Text generator that works with Node and browsers, and it includes optional jQuery plugin support.


oriDomi

Small script with optional jQuery support that creates an effect on images and web fonts that looks like folding paper, by using CSS 3D transforms.


[1], [2], [3], [4]