Lectia 3 – Efecte de tranzitie

In lectia 3 din cursul Optimizare pentru mobil vom invata despre efectele de tranzitie pentru pagini. Aceste efecte includ efecte de tranzitie bazate pe CSS si se pot aplica atat pentru pagini cat si pentru executarea unui formular.

Cream un fisier html cu doua pagini

Ca sa putem juca cu efectele de tranzitie avem nevoie de minim 2 pagini. Ca sa nu pierdem timpul vom folosi continutul fisierului html din lectia 2 si vom adauga atributul data-transition=”pop” pentru a defini efectul de tranzitie „pop” – vezi liniile 24 si 45 – .

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 1 - Introducere in jQuery Mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body> 

  <!-- PRIMA PAGINA -->
  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 3 - Efecte de tranzitie</h1>
	</div>

	<div data-role="content">
	<p><center>"... avem nevoie de minim 2 pagini. Ca sa nu pierdem timpul vom folosi continutul fisierului html din lectia 2 si vom adauga atributul data-transition=”pop” pentru a defini efectul de tranzitie "pop" .."</center></p>

	</div>

	<div data-role="footer">
	<a href="#lectia2" 
           data-transition="pop"
	   title="Lectia 2 – Creare legaturi intre pagini">Lectia 2</a> 
	</div>
	</div>
   </div>



  <!-- PAGINA LECTIA 2-->
  <div data-role="page" id="lectia2">
	<div data-role="header">
	<h1>Lectia 2 – Creare legaturi intre pagini</h1>
	</div>

	<div data-role="content">
	<p><center>...Utilizand jQuery Mobile, toate request-urile in principiu sunt request-uri AJAX, iar pentru a implementa inca o pagina avem nevoie de inca un div cu data-role='page'..</center></p>

	</div>

	<div data-role="footer">
	<a href="#home" 
           data-transition="pop"
	   title="Lectia 3 - Efecte de tranzitie">Lectia 3</a> 
	</div>
   </div>


</body>
</html>

Lista efecte de tranzitie

Spre bucuria noastra exista mai multe efecte de tranzitie*, cele mai folosite efecte sunt urmatoarele:

  • fade
  • pop
  • flip
  • turn
  • flow
  • slidefade
  • slide
  • slideup
  • slidedown
  • none**

* – exista posibilitatea de a crea efect de tranzitie personalizat.
** – none se foloseste cand nu dorim niciun efect tranzitie.

V-am pregatit fisierul demo, pentru cei care vor sa vada rezultatul inainte sa parcurga lectia.
Vizualizeaza DEMO

Feedback si Share

Astept feedback si intrebari sub forma de comentariu.
Sprijina aceste lectii prin FB LIKE si SHARE, GOOGLE +1, TWEET, etc.

O părere la “Lectia 3 – Efecte de tranzitie”

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s