TP1 Animation JQuery
TP1 Animation JQuery
-
Objectifs
- Utiliser Jquery pour pour créer une fonctionnalité coulissante
-
Exercice 01
-
Énoncé
- Dans cet exercice, nous allons discuter de la façon de créer une animation de défilement vers la gauche et la droite dans jQuery qui permettra aux utilisateurs de faire défiler facilement un ensemble d’image avec les en un seul clic.
- Dans cet exercice, vous allez créer un scroller d’image qui se déclenche lorsque le pointeur de la souris entre dans son conteneur.
- La vitesse à laquelle les images défileront sera déterminée par la distance entre le pointeur de la souris et le centre du conteneur. Le déplacement du pointeur ralentira ou accélérera l’animation en conséquence.
- Le défilement se réalise aussi avec les touches fléchées du clavier.Utilisez vos touches fléchées pour faire défiler les images
- Écrire un script en jQuery permettant de réaliser l’animation suivante:
- Tout d’abord, vous allez créer la page HTML et ajouter la page CSS. Ajoutez les éléments suivants à l’élément de votre fichier HTML:
-
Le fichier HTML
-
Le fichier CSS
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 02
-
Énoncé
- Définir un document HTML5 comportant un bouton et un élément div.
- Styler l’élément div pour lui donner les caractéristiques suivantes :
- position absolue à 35 pixels du bord supérieur et à 10 pixels du bord gauche
- largeur 50px, hauteur 50px
- Une position absolue
- couleur d’arrière-plan bleu
- bordure continue bleu foncé épaisse de 3px
- opacité de 0,65
- border-radius est de 6px
- Bord gauche et haut respectivement 10px et 50px
- Définir un script qui permet, au clic sur le bouton, d’augmenter la largeur et la longueur de 150px puis les décrémenter de 100px.
- L’animation sera répétés sans cesse.
- Modifier le script pour pouvoir arrêter l’animation au survol de la souris sur l’élément div.
- Si la souris est en dehors de l’élément div, l’animation recommence.
- L’image ci-dessous représente le rendu souhaité de l’exercice.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
<div id="proximity">
<img src="img/proximity1.jpg" alt="CH-47 Chinook">
<img src="img/proximity2.jpg" alt="Mi-24W">
<img src="img/proximity3.jpg" alt="Mil Mi-24A">
<img src="img/proximity4.jpg" alt="AH-1J Cobra">
<img src="img/proximity5.jpg" alt="Mi-24P">
<img src="img/proximity6.jpg" alt="AH-1Z Viper">
<img src="img/proximity7.jpg" alt="AH-1W">
<img src="img/proximity8.jpg" alt="UH-1Y Huey">
<img src="img/proximity9.jpg" alt="AH-64 Apache">
<img src="img/proximity10.jpg" alt="AH-1W Super Cobra">
<img src="img/proximity11.jpg" alt="MI-28 Havoc">
<img src="img/proximity12.jpg" alt="AH-1W Super Cobra">
<img src="img/proximity13.jpg" alt="AH-1W Cobra">
<img src="img/proximity14.jpg" alt="Mi-24 HIND E">
<img src="img/proximity15.jpg" alt="AH-1W Super Cobra">
<img src="img/proximity16.jpg" alt="UH-1N Huey">
<img src="img/proximity17.jpg" alt="AH-64D Apache">
<img src="img/proximity18.jpg" alt="UH-1N Huey">
<img src="img/proximity19.jpg" alt="Lempira Bell 412">
<img src="img/proximity20.jpg" alt="UH-60L Blackhawk">
</div>/* base classes (scripting disabled) */
#proximity { width:960px; margin:auto; border:1px solid #000; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
#proximity img { border:1px solid #000; }
/* scripting enabled classes */
#proximity.slider { width:550px; height:250px; position:relative; overflow:hidden; }
.slider #scroller { position:absolute; left:0; top:0; }
.slider #scroller img { display:block; width:150px; height:150px; margin:50px 0 0 50px; float:left; color:#fff; background-color:#000; }
.slider #scroller img:first-child { margin-left:0; }
#message { width:100%; height:30px; padding-top:10px; margin:0; -moz-border-radius:0 0 8px 8px; -webkit-border-bottom-radius:8px; -webkit-border-bottom-right-radius:8px; border-radius:0 0 8px 8px; position:absolute; bottom:0; left:0; background-color:#000; color:#fff; text-align:center; font:18px "Nimbus Sans L", "Helvetica Neue", "Franklin Gothic Medium", Sans-serif; }
