Tutorial Popular Responsive

Slider Responsive Full Screen con testi animati utilizzando Flex Slider

By Andrea Marchetti
@marchetti_design

Oggi vedremo come costruire uno Slider di immagini Fullscreen con testi animati utilizzando l’affidabile FlexSlider 2. Imposteremo prima il Css in modo che le slide occupino tutto lo spazio disponibile, poi animeremo i testi con jquery e infine renderemo il tutto Responsive grazie alle media queries.

1) Inzializziamo Flexslider

Scarichiamo lo slider al seguente indirizzo, scompattiamo il file e copiamo i file flexslider.css e jquery.flexslider.js nella cartella del nostro progetto.

In questa cartella creiamo il file index.html dentro questo pagina richiamiamo gli stili necessari.

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

Il primo serve al funzionamento di default dello slider, il secondo slider.css è il file nel quale scriveremo le modifiche per rendere lo slider Fullscreen.

A fine pagina richimiamo i file javascript di jquery e Flexslider:

<!– jQuery –>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <script>window.jQuery || document.write(‘<script src="js/libs/jquery-1.7.min.js">\x3C/script>’)</script>
  <!– FlexSlider –>

  <script defer src="js/jquery.flexslider.js"></script>
  <script type="text/javascript">
    $(window).load(function(){

      $(‘.flexslider’).flexslider({

        animation: "fade"
      });
    });
  </script>

2) Impostiamo l’HTML base

Lo slider per funzionare correttamente e mostrare i testi “caption” sopra le immagini ha bisogno di una struttura html di questo tipo:

<div class="flexslider">

          <ul class="slides">

	            <li>

	            	<img src="my_img.jpg"/>

	            	<div class="flex-caption">
                              …
	            	</div>

	            </li>

	  	    <li>

	            	<img src="my_img.jpg"/>

	            	<div class="flex-caption">
                              …
	            	</div>

	            </li>

          </ul>

    </div>

3) Definaimo il CSS

Ora nel file slider.css scriviamo il css che andrà a sovrascrivere il css di default di FlexSlider rendendo ogni slide grande come l’intera pagina.

body, html	{margin:0; padding:0;width:100%;height:100%!important; overflow-x: hidden;}
		.flexslider, .flex-viewport	{width:100%;height:100%!important; margin:0;padding:0;}
		.flexslider .slides		{height:100%!important;}

                .flexslider .slides li 	{width:100%;height:100%!important; margin:0;padding:0;}

Con height: 100%Important ogni slide è forzata a occupare tutta l’atezza visibile disponibile, se però inseriamo un immagine in una delle slide vediamo che questa occupa tutta la larghezza della pagina ma non tutta l’altezza.

4) Impostiamo le immagini Fullscreen

Per rendere le immagini alte come l’altezza della pagina utilizziamo un piccolo trick css. Come prima cosa impostiamo l’immagine come background della slide li

<div class="flexslider">

          <ul class="slides">

	            <li style="background: url(img/1.jpg) center">
	            	<div class="flex-caption">

		            	<h1>Amsterdam, Netherlands</h1>

		            	<p>The capital and most populous city of the Netherlands</p>

	            	</div>

	            </li> 
	  	    	<li style="background: url(img/2.jpg) center">
	  	    	    <div class="flex-caption">

		            	<h1>Noord, Netherlands</h1>

		            	<p>The largest metropolitan area</p>

	            	</div>

	  	    	</li>
          </ul>

    </div>

Poi utilizzando la propietà Css3 background-size: impostata come cover rendiamo le immagini in background alte come le slide li impostate con height :100%

.flexslider .slides li 	{width:100%;height:100%!important; margin:0;padding:0;

								  -webkit-background-size: cover!important;

								  -moz-background-size: cover!important;

								  -o-background-size: cover!important;

								  background-size: cover!important;

		}

5) Animiamo le caption

Per animare i testi usiamo due funzioni javascript che eseguiremo con i callback before e after di Felxslider. Before viene eseguito prima del cambio di slide, after viene eseguito dopo l’animazione della slide in ingresso.

$(window).load(function(){

      $(‘.flexslider’).flexslider({

        animation: "fade",

        start: function(){},            //Callback: function(slider) – Fires when the slider loads the first slide

		before: function(){captionMoveOut();},           //Callback: function(slider) – Fires asynchronously with each slider animation

		after: function(){captionMoveIn();},            //Callback: function(slider) – Fires after each slider animation completes

		end: function(){},              //Callback: function(slider) – Fires when the slider reaches the last slide (asynchronous)

		added: function(){},            //{NEW} Callback: function(slider) – Fires after a slide is added

		removed: function(){}

      });
      $(‘.flex-caption’).hide();
      $(‘.flex-caption’).fadeIn(2000);
    });
    function captionMoveIn() {

		$(‘.flex-caption’)

		.animate({top: "35%"},0)

		.fadeIn(2000)

	;};
	function captionMoveOut() {

		$(‘.flex-caption’)

		.animate({top: "-40%"},700)

		.fadeOut("normal")
	;};

Dopo aver inizializzato lo slider nascondiamo i testi “caption” con il metodo hide(); di jquery.

La funzione captionMoveIn(); (legata al callback after) mostra il testo con un effetto fade in di 2000 millisecondi dopo l’ingresso della slide.

La funzione captionMoveOut(); (Legata al callback before) effettua un fade out del testo e sposta la caption verso l’alto prima del cambio slide.

6) Rendiamo il tutto Responsive

Ora lo slider ridimensiona correttamente le immagini ma non le caption che rimangono troppo grandi su Smartphone e Tablet. Con due media queries rendiamo la grandezza delle caption ottimale anche su device mobili.

@media (min-width: 768px) and (max-width: 980px) {
			.flex-caption h1	{font-size: 55px;}
			.flex-caption p		{font-size: 13px;}
			.flex-control-nav 	{bottom: 25%; }
		}
		@media (max-width: 767px) {
			.flex-caption h1	{font-size: 35px;}
			.flex-caption p		{font-size: 10px;}
			.flex-control-nav 	{bottom: 15%; }	
		}

Cosi facendo abbiamo ottenuto uno Slider Fullscreen con testi animati. Lo Slider con qualche piccolo aggiustamento sulle immagini può essere utilizzato come un normale Slider Responsive (senza immagini full screen) qui di seguito il link per la demo e il download.

Stay Tuned!

Popular, Responsive

Potrebbero interessarti:

Google Maps personalizzate e accattivanti per i nostri design

Realizzare un Horizontal scroll layout con Jquery Custom Scrollbar

Come costruire un Sito Web Responsive

Creare un Parallax Design accattivante e Responsive con Bootstrap