Landing Pages : Parallax

Publié le 1 octobre 2018 dans la Catégorie Featured, Landing Pages

Les Parallax sont un bon moyen pour réaliser une landing page sympa, avec de grandes photos en background.

En CSS, j’ajoute 2 types de Jumbotron : 1 pour les différentes sections, et 1 autre pour la dernière section en bas de page. Mais j’aurais pu faire autant de Jumbotrons que nécessaires. Ces Jumbotrons sont censés contenir du texte, des boutons…

/* Jumbotron */
.jumbotron {
	padding: 100px 0px;
	margin-bottom: 0;
	text-align: center;
}
.jumbotron2 {
  background-color: #CCCCCC;
  padding: 2rem;
	text-align: left;
}

Ensuite, je définis en CSS les différentes caractéristiques des Parallax. Les Parallax contiennent les différentes photos qui sont en arrière-plan.
On met un z-index à -1 pour qu’ils soient bien en arrière-plan, et on leur donne une position fixed :

/* Parallax */
.parallax-content{
	position: relative;
	overflow: hidden;
	height: 80vh;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}
.parallax {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.parallax:before {
	content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 120% auto;
}

Ensuite, il faut définir des images différentes selon la taille du viewport. Pour les mobiles, on choisira plutôt des photos en format Portrait, et pour les écrans larges, des photos en format Landscape :

/*xs to lg*/
@media(min-width: 769px){
	.parallax-content{
		background-image: url("../../images/parallax-1.jpg");
	}
	.parallax-content-2{
		background-image: url("../../images/parallax-2.jpg");
	}
}

/*xs to 0*/
@media(max-width: 768px){
	.parallax-content {
		background-image: url("../../images/parallax-1-m.jpg");
	}
	.parallax-content-2 {
		background-image: url("../../images/parallax-2-m.jpg");
	}

Voir le résultat final :
https://www.sebastienmerour.com/portfolio/landing-pages/parallax/

Lire la suite