Créer un site web avec un slider d'images en full page
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h53
de formation
1
leçon vidéo
1
chapitre
Débutant
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Créer un site web avec un slider d'images en full page

Promo -33%
4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
1h53
de formation
1
leçon vidéo
1
chapitre

Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas, créer un gabarit de site internet que vous pourrez modifier par la suite pour créer votre propre site. Celui-ci aura la particularité d'avoir un slider en full page, c'est à dire des images qui vont défiler derrière notre contenu en background, tout en gardant de bonnes proportions.

Les étapes de cette formation mini site Internet :

  • Nous allons dans un premier temps apprendre comment créer ce slider en full page grâce à un petit plugin très utile. Nous ajouterons les images, et quelques options dans celui-ci pour le paramétrer et arriver à un résultat convaincant.
  • Ensuite, nous mettrons un footer en transparence par dessus le slider, et nous y integrerons un copyright ainsi que le menu.
  • Puis, nous mettrons le logo et le menu principal du site sur la gauche.
  • On ajoutera des boutons précédent et suivant pour faire passer les slides
  • Un site aujourd'hui, sans les réseaux sociaux, ce n'est pas envisageable, donc nous rajouterons 3 icônes pour Facebook, Twitter et Google+ sur la droite du site. On fera appel à un autre plugin jQuery pour styliser une infobulle lors du passage de la souris sur ces icônes.
  • Il faudra ensuite déplacer l'élément courant sur nos 2 menus lors du click.
  • Nous lierons les 2 menus pour déplacer l'élément courant sur les 2 menus en même temps.
  • On ajoutera des ancres sur les h2 de chaque contenu et une option dans le plugin pour scroller le contenu lors du click sur un élément de menu.
  • On mettra un bouton dans le footer pour pouvoir cacher/montrer tout le contenu pour apprécier les slides en arrière plan.
  • Enfin, nous verrons comment animer les éléments au chargement de la page pour donner plus de dynamisme à notre site.

A la fin de ce tutoriel, vous saurez comment créer un site avec un slider d'images en arrière plan qui peut servir par exemple pour un site de photographe pour présenter différentes photos en plein écran de manière élégante.
Le site complet est fourni avec ce tuto pour une meilleure compréhension de la formation.
Bon tuto à tous !!

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Créer un site web avec un slider d'images en full page

Table des matières

Leçon 1

Créer un site web avec un slider d'images en full page

1h53

Avis des apprenants

Détail des avis
962
Apprenants
69
Commentaires
5/5
Note moyenne
5/5
68
4/5
1
3/5
0
2/5
0
1/5
0
Mai Hoa Guennou
Mai Hoa Guennou
Publié le 06/09/2024
Bonjour Merci poiur ce tuto Tout est bien passe ; Le pattern fonctionne bien en local mais ne fonctionne pas sur le Web. Pourriez vous me souffle la solution please / mon site : location-saigon-vn.com. Merci beaucoup Merci encore
Jef Brunet
Jef Brunet
Publié le 02/09/2018
Cadeau d'anniversaire offert par mon fils que je déballe aujourd'hui ;) J'ai vraiment bien aimé l'enseignement pas a pas depuis la page blanche de l'éditeur de code . le résultat final est bluffant . Adrien est vraiment un très bon formateur qui détaille vraiment ce qu'il exécute, et cela est un plaisir de suivre ses cours . J'avoue que je me sens incapable a l'heure actuelle de refaire de mémoire son site j'ai encore besoin de son tuto a coté .
Adrien Gazaix
Adrien Gazaix
Bonne idée le cadeau d'anniversaire ;) En tout cas ça fait super plaisir d'avoir un retour comme ça ! C'est vrai que ce n'est pas simple de tout retenir, mais il faut pratiquer, faire et refaire sans cesse jusqu’à ce que ça rentre. A bientôt pour de prochains tuto !
Davy Gorchon
Davy Gorchon
Publié le 24/08/2018
Super, on peut adapter pour soi et surtout Adrien est disponible pour vous aider !! Regarder ces autres tutos aussi, c'est toujours bien !

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
11,99€ 8€
Promo -33%
Paiement unique, sans abonnement
Accès à vie à cette formation
1h53 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 791 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données