Créer un effet parallaxe___

Bonjour,
Voici un tutoriel qui vous expliquera comment réaliser un effet parallaxe qui fonctionne
avec le mouvement de la souris, pour un haut de page par exemple, à vous d’adapter le tuto à vos attentes et de créer des sites très impactant.
Je me suis référée à www.webdesignweb.fr pour apprendre moi-même
a faire du parallaxe et à animé mon site, c’est sur ce site qu’il vous faudra chercher les fichiers JavaScript et Css pour pouvoir faire l’effet voulu.
J’espère que vous arriverez à faire la manipulation, voici le tuto :

Dans un premier temps télécharger les fichiers sources sur le site www.webdesignweb.fr, trouverer dans le dossier compressé, deux fichier JavaScript ainsi qu’un fichier Css. Trouverer aussi les images utilisées pour le site
modèle ainsi que le fichier Html qui peut servir de base.

Une fois les fichiers sur votre bureau, créer un nouveau dossier, nommer le comme votre site. Glisser le dossier js et le dossier css téléchargés au par avant. Créer dans votre dossier site, un dossier image, placer vos visuel à l’intérieur.

Ouvrer le logiciel Dreamwaver, (vous pouvez très bien coder dans un autre logiciel),
créer un fichier Html, nommer-le index pour que votre site fonctionne.
Dans ce fichier, placer un titre dans la balise <title>, c’est le nom de votre site,
on verra ce nom au-dessus de la barre de navigation.

Taper le code :

Dans la partie <head>

  • <link rel= »stylesheet » href= »style.css » type= »text/css » media= »screen »/>
    Pour lier le fichier Html au fichier Css, remplacer par votre fichier Css la partie noire du code.
  • <script type= »text/javascript » src= »js/jquery.js« ></script>
    <script type= »text/javascript » src= »js/jquery.jparallax.js« ></script>
    Pour lier les fichiers JavaScript, procéder à la même manipulation.
  • <script type= »text/javascript »>
    $(document).ready(function () {
    $(‘#parallax’).jparallax();
    });
    </script>
    Ce morceau de code sert à faire fonctionner l’effet parallaxe, copier coller ce code directement dans votre fichier Html sans le modifier pour que tout marche bien.
    Voilà le code que vous avez saisie jusqu’à présent :
    02_htmlDans la partie <body>
  • <div class= »conteneur »><div id= »parallax »>
    Créer une div conteneur et une div parallaxe à l’intérieur, c’est dans cette dernière
    qu’il faudra placer tous les éléments qui seront en mouvement.
  • <p style= »text-align:center; width:970px;height:470px;padding-top:350px; »><img src= »img/bande.png« /></p>
    <p style= »text-align:center; width:975px;height:460px;padding-top:350px; »><img src= »img/bande.png« /></p>
    <p style= »text-align:center; width:980px;height:450px;padding-top:350px; »><img src= »img/bande.png« /></p>
    Dans la div parallaxe, saisir le code ci dessus en remplaçant la partie noire par votre image. Ici utiliser une balise <p> dans laquelle mettre l’image afin de pouvoir régler la taille sans déformer l’image ou sans même devoir passer par Photoshop pour régler
    la taille de l’image. Dans les trois div <p> on observe des valeurs différents
    qui vont permettre de faire bouger l’élément de manière différente.
    Ici on cherche à faire bouger une bande de couleur, de manière
    à ce que l’on ai l’impression que son mouvement se découpe
    lors ce que l’on bouge la souris.
  • <p style= »text-align:center; width:940px;height:490px;padding-top:0px; »><img src= »img/rond-violet.png« /></p>
    <p style= »text-align:center; width:780px;height:465px;padding-top:0px; »><img src= »img/trait-1.png« /></p>
    <p style= »text-align:center; width:680px;height:445px;padding-left:100px; »><img src= »
    img/trait-2.png« /></p>
    <p style= »text-align:center;
    width:580px;height:465px;padding-top:0px; »><img src= »img/trait-3.png« /></p>
    <p style= »text-align:left; width:800px;height:365px;padding-left:100px; »><img src= »img/branche-1.png« /></p>
    <p style= »text-align:right; width:800px;height:395px;padding-top:0px; »><img src= »img/branche-2.png« /></p>
    <p style= »text-align:center; width:970px;height:470px;padding-top:90px; »><img src= »img/logo-AL.png« /></p>
    Comme au par avant remplacer par vos images les parties noires du code,
    et fermer les deux balise parallaxe et conteneur.
    Pour la partie footer :
  • <div id= »footer »>
    Créer une div footer
  • <div class= »conteneur »></div>
    Créer un div conteneur pour pouvoir appliquer une couleur à votre footer
    ou bien y inclure du texte.Dans mon cas dans la div conteneur :
    <p> <br/><br/>Voici un expemple d’effet parallaxe réalisé par <span class= »color1″>Angelique</span> et <span class= »color2″>Loreleï.</span></p>
    J’ai utilisé des span pour appliquer une couleur à un endroit précis du texte.
    Fermer la div footer.
    Voici le résultat :
    03_html
    04_htmlDans le Css:
  • body {
    background: url(img/etoile.png) repeat;
    margin: 0;
    padding: 0;
    }
    Dans cette section du code Css, remplacer l’image du backround
    par une de votre choix ou par une couleur selon vos envies

  • p{ font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    color: #FFFFFF;
    text-align:center;
    }
    Dans la div <p>, modifier les attributs du texte (typographie, corps, graisse,
    interlignage, couleur, alignement).

  • .color1{ color:#FF6A00;
    }
    .color2{color:#9D162E;
    }
    Voici les div que j’ai utilisé pour coloré juste un mot, modifier la couleur,
    ajouter des styles si vous le trouvez nécessaire.

  • #footer {
    width: 100%;
    background: black;
    height: 280px;
    }
    Dans le footer, changer la couleur, la hauteur la largeur comme vous souhaitez.

Voici ce que vous obtenez au final dans le Css:
04_css

Une fois le Html et le Css près, enregistrer et essayer sur votre navigateur,
passez la souris au dessus du footer, si vos image bougent en suivant
votre mouvement vous avez réussi ! Sinon replongez vous dans vos fichiers,
vérifier vos liens, un espace en trop peut tout bloquer.

Voilà le résultat final de se tutoriel, si vous n’y arrivez pas n’hésitez pas
à vous rendre sur le site dont je me suis inspirée : www.webdesignweb.fr

fin

Loreleï

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s