$ 12.00

Tuto Créer un site web avec un slider d'images en full page avec jQuery, CSS

$ 12.00

  • Une formation vidéo de 1h53m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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 !!


Formateur : Adrien Gazaix

Adrien Gazaix a publié 90 tutoriels et obtenu une note moyenne de 4,7/5 sur 23 466 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

45
avis laissés
5 étoiles
44
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de Samilson laissé le 01/07/2016
    Nickel et bien expliqué. Je recommande :)

  • 5
    avis de gegui laissé le 17/07/2014
    5/5 les explications sont très claires et pédagogiques. j'ai bien aimé ce tuto ainsi que les cours du formateur. A recommander sans hésitations

  • 5
    avis de salvat laissé le 28/05/2014
    Très bien expliqué, facile à comprendre, je le recomande à tous, félicitations.

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 2
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1560 tuto gratuits


non, je ne veux pas me former gratuitement