Tutorial HTML 5 – Creare sito con effetto Parallax

Per creare un sito accattivante e d’impatto, un layout Parallax in una pagina con i contenuti che scorrono verso il basso potrebbe esser la scelta giusta.

Come in questo esempio.

Vediamo come realizzarlo avvalendoci della libreria bootstrap.

Creiamo la struttura iniziale (Scrollspy – Bootstrap)

Per prima cosa includiamo i css bootstrap.css, bootstrap.min.css e la libreria jQuery (alla fine del tutorial potrete scaricare il pacchetto completo della demo)

<title>jQuery Parallax Theme Tutorial</title>

<!– Bootstrap core CSS –>
<link href=”css/bootstrap.css” rel=”stylesheet”>

<!– Custom styles for this template –>
<link href=”style.css” rel=”stylesheet”>

corso-html5

 

E inseriamo nell’head la navbar di bootstrap, fissa in alto. (nella cartella che potete scaricare qui sotto troverete il codice completo della struttura della pagina)

<div class=”navbar navbar-inverse navbar-fixed-top” id=”my-navbar”>

<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>TITLE</a>
</div>
<div class=”collapse navbar-collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#home”>01. COMMUNITY PC ACADEMY</a></li>
<li><a href=”#intro”>02. TUTORIAL HTML5 – PARALLAX EFFECT</a></li>
<li><a href=”#people”>03. By Francesco Di Gioia</a></li>

</ul>
</div><!–/.nav-collapse –>

La struttura del sito prevede un’immagine fissa come home page e le altre pagine raggiungibili tramite lo scroll grazie a questo css:

body,html {padding: 0px;overflow-x: hidden;font-family: lato;}
.navbar-fixed-top{width:970px; margin: 30px auto}
.navbar {text-transform: uppercase;background-color: #00ebbe;background-image: none;border:none;}
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {color:#000;font-weight: 300}
.my-container{width: 100%; float:left; width:100%;padding:0;margin:0;}
.in-panel {width:970px;margin: 0 auto;}
.in-panel h2{margin-top:120px;text-transform: uppercase; font-weight:300; font-size:40px;float:left; }
.in-panel p{font-size:18px;width:100%; clear: both; -moz-column-count:2;-webkit-column-count:2;column-count:2;margin-bottom:90px}

strong{font-size: 24px; font-weight: 300}
cite a{color: #00ebbe;font-weight: 700; text-transform: capitalize; font-style: italic;font-size: 16px}

 

Per animare lo scroll delle pagine basta inserire in fondo alla pagina il seguento codice jquery:

<script src=”//code.jquery.com/jquery-1.9.1.min.js” type=”text/javascript”></script>
<script src=”js/bootstrap.min.js”></script>

<script>

$(‘body’).scrollspy({ target: ‘#my-navbar’ })

$(“.navbar-collapse ul li a[href^=’#’]”).on(‘click’, function(e) {

target = this.hash;
// prevent default anchor click behavior
e.preventDefault();

// animate
$(‘html, body’).animate({
scrollTop: $(this.hash).offset().top
}, 300, function(){

// when done, add hash to url
// (default click behaviour)
window.location.hash = target;
});

});
$(document).ready(function(){
// cache the window object
$window = $(window);

$(‘.full-panel’).each(function() {
// declare the variable to affect the defined data-type
var $scroll = $(this);

$(window).scroll(function() {
// HTML5 proves useful for helping with creating JS functions!
// also, negative value because we’re scrolling upwards
var yPos = -($window.scrollTop() / 6);

// background position
var coords = ‘50% ‘ + yPos + ‘px’;

// move the background
$scroll.css({ backgroundPosition: coords });
}); // end window scroll
}); // end section function

}); // close out script

</script>

Per inserire le immagini che fanno da sfondo non bisogna far altro che assegnare uno sfondo al div in questione nel codice css:

#home{background: url(img/3.jpg) no-repeat 100% 0 fixed;height: 740px;position:relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#copertina{background: #fff; padding:15px 30px;color:#000;opacity: 0.8;position: absolute; bottom: 50%; left:50%; font-size: 90px; font-weight: 300; text-transform: uppercase; margin-left:-485px;margin-bottom:-200px;width:970px;}

Per ultimo rendiamo la struttura responsive, manteniamo i 992px di media grandezza che ha bootstrap:

@media (max-width: 992px) {

.navbar-fixed-top{width:100%; margin: 0}

#home{height:320px}

#copertina{position: absolute; bottom: 20%; left:0%; font-size: 30px; font-weight: 300; margin-left: 0;margin-bottom:0;width:100%;}

.in-panel{width:90%; margin-right:5%}
.in-panel h2{margin-top:70px;}
.in-panel p {font-size: 14px;-moz-column-count:1;-webkit-column-count:1;column-count:1;}

.full-panel{background-position: 0 0!important;}

.footer p{font-size:30px;}

}

 

GUARDA LA DEMO

DOWNLOAD

 

 

Share

Promozioni

Potrebbe interessarti



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti

  • Danilo

    Ciao, non riesco a scaricare il pacchetto completo della demo dal tasto download.
    Potete aiutarmi?
    Grazie mille per i vostri interessanti suggerimenti.