olivier evrard

*********************
*********************

2.3 jQuery bis

.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

$(document).ready(function() {
window.sr = new ScrollReveal();

sr.reveal('.maclasse');
sr.reveal('img', { delay: 500 });
});

.scrollTop

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

Dossier de départ

> Teams

Liens autres jQuery

*********************