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>
Liens autres jQuery
- https://soluka.fr/blog/recherche-et-developpement/lazy-load-comment-reduire-le-temps-de-chargement-de-votre-site/
- http://pixelcog.github.io/parallax.js/