Slider Responsive Full Screen con testi animati utilizzando Flex Slider

By Andrea Marchetti
@marchetti_design

Slider Responsive Full Screen con testi animati utilizzando Flex Slider

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!

,

Commenti

  1. Avatar Luigi ha detto:

    Ciao
    complimenti per il tutorial avrei bisogno di un aiuto ,anche io uso Flexslider ma non riesco ad integrarlo con le featured image post dei post come posso fare?
    es:
    dove il background delle siano le
    GRAZIE!

  2. Avatar haki ha detto:

    Ciao,
    nel mio slide quando diminuisco la finestra del browser o nel smartfon le immagine non viene centrata o meglio dire si vede solo la parte sinistra del immagine. Come posso fare che si vede tutta immagine? Come posso risolvere?
    Grazie

  3. Avatar Luca ha detto:

    Ciao
    prima di tutto complimenti per il sito e la guida,
    sto lavorando su un sito dove scorrono delle immagini
    volevo chiederti come posso far scorrere le immagini utilizzando le frecce destra e sinistra del pc e come faccio ad inserire un testo sulle immagini che si attiva quando ti posizioni sull’immagine con il mouse.
    Grazie

  4. Avatar Gianmarco ha detto:

    Ciao Andrea,
    meravigliosa guida!
    E’ tutto chiarissimo e non ho avuto problemi con l’inserimento e la regolazione dello slide, tranne che per un piccolo fondamentale particolare… avendo un header in position:fixed; contenente logo e menù, quando vado a scrollare la pagina lo slide sovrasta l’header.
    Dove posso trovare la regola css per risolvere questo problema?
    Grazie in anticipo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Share