2.3 jQuery bis

jQuery (.scrollTop)

Téléchargez le dossier de départ
Analysez l’exemple fourni
Travaillez l’image dans Photoshop (gif) puis exportez
Importez textes et image dans l’HTML
Codez le CSS pour être le plus proche possible de l’objectif
Have fun !

Dossier de départ

Demandez la clé usb du prof

Performances au chargement

Pour des questions de performance, Google Code et Yahoo Developer Network : Exceptional Performance recommandent :

de placer les appels aux librairies en fin de page avant </body>
de placer les appels aux feuilles de style CSS avant, dans la section <head> grâce au tag link
de combiner au maximum les fichiers JavaScript/CSS, de les compresser/minifier et de les externaliser (c’est à dire les placer chacun dans un fichier externe à la page et non en ligne avec toutes leurs instructions dans le code html) | source: Alsacréations

Exemple :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
 ...
 <script src="jquery.js"></script>
 <script src="mon_script.js"></script>
</body>

</html>

Autres fonctions jQuery

.fadeOut

Quand je clique sur « img », « img » disparait…

$(document).ready(function() {
   $("img").click(function() {      
$(this).fadeOut(700);       
 });
});

//this veut dire l'élément sélectionné
// afin de ne pas agir sur toutes les img

.css

Quand je clique sur « a », « body » change de background-color…

$(document).ready(function() {
   $("a").click(function() {      
$("body").css( "background-color", "#00FF00" );      
 });
});

.html

Quand je clique sur « a », le texte du « h1 » change…

$(document).ready(function() {
   $("a").click(function() {      
$("h1").html( "Bien joué !" );     
 });
});

jQuery Scroll Reveal

Voici un exemple de code à adapter à votre page

<script type="text/javascript">
window.sr = new ScrollReveal();

sr.reveal('.headline');
sr.reveal('.tagline', { delay: 500 });
</script>

olivier evrard