Antoine Guiral : apprenti du web 2.0

Partage d’expériences sur le web

Présentation de mes projets (2/4) : mon CV en ligne

Posted by Guiral antoine sur janvier 12, 2008

Second billet de la série! Celui là porte sur un autre de mes projets : mon cv en ligne.

J’ai avant tout voulu m’amuser, être original et apprendre des technos. Cette réalisation m’a notamment permis de me familiariser avec le framework javascript jquery.

A l’heure où j’écris cet article je n’ai pas encore créé le contenu du site mais ça viendra vite et vous serez les premiers avertis :-p

  • Le design : un ptit tour de photoshop et puis s’en va

Le design est assez simple aux couleurs un peu flashy. Pour le titre j’ai suivi ce petit tuto sur le site de babylon-design.

  • L’intégration du design : css/html

Ici, j’ai fait des cadres avec bordures, angles arrondies et extensible en plus! Je ferais un article très prochainement sur ma manière de faire ce type de cadres stylés et extensibles.

  • les petits effets javascript : utilisation du framework jquery

Alors l’effet que je voulais faire était simple : au passage de la souri sur un cadre celui ci s’agrandit (d’où les cadres extensibles ;-p). Au clic sur un des cadres celui ci prend toute la fenêtre, les deux autres passant en dessous.

Voici le code javascript basé sur jquery :
$(document).ready(function() {
$("#cadre_1, #cadre_2, #cadre_3").hide();
$("#cadre_1 ").show('slow');
$("#cadre_2 ").show('slow');
$("#cadre_3 ").show('slow');

$("#cadre_1").mouseover(function(){
$("#cadre_2").animate({width: 230,left:(parseInt(document.body.clientWidth/2)+5),top:250}, "fast"),
$("#B_violet").animate({height: 200}, "fast"),
$("#cadre_3").animate({width: 230,left:(parseInt(document.body.clientWidth/2)-235),top:440}, "fast"),
$("#B_bleu").animate({height: 200}, "fast"),
$("#cadre_1").animate({width: 370,left:(parseInt(document.body.clientWidth/2)-375),top:170}, "fast"),
$("#B_vert").animate({height: 220}, "fast")
});

$("#cadre_2").mouseover(function(){
$(this).animate({width: 290,left:(parseInt(document.body.clientWidth/2)+5),top:270}, "fast"),
$("#B_violet").animate({height: 290}, "fast"),
$("#cadre_1").animate({width: 300,left:(parseInt(document.body.clientWidth/2)-305),top:230}, "fast"),
$("#B_vert").animate({height: 130}, "fast"),
$("#cadre_3").animate({width: 230,left:(parseInt(document.body.clientWidth/2)-235),top:410}, "fast"),
$("#B_bleu").animate({height: 200}, "fast")
});

$("#cadre_3").mouseover(function(){
$("#cadre_1").animate({width: 300,left:(parseInt(document.body.clientWidth/2)-305),top:190}, "fast");
$("#B_vert").animate({height: 130}, "fast");
$("#cadre_2").animate({width: 230,left:(parseInt(document.body.clientWidth/2)+5),top:270}, "fast");
$("#B_violet").animate({height: 200}, "fast");
$("#cadre_3").animate({width: 290,left:(parseInt(document.body.clientWidth/2)-295),top:370}, "fast");
$("#B_bleu").animate({height: 290}, "fast")
});

$("#cadre_1").click(function(){
$("#cadre_2").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2+505),top:720}, "fast"),
$("#B_violet").animate({height: 100}, "fast"),
$("#titre_cadre_2").animate({marginTop: 20}, "fast"),
$("#cadre_3").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2),top:720}, "fast"),
$("#B_bleu").animate({height: 100}, "fast"),
$("#titre_cadre_3").animate({marginTop: 20}, "fast"),
$("#cadre_1").animate({width: 1000,left:(parseInt(document.body.clientWidth-1000)/2),top:170}, "fast"),
$("#B_vert").animate({height: 500}, "fast")
});

$("#cadre_2").click(function(){
$("#cadre_3").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2+495),top:720}, "fast"),
$("#B_bleu").animate({height: 100}, "fast"),
$("#titre_cadre_3").animate({marginTop: 20}, "fast"),
$("#cadre_1").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2),top:720}, "fast"),
$("#B_vert").animate({height: 100}, "fast"),
$("#titre_cadre_1").animate({marginTop: 20}, "fast"),
$("#cadre_2").animate({width: 1000,left:(parseInt(document.body.clientWidth-1000)/2),top:170}, "fast"),
$("#B_violet").animate({height: 500}, "fast")
});

$("#cadre_3").click(function(){
$("#cadre_1").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2+495),top:720}, "fast"),
$("#B_vert").animate({height: 100}, "fast"),
$("#titre_cadre_1").animate({marginTop: 20}, "fast"),
$("#cadre_2").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2),top:720}, "fast"),
$("#B_violet").animate({height: 100}, "fast"),
$("#titre_cadre_2").animate({marginTop: 20}, "fast"),
$("#cadre_3").animate({width: 1000,left:(parseInt(document.body.clientWidth-1000)/2),top:170}, "fast"),
$("#B_bleu").animate({height: 500}, "fast")
});
});

Bien sur les sélécteurs CSS sont en rapport avec le source de ma page (allez sur mon cv en ligne avec firefox et faites ctrl+u).

La méthode show permet d’afficher les cadres progressivement au chargement de la page.

La méthode animate quand à elle permet de modifier les attributs de style d’un élément html de manière animée (en opposition avec ce que pourrais rendre un removeAttribute suivit d’un setAttribute). Il est possible de régler la vitesse de l’animation : dans mon cas j’ai tout mis en « fast » pour ne pas gêner la navigation.

Voila c’est fini pour mon cv! A bientôt pour de nouvelles aventures!

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

 
%d blogueurs aiment cette page :