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

Jetez un oeil à ces autres tuto jQuery 1.7, CSS 3

Redirection avec compte à rebours en JqueryRedirection avec compte à…
Dans ce tuto jQuery en vidéo nous verrons comment mettre en…

Créer un accordéon horizontal pour vos derniers articlesCréer un accordéon horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Créer un Sticky menu qui reste visible à tout instantCréer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…

Animer la hauteur d'un élément pour dévoiler un contenuAnimer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…

Créer un slider et l'intégrer à votre blog WordpressCréer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…

Créer une lightbox simplementCréer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…

Créer un scroll horizontal animé pour votre site webCréer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Ajouter une bulle d'info enrichie à votre siteAjouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7, CSS 3 de 1 heure 53 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 28 ans et je suis Webdesigner spécialiste WordPress depuis plus de 6 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant plus de 3 ans et depuis 1 an et demi je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Rien à dire, tuto expliqué de manière claire. Formateur Pro, allez-y.

extrêmement complet ! très pédagogique ! Top !

Je trouve très intéressante votre vidéo sur la création d'un site OnePage. Je l'ai vu plusieurs fois et vais me lancer bientôt dans la création d'un site en m'inspirant de vos idées. Pour le reste "Jquery, css, ...) cela ne me fait plus peur . Merci.

Du très bon travail ! Encore merci pour ces formations nécessaires à mon apprentissage dans le graphisme.

Tutos simples et efficaces !

Lire les autres témoignages

 

D'autres tuto de spykrew07

Créer un slider et l'intégrer à votre blog WordpressCréer un slider et l'intégrer à votre blog Wordpress
A l'aide d'un plugin jQuery, nous allons créer un slider pour vos articles de blog.…

Revisiter le logo de Twitter façon OrigamiRevisiter le logo de Twitter façon Origami
Dans ce tuto Illustrator en vidéo, nous allons revisiter le logo de Twitter, le célèbre…

Intégrer une image dans un texteIntégrer une image dans un texte
Dans ce tuto Photoshop en vidéo, nous allons voir comment intégrer une image dans un…

Créer une InfoBox scrollableCréer une InfoBox scrollable
Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer une InfoBox pour…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (40 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (111)

par spykrew07
(auteur de ce tuto - 13 avril 2013)

" @jess23 J'avais donné une solution pour le content mal centré dans les commentaires. Je te la remet ci-dessous :

Modifie la ligne du #content dans le CSS comme ceci :
#content {position:absolute; overflow:auto; top:25%; left:25%; background-color:rgba(255,255,255,0.8); width:50%; height:50%; box-shadow: 0 0 20px #000; -webkit-border-radius:3px; -webkit-transition:0.3s; -moz-border-radius:3px; -moz-transition:0.3s;}

J'espère que cela résoudra ton problème ;) "

par jess23
(a acheté ce tuto - 12 avril 2013)

" Un très bon tutoriel, j'ai tout compris !

Par contre j'ai un soucis, le site s'affiche mal sous Firefox, nickel sous Safari et je n'ai pas pu tester sous IE, le bloc texte reste scotché en bas de la page, passe sous le footer et impossible de faire une marge. Auriez vous une idée de ce qui cloche ? Cela fait des jours que je m'arrache les cheveux à chercher.

Merci (: "

par 6rilmxa voté :
(a acheté ce tuto - 19 janvier 2013)

" Très bon tuto encore une fois. C'est toujours un plaisir de suivre ces formations. Ca aurait été encore mieux si le full background était administrable (ajout - suppression d'images) "

par lamygraphiste
(n'a pas acheté ce tuto - 21 décembre 2012)

" tres bon tuto,continue come sa !
"

par spykrew07
(auteur de ce tuto - 11 novembre 2012)

" @babaretuto Les formats plutôt 16:10 / 16:9 comme 1680 x 1050 ou 1920 x 1080 Bonne continuation ;) "

par babaretuto
(a acheté ce tuto - 11 novembre 2012)

" Y-a-t-il un format privilégié pour la photographie lorsqu'elle est destinée à être en full screen sur un site? Que doit-on conseiller?Merci ! "

par vella voté :
(a acheté ce tuto - 28 septembre 2012)

" tres bon tuto simple, clair ...je le recommande et encore bravo à l'auteur. "

par spykrew07
(auteur de ce tuto - 26 septembre 2012)

" @fabrizio58 Tu as forcément fait une erreur quelque part si rien ne s'affiche. Regardes bien les sources fournies avec le tuto. Sinon cela ne sert à rien de me dire que c'est urgent j'essaye d'aider le plus de monde possible mais je ne peux pas me dédoubler. "

par spykrew07
(auteur de ce tuto - 25 septembre 2012)

" @samellite Je ne sais pas d'ou peut venir ton problème, mais tu as sans doute fait une erreur quand tu déclares tes images dans le plugin. Regardes sur le site officiel du plugin que j'utilise, tu trouveras certainement la réponse à ta question. "

par samellitea voté :
(a acheté ce tuto - 25 septembre 2012)

" Même souci que certains, et même souci que je retrouve aussi dans le tuto site One-Page :
Les images paraissent tronquées sur toutes les extrémités, on a l'impression que les images sont beaucoup trop grandes que l’écran et du coup elles sont tronquées, elles ne s'adaptent pas.
Merci pour ta réponse Adrien ! "

par czanettoa voté :
(a acheté ce tuto - 22 septembre 2012)

" Tres bien, merci :) ça parrait tout de suite plus facile quand c'est bien explique "

par Viniwowa voté :
(a acheté ce tuto - 14 septembre 2012)

" Bonjour, un excellent tuto très complet avec beaucoup d'astuces à prendre ici ou là !

Par contre je rencontre un problème avec le slider qui refuse d'afficher parmi les photos que j'ai sélectionnées celles qui sont en couleur... Les photos sont pourtant bien déclarées, elles ont été redimensionnées pour le web etc...

A noter que je ne rencontre ce problème qu'en ligne, tout fonctionne à merveille en local.

Des idées d'où ça peut bugger ?

Merci. "

par spykrew07
(auteur de ce tuto - 10 septembre 2012)

" @khyriana Hello ! Essayes de mettre le résultat de ce que tu as fait en ligne quelque part et je vais y jeter un oeil. Sinon, je suis désolé de ne pas répondre tout de suite mais j'essaye de faire de mon mieux pour aider le plus de monde possible ;) "

par krakittaa voté :
(a acheté ce tuto - 17 juin 2012)

" Merci! J'ai compris et réalisé par moi-même ma page net en suivant votre tuto. J'ai surtout pu l'adapter au design de mon site, donc pas de copier-coller. C'est ultra clair, et astucieux. Bravo et encore merci! "

par dooglass95a voté :
(a acheté ce tuto - 25 mai 2012)

" Merci pour se super tuto.
J'ai juste deux problèmes:
Tous fonctionne ave firefox mais avec ie9, chrome et safari la molette de la sourie ne fait pas défiler la scrollbare et les infos bulles des réseaux sociaux ne s'affichent pas.
Auriez-vous une idée du problème? reseaux sociaux ne s'affichent pas.
auriez-vous une idée du problème? "

par neeloa voté :
(a acheté ce tuto - 20 mai 2012)

" Excellent, une vrai tuerie ce tuto! Très bien expliqué !!! "

par neeloa voté :
(a acheté ce tuto - 20 mai 2012)

" C'est une tuerie ce tuto !!!!!
Merci pour ton travail , c'est excellent !! "

par iorbita
(a acheté ce tuto - 07 mai 2012)

" Bonjour,
il me semble avoir lu dans les commentaires que certains membres rencontrent des problèmes concernant l'animation scroll du contenu, c'est mon cas aussi.
Après plusieurs tentatives je me suis rendu compte que seul le fichier jscroll.js fourni avec le tutoriel fonctionne, le fichier jscrollpane.js téléchargé à partir du site ne fonctionne pas. J'ai essayé de télécharger ce fichier à partir de différents navigateurs en pensant que ce dernier en était la cause mais sans succès... si quelqu'un a une réponse je suis preneur. Merci. "

par perspectifa voté :
(a acheté ce tuto - 04 mai 2012)

" ok problème réglé...j'ai laissé tomber l'idée de travailler avec des listes, et je gère plusieurs blocs en javascript...tout est nickel maintenant "

par perspectifa voté :
(a acheté ce tuto - 02 mai 2012)

" ps: j'ai tenté de créé un nouveau bloc dans chaque li, en attribuant à ce block l'overflow auto.

<ul><li><div id="nouveaubloc">blabla</div></li></ul> dans index.html
#nouveaubloc {position:relative; height:100%; width:100%; overflow:auto;} dans le css

Sans jscrollpane, aucun souci, le scroll ordinaire apparait et permet de faire défiler le texte...lorsque j'applique jscrollpane $("#nouveaubloc").jScrollPane(); aucun changement...le scroll est toujours là, mais dans sa version ordinaire. "

par perspectifa voté :
(a acheté ce tuto - 02 mai 2012)

" Bonjour,

Je viens de mettre mon site à jour. Les différents chapitres du site sont implantés dans une liste (#text ul li)...en overflow:auto. Le site fonctionne très bien. J'essaie d'ajouter jscrollpane pour remplacer la scrollbar par défaut, en appelant la fonction comme suit:

$("#text ul li").jScrollPane();

...la scrollbar et le contenu disparaissent. Comment puis-je m'y prendre pour appliquer jscrollpane sur '#text ul li', et non sur '#text'

Merci d'avance
"

par sebasmau
(a acheté ce tuto - 17 avril 2012)

" Bonjour j'ai un petit souci sous IE8 avec le div principal du contenu qui au lieu d'être en transparence disparait complétement, mais à 100% d'opacité quand on le survole. Est ce que vous auriez une solution ?

Bien cordialement,
Sébastien "

par jml71a voté :
(a acheté ce tuto - 16 avril 2012)

" J'ai un petit souci avec la disposition du site suivant la taille de l'écran. Dès que la résolution de l'écran change les éléments ne sont plus à la position d'origine. Merci de m'éclairer.

Sinon super tuto comme d'hab. "

par iorbita
(a acheté ce tuto - 06 avril 2012)

" ...autant pour moi, j'avais oublié qu'ils avaient été passés en display: block... désolé...
"

par spykrew07
(auteur de ce tuto - 06 avril 2012)

" @iorbita On les passe en display:block dans le tuto donc on peut leur attribuer une largeur et une hauteur sans problème. "

par iorbita
(a acheté ce tuto - 06 avril 2012)

" Bonjour,
concernant les liens des réseaux sociaux, comment se fait-il qu'on puisse mettre une largeur et une hauteur sur des éléments de type en ligne (dans ce cas la balise <a>), est-ce le fait d'être passé en position fixed? Merci pour cet éclaircissement! :o) "

par spykrew07
(auteur de ce tuto - 04 avril 2012)

" @djrayz Tu dois avoir un problème quelque part alors, normalement cela fonctionne sur ie8. Tu as testé à partir de mes sources ? "

par djrayz
(a acheté ce tuto - 03 avril 2012)

" Bonjour,

Très très bon tuto, j'ai appris beaucoup de chose !!

J'ai un seul problème = Internet Explorer 7 8
l'image de font ne load jamais ?


Merci
"

par gege53a voté :
(a acheté ce tuto - 02 avril 2012)

" Tuto sympa, bien expliqué, avec des astuces en jquery bien utile, merci "

par Germinala voté :
(a acheté ce tuto - 01 avril 2012)

" Excellent tuto. Clair et complet !
Un achat à faire pour tous ceux qui veulent apprendre à créer un petit site perso design !!

J'ai une petite question:
Lorsque je redimensionne la fenêtre du navigateur le div "content" garde la même taille qu'à son chargement.
Est-ce du à mes modifications ? et dans le cas contraire, existe-il un moyen pour qu'il se redimensionne en même temps que la fenêtre ? "

par DrewDrewa voté :
(a acheté ce tuto - 27 mars 2012)

" Super! vraiment bien expliqué! J'adore! Bravo a toi! "

par spykrew07
(auteur de ce tuto - 27 mars 2012)

" @iorbita OK ça me rassure et je suis content que tu es trouvé ton erreur ! Bonne continuation ;) "

par iorbita
(a acheté ce tuto - 27 mars 2012)

" ...mea culpa, erreur dans l'interprétation des valeurs par défaut du plugin... :o/ "

par spykrew07
(auteur de ce tuto - 25 mars 2012)

" @iorbita Je suis désolé, mais la je ne sais pas et je ne comprend pas trop votre problème. Il n'y a aucun soucis de mon coté... montrez moi le résultat en ligne à la rigueur pour que je puisse voir ce qu'il se passe. "

par iorbita
(a acheté ce tuto - 25 mars 2012)

" Le code que j’ai introduit est exactement le même que celui du tutoriel.
J'ai pu remarquer que Firefox et Opera (je n’ai pas encore contrôlé IE) ont tendance à ouvrir une nouvelle fenêtre sur toute la largeur de l’écran ce qui a comme conséquence d’ouvrir l’image de façon disproportionnée et donc tronquée. Je pensais résoudre ce problème avec l’option fit_always mais cela n’a aucune influence sur l’ouverture initiale de la fenêtre. Est-ce qu’il existe une autre façon d’obliger le navigateur à ouvrir la page concernée dans les proportions correctes? Merci. "

par spykrew07
(auteur de ce tuto - 25 mars 2012)

" @iorbita C'est sensé fonctionner partout. J'ai testé sur Chrome, Firefox, Safari et ie9 c'est nickel. Un soucis au niveau de ton html, ou de ton fichier site.js peut-être...

Bon courage ! "

par iorbita
(a acheté ce tuto - 25 mars 2012)

" Bonjour,
.... est-ce que le redimensionnement des images est censé fonctionner sur tous les navigateurs? Je travaille sur Mac et personnellement le seul qui gère convenablement le redimensionnement est Chrome. Ni Safari, ni Firefox, ni Opera ne me donnent un résultat satisfaisant. J’ai beau essayer l’option fit_portrait mes images sont toujours tronquées. Seule l’option fit_always arrive à combler cette différence mais hélas avec un rectangle noir comme arrière-fond des images. Existe-t-il une autre solution? Peut-être en combinant des autres options? Merci. "

par jml71a voté :
(a acheté ce tuto - 23 mars 2012)

" Excellent comme tous les tutos de spykrew07! C'est clair net et précis. Merci "

par spykrew07
(auteur de ce tuto - 06 mars 2012)

" @0livgraphic Tu n'as qu'à les cacher des le départ tout simplement :

$("#content, #logo, #menu").hide();

Bon courage ;) "

par 0livgraphica voté :
(a acheté ce tuto - 05 mars 2012)

" Excellent tuto ! Explications très claires et précises, le formateur maitrise parfaitement son domaine. Un vrai plaisir !
J'ai cependant une question relative :
je souhaite au lancement de la page, avoir seulement et directement le Background sans avoir l'arrivée des différents éléments (#content,#logo,#menu etc.). Ces différents éléments n'apparaitront qu'au cliquage de l'élément #cacher (apparition/disparition).
Je ne vois pas ou intervenir dans "site.js"...J'ai pensé à augmenter le "delay" mais celui-ci intervient et pour la suite sans se réinitialiser au cliquage de l’élément #cacher.
Comment arriver à ce résultat?
Merci d'avance pour ce coup de pouce et encore félicitation pour vos enseignements. "

par rodu29a voté :
(a acheté ce tuto - 03 mars 2012)

" Trés bon tuto pour créer un site propre et rapidement.
Merci au formateur. "

par Lethala voté :
(a acheté ce tuto - 22 février 2012)

" J'ai appris un tas de choses merci beaucoup ! "

par reno184a voté :
(a acheté ce tuto - 21 février 2012)

" tuto vraiment intérressant, même pour les développeurs connaissant déjà assez bien les css et jquery, pleins d'astuces ! félicitation et merci ! "

par nabilovica voté :
(a acheté ce tuto - 16 février 2012)

" c bon j'ai régler le problème ,,,,,,,,et merci de m'avoir répondu aussi vite j'espère que tu va ne étonne avec d'autre tuto ,,cio "

par spykrew07
(auteur de ce tuto - 15 février 2012)

" @nabilovic ça va être dur de t'aider car je ne vois pas trop le problème que tu as. Le problème est sur tous les navigateurs ? l'infobulle s'affiche t'elle ou pas du tout ? "

par nabilovica voté :
(a acheté ce tuto - 15 février 2012)

" bsr svp spy jai un petite souci avec tooltipsy pour la transition et l 'effet bulle ça ne fonction pas chez moi mais sur ton HTML ça marche nickel je sais que ta répondu a cette question et j'ai méme essaye avec la position absolue ça n'a rien donnez j attend votre réponse et merci d avance cio "

par spykrew07
(auteur de ce tuto - 10 février 2012)

" @neolab112 Oui c'est volontaire, car je prends le CSS3 avec pincettes. Ce n'est pas encore compatible partout alors qu'avec Jquery ça fonctionne sur presque tous les navigateurs. "

par neolab112a voté :
(a acheté ce tuto - 09 février 2012)

" Très bon tuto, on voit que l'auteur maitrise son sujet.
La partie javascript est moins accessible sans connaissance préalable d'un langage de script. N'y a t'il pas certaines fonctionnalités qui auraient pu etre gérées en css3 (animations, scrollbar, classe active...) ou est-ce volontaire de recourir autant au javascript ?
Neolab "

par bibindome2
(a acheté ce tuto - 09 février 2012)

" Bonjour spykrew,

en ouvrant le fichier avec mon ie v8, je me susi rendu compte que supersized ne fonctionne pas et que les images sont remplacées par un background gris le chargement tournant dans le vide ...
j ai essayé en regardant la syntaxe et chercher si des conflits supersized IE existaient mais au final je n arrive pas a règler le tire! Tu aurais une parade?

Merci "

par Laendila voté :
(a acheté ce tuto - 09 février 2012)

" Merci pour la réponse rapide, je me suis mal exprimé, en fait actuellement tous les boutons du menu ne peuvent aller sur des liens externes (http://fr.tuto.com par ex), et je voudrais que l'un d'eux puisse servir à cet effet.

Je pensais que "return false;" était responsable de ça.

Christophe
"

par spykrew07
(auteur de ce tuto - 09 février 2012)

" @Laendil Tu veux qu'un de tes boutons soir tjs en survrillance c'est bien ça ? Dans ce cas la, tu copies ta classe active, tu la nommes autrement, et tu l'ajoutes à ton li tout simplement. Comme ça le fonctionnement ne sera pas perturbé. Tiens moi au courant si tu es arrivé à ce que tu voulais ;) "

par Laendila voté :
(a acheté ce tuto - 09 février 2012)

" Bonjour,
Tuto très intéressant et très instructif.

J'aimerais cependant ajouter un lien "actif" dans un des boutons du menu, mais la fonction "return false;" empêche de le faire.

J'ai essayé plusieurs solutions qui ne marchent pas.
Est-il possible de créer une exception pour "$("#menu li a mon lien") ?

Je cherche encore de mon côté.

Merci

Christophe "

par spykrew07
(auteur de ce tuto - 09 février 2012)

" @twelveflowers Essaye de mettre le .icone en position:absolute plutôt qu'en fixed et normalement le texte devrait apparaître ;) "

par twelveflowers
(a acheté ce tuto - 08 février 2012)

" Bonjour tres bon tuto, res bien expliquer par contre j'ai une petite question tooltipsy n'affiche pas le texte sous safari. "

par tailivana voté :
(a acheté ce tuto - 07 février 2012)

" Super Tuto...
Clair et Concis,
Comme d'Hab.
Bravo... "

par spykrew07
(auteur de ce tuto - 05 février 2012)

" @bibindome J'avais répondu à ces questions dans les commentaires précédents ;) Je te remets les réponses :

1 - Radius : Il suffit de rajouter dans le css les préfixes -moz-border-radius (mozilla), border-radius (ie9), -o-border-radius (opera). Par contre pour ie 7 & 8 tu va devoir passé par du js pour avoir des bords arrondis (modernizr par exemple).

2 - Content mal centré : Modifie la ligne du #content dans le CSS comme ceci :
#content {position:absolute; overflow:auto; top:25%; left:25%; background-color:rgba(255,255,255,0.8); width:50%; height:50%; box-shadow: 0 0 20px #000; -webkit-border-radius:3px; -webkit-transition:0.3s;}

Merci de ton achat et de ton retour positif, bye !! "

par bibindome2
(a acheté ce tuto - 04 février 2012)

" Bonsoir et merci encore!
J ai une petite question! Sur google chrome tout apparait parfaitement et tu expliques comment obtenir les arrondis pour les autres navigateurs mais sur tous les autres navigateurs le container avec le texte central apparait a une position différente...c est le margin du content j'imagine mais a chaque fois la position que je donne n apparait pas correctement pour firefox et IE le bloc apparait une 100taine de pixels plus bas...
que faut il modifier please?

Merci d'avance ;) "

par nabilovica voté :
(a acheté ce tuto - 04 février 2012)

" merciiiiiiiiiiiiiiiii pour ta réponse j'esper que je trouverais un tuto pour le formulair..cio "

par spykrew07
(auteur de ce tuto - 04 février 2012)

" @nabilovic Il faut tout simplement créer un formulaire et gérer l'envoi du message en ajax pour ne pas avoir de rechargement de page. Regardes sur tuto.com il doit y avoir des tutos la-dessus. Bye !! "

par spykrew07
(auteur de ce tuto - 03 février 2012)

" @Tricepad Problème de version mis à jour par l'auteur du plugin !

Donc remplace le fichier mouse.js par celui-ci :

https://github.com/brandonaaron/jquery-mousewheel/blob/master/jquery.mousewheel.js

Et c'est impec !! bye ;) "

par tricepada voté :
(a acheté ce tuto - 03 février 2012)

" Salut Spykrew07,

J'ai toujours un petit problème avec firefox, le plugin "jquery.mousewheel.js" ne fonctionne pas.
Ca marche parfaitement sous chrome, safari, doit-on rajouter une ligne de code ?

Merci pour ton aide. "

par oOLucOoa voté :
(a acheté ce tuto - 02 février 2012)

" Super tuto. Bien expliqué, aucun ennuie et simple à suivre.
+5 "

par nabilovica voté :
(a acheté ce tuto - 02 février 2012)

" merci pour ce tuto j'aurais aime te donne 100 au lieu de 5 il sera une ressource d inspiration pour moi ....j'ai juste une question j’armais bien ajoute dans le menu contacte une messagerie ça sera très utile dans mes projet avenir j'attends votre réponse avec impatience, et encore une fois mille merci "

par spykrew07
(auteur de ce tuto - 02 février 2012)

" @c2frey Regardes du coté de Modernizr pour tout ce qui est effet css3 sous ie. Pour le background transparent compatible ie, il faut supprimer le rgba et utiliser une image en png avec du noir à 80% que tu répète en x et en y tout simplement ;)

Merci de ton achat et bon courage !! "

par c2freya voté :
(a acheté ce tuto - 01 février 2012)

" Super Tuto et merci.
Par contre peux tu me dire les scripts qu'il faut employer pour que le site passe nickel sous IE car les arrondis et les fonds tramés du Content et Footer ne sont pas pris en compte me semble t-il. Comment y remédier.
Merci par avance Spykrew. "

par oOLucOoa voté :
(a acheté ce tuto - 25 janvier 2012)

" Petite question encore. Qu'est ce qui permet de stopper les déplacements sur l'axe des horizontales ? (pour le contenu centrale) "

par spykrew07
(auteur de ce tuto - 24 janvier 2012)

" @oOLucOo C'est bizarre car j'ai fait le tuto sous Chrome et tout fonctionne parfaitement. Tu as essayé depuis les sources fournies avec le tuto ? "

par oOLucOoa voté :
(a acheté ce tuto - 24 janvier 2012)

" Bonjour à tous et bonne année.
Merci pour ce tuto riche en informations et super à suivre.

J'ai un petit soucis concernant tooltipsy (je vois dans les commentaires que je ne suis pas le seul à avoir eu ce problème)

Sur firefox il marche nickel mais sur chrome et safari l'info bulle apparaît en haut à gauche de ma page. Une solution ? "

par spykrew07
(auteur de ce tuto - 23 janvier 2012)

" @tricepad Oui tu seras bien calé après tout sa ;) "

par tricepada voté :
(a acheté ce tuto - 23 janvier 2012)

" Bonjour,

Merci pour ta réponse, pour être plus tranquille, j'ai pris Apprenez les Bases du HTML avec HTML & Apprenez les bases du HTML 2ème… avec HTML & Apprenez les bases du CSS pour intégrer votre site web avec CSS.

J'espère que là je serais opérationnel :))

Encore merci, et bravo pour votre travail

Tricepad
"

par spykrew07
(auteur de ce tuto - 22 janvier 2012)

" @tricepad Je te conseille ma formation sur le CSS que je viens de mettre sur tuto.com, tu auras certainement la réponse à toutes tes questions et tu sauras intégrer un site web ! http://fr.tuto.com/css/apprenez-les-bases-du-css-pour-integrer-votre-site-web-css,25585.html

Merci de ton achat et ton retour positif ;) Bonne continuation dans ton apprentissage et n'hésites pas si tu as d'autres questions ! "

par tricepada voté :
(a acheté ce tuto - 22 janvier 2012)

" Encore merci pour ce tuto clair, précis, efficace qui m'a appris beaucoup.

Je cherche à intégrer dans la div content
h2 "equipe",
un h3 " exemple"...
Et j'aimerais intégrer une petite photo et mon paragraphe à côté...

Comment dois je faire ?

Merci d'avance !
"

par tricepada voté :
(a acheté ce tuto - 22 janvier 2012)

" Vraiment très bon, à revoir plusieurs fois pour bien tout intégrer !!

Merci beaucoup "

par spykrew07
(auteur de ce tuto - 19 janvier 2012)

" @perspectif C'est la classe .jspTrack dans jscroll.css, tu mets #000 au lieu de la couleurs actuelle dans le background ;) Merci de ton retour positif ! "

par perspectifa voté :
(a acheté ce tuto - 19 janvier 2012)

" Bonjour,

Félicitations pour ce tuto...clair, précis, efficace, et très beau graphiquement, j'adore. J'ai réalisé un site à partir de ce tuto, mais j'aimerais que la scrollbar soit blanche sur fond noir. Je n'ai pas trouvé la ligne du jscroll.css à modifier pour changer le gris de la barre verticale en noir (ou transparent). Quel paramètre dois-je changer?

Merci d'avance "

par cedflya voté :
(a acheté ce tuto - 19 janvier 2012)

" Merci pour ce tuto très sympa et bien expliqué. "

par Lokiloka voté :
(a acheté ce tuto - 12 janvier 2012)

" Niiiiiiiiickel ! Merci pour ce tuto qui m'a servi d'intro au js :)
juste une petite question, concernant la div content elle ne se resize pas automatiquement quand on réduit/agrandi la fenetre, il faut rafracihir la page, une soluce?
Encore merci! Loki "

par spykrew07
(auteur de ce tuto - 11 janvier 2012)

" @gmaurer Je suis désolé, mais me mettre un vote de 2/5 juste pour ça alors que tout le monde est ravi de ce tuto, je trouve ça un peu juste... J'utilise Notepad++ sur PC, sur Mac vous avec Coda par exemple. Je ne travaille pas du tout sur Mac, mais je ne vois pas en quoi cela bloque pour suivre le tutoriel. Le code et le résultat sur le navigateur sont les même.

Si vous pouviez modifier votre vote, je vous en serai reconnaissant car je ne pense pas que avoir fait de faute dans ce tuto. "

par gmaurer
(a acheté ce tuto - 11 janvier 2012)

" Bonjour,
Dommage que votre tutoriel ne parle pas des applications employées pour l'édition des codes html et css. Sur Mac avec BBEdit et CSSEdit, je ne puis effectuer les mêmes opérations démontrées au début du tutoriel. la démonstration très orientée PC est déroutante pour un Mac user.
J'ai aussi acheté la formation Html5 et CSS3
c'est encore pire concernant NotePad ou il n'y a pas d'éditeur équivalent sur Mac.
Merci si vous avez un conseil quelconque.
Cordiales salutations
"

par KunClica voté :
(a acheté ce tuto - 10 janvier 2012)

" Très bon tuto.
Bonne présentation des différents élements.
Bravo et merci. "

par Fralalaa voté :
(a acheté ce tuto - 09 janvier 2012)

" impeccable merci ;)

Pour Opéra mon pb c'est que le slideshow ne trouve pas les images, du coup on ne voit que le gif animé "in progress" qui tourne , le logo et le menu qui ne s'affichent pas, et les flèches du slideshow qui ne réagissent pas au jquery. Mais j'ai vu que Opéra n'est pas forcément au top concernant les animations.. "

par Laendila voté :
(a acheté ce tuto - 09 janvier 2012)

" Merci beaucoup, très instructif !! "

par spykrew07
(auteur de ce tuto - 09 janvier 2012)

" @Fralala Alors pour les réponses à tes questions :

1 - Radius : Il suffit de rajouter dans le css les préfixes -moz-border-radius (mozilla), border-radius (ie9), -o-border-radius (opera). Par contre pour ie 7 & 8 tu va devoir passé par du js pour avoir des bords arrondis.

2 - Content mal centré : Modifie la ligne du #content dans le CSS comme ceci :
#content {position:absolute; overflow:auto; top:25%; left:25%; background-color:rgba(255,255,255,0.8); width:50%; height:50%; box-shadow: 0 0 20px #000; -webkit-border-radius:3px; -webkit-transition:0.3s;}

3 - Jquery sur Opera : Je ne comprends pas ton problème, tout fonctionne à merveille.

J'espère t'avoir aidé, et merci de ton achat ;) "

par Fralalaa voté :
(a acheté ce tuto - 09 janvier 2012)

" Bonjour,

Super tutoriel, très instructif et pédagogique !
J'ai plusieurs questions concernant l'optimisation sur les différents navigateurs :
Pour opéra : il semble que le Jquery ne passe pas, je voulais savoir si il y a des choses à rajouter afin que le slideshow tourne dessus.

Pour Firefox et IE : le radius css des menus et du content n'est pas pris en compte, y a t-il une astuce pour y remédier ? Aussi, le content ne se centre pas sur ces deux navigateurs, il se fixe sur le bas de la page. Est il possible d'optimiser ces différents points ?

Merci et encore bravo pour le rendu exceptionnel de ce tutoriel ainsi que les explications claires et concise.
"

par gotiaaa voté :
(a acheté ce tuto - 07 janvier 2012)

" Excellent ! "

par BrunoMa voté :
(a acheté ce tuto - 07 janvier 2012)

" Bonjour spykrew07,

j'ai beaucoup apprécié votre tuto et la clarté de l'enseignement.
Je recherche un programmeur webmaster passionné et qualifié pour participer à des projets de webdesign, et serai très heureux de travailler avec vous si disponibilité.

Architecte d'intérieur pendant de longues années, je développe maintenant mon activité dans l'infographie (website & pub).

Je vous propose donc la possibilité de partager mes projets en cours pour travailler en équipe via skype.

Merci de me tenir informé rapidement de votre intérêt.

Chaleureusement,

Bruno Martinez - Designer Graphiste -
Port : + 33(0)6 84 90 11 04
Email : designbm@me.com
Skype : crystal-design.fr "

par JP71a voté :
(a acheté ce tuto - 04 janvier 2012)

" De JP71 Très très bon tuto pour qui veux apprendre ou progresser en HTML5 CSS3 et même un peu de javaScript. Le mini site fonctionne nikel sur google chrome, IExplorer, Safari, Opéra, reste un petit problème sur Firefox les ico-reseau crée un petit bogue, elle disparaisent.....et suprime pendant 2s une partie de l'affichage. Mais vraiment, j'encourage tous ceux qui veulent progresser a acheter ce tuto. En ce qui me concerne je ne suis pas pret de regreter cet achat.....MercIIIII Beaucoup...... "

par Pumbostara voté :
(a acheté ce tuto - 03 janvier 2012)

" Un tutoriel d'une qualité remarquable.

Clair, concis, le ton est juste et le résultat aussi !

Merci pour ces deux heures de formation à acheter sans hésitation. "

par Pumbostara voté :
(a acheté ce tuto - 01 janvier 2012)

" Bonjour

@spykrew07 :

J'ai suivi à la lettre le tuto et j'ai beau relire mon code, je ne trouve pas d'erreurs. Je vais me renseigner sur le site de l'éditeur.

Sinon, petite question : comment forcer le centrage de la div "Content" si je désire fixer la largeur de ma div à 800px et non à 50%. Cela est-il faisable ?

Un margin: auto ne fonctionne pas.

Merci de ton aide et de ta réactivité ! "

par spykrew07
(auteur de ce tuto - 01 janvier 2012)

" @samn1 Je suis désolé mais je ne peux pas te dévoiler tout ce que j'utilise dans le tuto, sinon il n'a plus aucun interet. Sinon, pour le logo et le graphisme du site, il n'y a pas de sources a donner puisque je suis le créateur. Bonne soirée, et merci d'avance si tu comptes acheter mon tuto ;) "

par samn1
(n'a pas acheté ce tuto - 01 janvier 2012)

" bonjour,
je voudrais savoir SVP quels sont les outils de travail de programmation que vous avez mis en place pour ce site et les sources de telechargement des logos et animation!
d'avance Merci "

par mikoud
(a acheté ce tuto - 31 décembre 2011)

" Hey niquel sa marche problème de link de la bibliothèque.. merci pour tout. Bonne année. "

par spykrew07
(auteur de ce tuto - 31 décembre 2011)

" @mikoud Le site complet est disponible dans les sources livrées avec le tuto. Tu va dans ton compte tuto.com, après dans "vos achats" dans la sidebar tu cliques sur "mes tutos vidéos" et normalement tu as la liste des tutos que tu as téléchargé.

Devant mon tuto, tu dois avoir un bouton "visionner" pour le voir en ligne, et un bouton "télécharger" pour récupérer les sources au format zip.

Si ton dossier img est dans le fichier "architecture" alors le chemin de des images devraient être : architecture/img/image1.jpg ... je ne comprend pas trop ton problème.

Télécharges les sources, et essayes de créer la même structure de dossiers que moi.

Bon courage :D "

par mikoud
(a acheté ce tuto - 31 décembre 2011)

" @spykrew07 je voudrais savoir ou trouve ton ton code source dont tu parles ? la présentation de mon dossier se constitue ainsi. Nom du dossier: Site architecture/img/js/index/style/supersized/
Seul le img est le js sont dans un dossier. Dans le img j'ai 2 img plus l'image progress.gif.

Dans le dossier Js, j'ai deux fichier qui a site.js et aussi supersized.
J'ai modifier le chemin comme dans la vidéo que t'a montrer pour le supersized.css. Toujours le même soucis. Merci "

par spykrew07
(auteur de ce tuto - 31 décembre 2011)

" @mikoud Tu as bien mis les bons chemins pour les images ? Par exemple : img/image1.jpg si tes images sont dans le dossier "img" ? Pour appeler jQuery depuis les seveurs de Google, normalement il n'y a aucun problème.

Regardes un peu la source qui est fourni avec le tuto, cela devrait peut-être t'aider à trouver ton erreur.

Si tu ne trouves pas, n'hésites pas à revenir vers moi.

Bonne formation ;) "

par mikoud
(a acheté ce tuto - 31 décembre 2011)

" Bonjour j'ai acheté votre tuto, j'ai un soucis déjà c'est quand je met la ligne de code pour le js, en lui indiquant les photos je sauvegarde est j'actualise sur chrome. Une page noir s'affiche mais aucune photos n'est présente ? est ce normal ? cela proviendrait t'il pas de la bibliotheque de gooogle pour le script ? Merci de votre réponse. "

par Trashcoma voté :
(a acheté ce tuto - 31 décembre 2011)

" Super, la mousewheel fonctionne ! Merci ! 5/5 pour le support. Perso ça fait une note de 10/5... ^^ "

par spykrew07
(auteur de ce tuto - 31 décembre 2011)

" @Trashcom Bonjour ! En effet, je viens de voir ça et j'ai la solution !

Très simple, sur le site du plugin, l'auteur nous met à disposition le script 2010 de mousewheel et du coup il ne prend pas en charge Firefox ! Donc remplace le fichier mouse.js par celui-ci :

https://github.com/brandonaaron/jquery-mousewheel/blob/master/jquery.mousewheel.js

Et le tour est joué ;) Merci de ton achat et de ton retour ! "

par spykrew07
(auteur de ce tuto - 31 décembre 2011)

" @Pumbostar Bizarre que tooltipsy ne fonctionne pas sur Chrome, car j'ai fait le tuto justement dessus. Tu as essayé à partir des sources fourni avec le tuto ? "

par Pumbostara voté :
(a acheté ce tuto - 31 décembre 2011)

" Bonjour,

Merci pour votre formation absolument excellente.

Je constate un léger bug chez moi : sur Chrome et Safari (MAC), le plugin Tooltipsy ne semble pas fonctionner.

Sous Firefox, il marche à la perfection donc je n'arrive pas à cibler le problème.

Merci de votre aide.

Cordialement "

par Laoija voté :
(a acheté ce tuto - 31 décembre 2011)

" Juste le parfait tuto au bon moment. Avec une zoombox de grafikart, me voilà fin prêt pour sortir un pti portfolio sympa! Encore MERCI! "

par Trashcoma voté :
(a acheté ce tuto - 30 décembre 2011)

" Super, merci pour ce tuto comme on aimerait en avoir plus ! ;o)

Par contre, pour Firefox le mousewheel ne fonctionne pas. Un petit coup de pouce pour résoudre ce problème ?

Merci ! 5/5 "

par spykrew07
(auteur de ce tuto - 30 décembre 2011)

" @blockbuster Merci pour ton com ;) C'est vrai que ça change un peu de toutes les maquettes de site que l'on voit en ce moment et qui se ressemblent. "

par blockbustera voté :
(a acheté ce tuto - 30 décembre 2011)

" Belle maîtrise ! Aucune lassitude malgré la longueur du tuto (pas de temps de perdu).
Le fix pour IE9 fonctionne très bien;
En prime, un challenge créatif car ce tuto donne vraiment envie de pousser le webdesign plus avant pour concilier ce background supersized et un content à la structure plus développée.
(-: "

par devlwanteda voté :
(a acheté ce tuto - 29 décembre 2011)

" Je ne suis pas sous IE mais sous Firefox comme c'est le cas sur mes Screenshots. :)

Néanmoins, j'ai remplacé ma ligne par ta ligne de code, et ça marche parfaitement sous Firefox.
JScrollPane me pose toujours le même problème, mais c'est peut être lié à mon navigateur, j'essaierai sur Chrome si j'ai le temps. :)

Encore une fois, très bon tuto, n'ayant jamais fait de JS avant, et très peu de CSS, je n'ai eu aucun mal à comprendre les raisonnements que tu as fais durant les différentes étapes et à finir le tuto.
Gratz :) "

par spykrew07
(auteur de ce tuto - 29 décembre 2011)

" @devlwanted Déja merci de ton achat et de ce vote positif ;) Pour ton petit problème, je pense que tu es sous Internet Explorer 9 car quelqu'un m'a déja contacté pour ce content mal centré. En effet sous Chrome cela fonctionne à merveille.

Du coup j'ai regardé un peu le css, et en modifiant la ligne du #content comme ceci :

#content {position:absolute; overflow:auto; top:25%; left:25%; background-color:rgba(255,255,255,0.8); width:50%; height:50%; box-shadow: 0 0 20px #000; -webkit-border-radius:3px; -webkit-transition:0.3s;}

Et du coup ça fonctionne beaucoup mieux sur ie, et toujours sur Chrome ;)

Sinon, pour ton problème avec jscrollpane, je ne comprends vraiment pas pourquoi l'animation ne se fait pas, car je viens de retester mes sources sur Chrome & Internet Explorer et tout fonctionne. Tiens moi au courant.

Bye !

"

par devlwanteda voté :
(a acheté ce tuto - 29 décembre 2011)

" Edit:

J'ai finalement continué et terminé le tutoriel cette nuit, mais j'ai toujours le même problème du content qui est mal positionné par rapport à la page et aux autres éléments.

Voilà donc le résultat que j’obtiens à la fin du tuto : http://hpics.li/88a265c

j'ai également un autre problème un peu moins gênant mais tout de même, le plugin ScrollPane ne marche pas pour l'animation ("glisser" entre les catégories). Voilà ma ligne de code, j'ai même essayé avec les fichiers sources, ça ne marche pas chez moi. :x

$("#content").jScrollPane({ hijackInternalLinks: true, animateScroll: true });

J'attends avec impatience une réponse pour pouvoir finaliser le site. :)

Enfin, excellent travail encore une fois, clair & très bien expliqué : 5/5. "

par devlwanteda voté :
(a acheté ce tuto - 28 décembre 2011)

" Salut Spykrew07,
Je suis en train de suivre ton tuto, mais j'ai quelques problèmes vers ~1h14min.

Je suis en train de définir le style dans le CSS de la balise #content, il n'y a a priori pas de faute, mais j'ai un problème lors de l'affiche à l'écran du résultat. Le cadre du contenu devrait normalement apparaître au milieu de la page, et ne pas dépasser une certaine taille (margin de 25% et height de 50%), mais cela ne marche pas chez moi (Voir Screenshot ci-dessous).

Voilà ce qui s'affiche chez moi : http://hpics.li/5c783bf

Le cadre ne s'adapte pas correctement (ne se centre pas, et ne prend pas en compte la hauteur souhaitée, donc pas de scrollbar).
Le résultat est le même avec les fichiers sources fournis, donc le problème ne semble pas venir d'une erreur dans le code.
Je suis sur un écran 24", avec une résolution de 1920*1080.

Je n'ai pour le moment pas encore continué le tuto.
J'espère que tu pourras m'aider :)
Merci par avance !

(Sinon, excellent tuto jusque là, 5/5)

"

par ArC3Nika voté :
(a acheté ce tuto - 28 décembre 2011)

" Exellent tuto !
Très bien expliqué, simple et clair ! "

par spykrew07
(auteur de ce tuto - 28 décembre 2011)

" Merci ;) Content que ça t'es plu !! "

par elcorsoa voté :
(a acheté ce tuto - 27 décembre 2011)

" énorme... "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto jQuery 1.7, CSS 3 d’une durée de 1 heure 53 minutes a été acheté 541 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 27 décembre 2011 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery webdesign.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !