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”>
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
Promozioni
Potrebbe interessarti
Commenti