Un site one-page responsive : Walkthrough – Partie 2, ambiance


Voici la seconde partie des étapes de travail amenant à la réalisation d’un site one page responsive. Pour rappel, la première partie détaillait la navigation et la mobilité, la seconde partie parle dune fonctionnalité de mon site one page : une ambiance différente pour chaque section… Voici la seconde partie !

Voir le site de démonstration Fork on GitHub

Partie 1 : Navigation et responsive design
> Partie 2 : L'ambiance par section
Partie 3 : Le portfolio et tri dynamique
Partie 4 : Membres de l'équipe en CSS3

L’ambiance pour chaque section

Pendant qu’on y est, pourquoi ne pas changer un peu l’apparence de chaque section ? On peut faire du parallax pour animer un peule mouvement, choisir des fonds différents, …

J’ai choisi de plutôt partir sur un changement de couleur de fond. Pourquoi? Parce que ce n’était pas l’objet de mon expérimentation, mais que quand même c’était plus sympa !

On va souvent chercher beaucoup trop loin des solution à des problématiques simple. Là, la problématique est simplissime : changer la couleur de fond. Rappelez-vous, j’avais appelé chacune de mes sections sectionX. Ce n’était pas anodin, puisque je me suis servi de cet id pour identifier l’entrée de menu qui devait se voir attribuer la classe .current.

Et bien là, c’est la même chose. Je m’explique : j’ai commencé par appliquer les transitions suivantes au body :

body {
    -moz-transition: background-color 1s ease-in;
    -webkit-transition: background-color 1s ease-in;
    -o-transition: background-color 1s ease-in;
    -ms-transition: background-color 1s ease-in;
    transition: background-color 1s ease-in;
}

Ensuite, dans la fonction javascript change() de tout à l’heure qui s’occupe du menu, je lui fait s’occuper un peu du body aussi :

function change($section){
	$('nav.menu a').removeClass('current');
	currentSection = $section.attr('id');
	$('body').removeClass();
	$('body').addClass( $section.attr('id') + '-visible' );
	$('.target-'+currentSection).addClass('current');
}

Puis je donne un peu de couleurs aux différentes classes sectionX-visible :

.section1-visible{ background: #554C4A; }
.section2-visible{ background: #6C4846; }
.section3-visible{ background: #703C3C; }
.section4-visible{ background: #704935; }
.section5-visible{ background: #5E3631; }

Du coup, on a un changement de couleur tout smooth du background à chaque section qui apparait !

Nous arrivons à la fin de cette seconde partie. Les prochaines parties aborderont le sujet du portolio et du tri es éléments. Pour l’un de ces sujets je me suis quelques peu renié, vous verrez comment. Nous parlerons aussi d’une manière de présenter les membres de son équipe tout en transitions CSS3, ainsi que des formulaires HTML5 et de leurs différences avec les formulaires classiques. Et à la semaine ! Prochaine !

thats-all-folks

4 commentaires

  1. Bonjour,

    Votre proposition de site est très sympa, et la réalisation du menu et des sections m’intéresse beaucoup cependant est-il possible pour les différentes ambiances de mettre des images en fullscreen à la place des couleurs qui habillent chaques sections. Je vous pose cette question car j’ai essayer plusieurs choses à partir de votre code et je n’y arrive pas.

    Merci d’avance.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *