Guida [GUIDA] Creare pagina in Parallax

[Biuni]

Creare pagina in Parallax​

In questa guida vi illustrerò come fare a creare una pagina Web usando la tecnologia Parallax cioè in Parallasse.
Da wikipedia: "la parallasse è il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione"

Potete trovare qui i codici e una demo:

Demo Parallax
Codici Parallax

​

Passiamo ora alla spiegazione di come personalizzare tutto ciò:

Modifica HTML

   <h1>...TITOLO...</h1>
     <br><br>
   <h3>...Sottotitolo...</h3>

All'interno dell' <h1></h1> va inserito il titolo della pagina, all'interno dell' <h3></h3> il sottotitolo.

    <p> ...Contenuto della pagina...</p>

All'interno del tag <p></p> va inserito il contenuto della pagina stessa.

<div data-type="background" data-speed="2" class="parallax">

</div>

Non cancellare e/o modificare, questa parte è l'immagine che farà il nostro effetto parallax.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Non cancellare e/o modificare, questa parte è la libreria dello script per il nostro effetto parallax.

Modifica CSS

[COLOR=#FF0000]/* FONT IMPORT */[/COLOR]
 @ Import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);  



 [COLOR=#ff0000]/* RESET DELLA PAGINA */[/COLOR]
* {                                                    
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}



[COLOR=#FF0000]/* STILE DEL BODY DELLA PAGINA DEMO (personalizzabile) */[/COLOR]
body {                                                
color:#727272;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size:18px;
line-height:24px;
text-align: center;
}


 [COLOR=#ff0000]/* PARALLAX (modificare link immagine nel background per cambiarla) */[/COLOR]
.parallax {                                         
background:url('http://i59.tinypic.com/2mqkhgm.jpg') 50% 0 no-repeat fixed;
margin:0 auto;
padding: 200px 0;
background-position:center center;
background-size:cover;
}



[COLOR=#ff0000]/* STILE DEI PARAGRAFI */[/COLOR]
.main {
    width: 100%;
}


.container1 {
    width: 70%;
    margin: 30px auto;
}


.container2 {
    width: 70%;
    margin: 30px auto;
}


.demo {
  margin-top: 100px;
  margin-bottom: 50px;
}


a {
  color: #000;
}

Modifica JS

$(document).ready(function(){
  var $window = $(window);


  $('div[data-type="background"]').each(function(){
  var $bgobj = $(this);
    $(window).scroll(function() {
  var yPos = -($window.scrollTop() / $bgobj.data('speed'));
  var coords = '50% '+ yPos + 'px';
  $bgobj.css({ 
    backgroundPosition: coords 
    });
   });
  });
});

Non toccare e/o modificare il JS.


Spero la guida vi sia piaciuta, per qualsiasi dubbio o domanda resto a disposizione.

Guida scritta interamente da Biuni per Inforge.net |Vietata la riproduzione|​

 

[Maswa]

Mod subito plox, piu utile del 90% della community messa insieme

 

[Ared]

Non avevo voglia di cercare sta roba perchè non sapevo il nome dell'effetto e ora lo becco a caso lol
E' una vita che sono curioso di come si fa xD

 

[Biuni]

Non avevo voglia di cercare sta roba perchè non sapevo il nome dell'effetto e ora lo becco a caso lol
E' una vita che sono curioso di come si fa xD

Bene! Spero che ti possa essere utile allora!