TOP 5 ACTEURS
HTML – CSS – JQUERY
CODE HTML
<!DOCTYPE html>
<html>
<head>
<title> Top 5 des meilleurs acteurs </title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Limelight&family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Top 5 des meilleurs acteurs</h1>
</header>
<section id="main-menu">
<ul>
<li>
<div id="Part1" class="images">
<div class="bw"></div>
<div class="color"></div>
</div>
<div class="description">
<h2>Dwayne <br> Johnson </h2>
<h3>Ses meilleurs films</h3>
<p>Jumanji</p>
<p>San Andreas</p>
<p>Fast and Furious</p>
</div>
</li>
<li>
<div id="Part2" class="images">
<div class="bw"></div>
<div class="color"></div>
</div>
<div class="description">
<h2>Scarlett <br> Johansson </h2>
<h3>Ses meilleurs films</h3>
<p>Lucy</p>
<p>Avengers</p>
<p>The Island</p>
</div>
</li>
<li>
<div id="Part3" class="images">
<div class="bw"></div>
<div class="color"></div>
</div>
<div class="description">
<h2>Robert <br> Downey Jr </h2>
<h3>Ses meilleurs films</h3>
<p>Iron Man</p>
<p>Oppenheimer</p>
<p>Sherlock Holmes</p>
</div>
</li>
<li>
<div id="Part4" class="images">
<div class="bw"></div>
<div class="color"></div>
</div>
<div class="description">
<h2>Margot <br> Robbie </h2>
<h3>Ses meilleurs films</h3>
<p>Le Loup de Wall Street</p>
<p>Suicide Squad</p>
<p>Barbie</p>
</div>
</li>
<li>
<div id="Part5" class="images">
<div class="bw"></div>
<div class="color"></div>
</div>
<div class="description">
<h2>Tom <br> Holland </h2>
<h3>Ses meilleurs films</h3>
<p>Spider-Man </p>
<p>Avengers</p>
<p>Cherry</p>
</div>
</li>
</ul>
</section>
<section id="buttons-menu">
<ul>
<li class="button">Dwayne <br> Johnson</li>
<li class="button">Scarlett <br> Johansson</li>
<li class="button">Robert <br> Downey Jr</li>
<li class="button">Margot <br> Robbie</li>
<li class="button">Tom <br> Holland</li>
</ul>
</section>
</body>
</html>CODE CSS
/* GENERAL */
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
body {
background: #bfbfbf url('images/background.jpg') repeat-x;
font-family: Arial, sans-serif;
}
header {
padding: 30px 0;
}
header h1 {
font-size: 40px;
text-align: center;
color: white;
text-transform: uppercase;
text-shadow: 2px 2px 2px black;
font-family: 'Limelight', sans-serif;
}
/* Main Menu */
#main-menu ul {
width: 980px;
height: 500px;
margin: 0 auto;
padding-top: 148px;
}
.bw {
position: absolute;
left: 0px;
width: 140px;
height: 500px;
cursor: pointer;
background: url('images/bw-image.jpg') no-repeat;
}
.color {
position: absolute;
left: 140px;
width: 140px;
height: 500px;
cursor: pointer;
background: url('images/color-image.jpg') no-repeat;
}
#Part2 div {
background-position: -140px 0; /* Decaler l'image de 140 px */
}
#Part3 div {
background-position: -280px 0; /* Decaler l'image de 140 px */
}
#Part4 div {
background-position: -420px 0; /* Decaler l'image de 140 px */
}
#Part5 div {
background-position: -560px 0; /* Decaler l'image de 140 px */
}
.description {
position: absolute;
left: 140px;
width: 240px;
height: 460px;
padding: 20px;
background: white;
}
.description h2 {
padding-top: 20px;
font-size: 30px;
text-align: center;
color: #333;
text-transform: uppercase;
font-family: 'Limelight', sans-serif;
}
.description h3 {
margin-top: 30px;
padding: 10px;
font-size: 26px;
background: #d70000;
color: white;
text-align: center;
text-shadow: 1px 1px 1px black;
border-radius: 5px;
font-family: 'Lobster', sans-serif;
}
.description p {
padding-top: 35px;
font-size: 22px;
text-align: center;
color: #333;
font-family: 'Lobster', sans-serif;
}
#main-menu ul li {
float: left;
width: 140px;
height: 500px;
overflow: hidden; /* Ce qui depasse ne se voit pas */
position: relative;
}
/* BUTTONS */
#buttons-menu {
float: left;
width: 100%;
padding: 170px 0 50px 0;
}
#buttons-menu ul {
float: left;
position: relative;
left: 50%;
text-align: center;
}
.button {
float: left;
width: 150px;
margin-left: 30px;
padding: 10px 0;
position: relative;
right: 50%;
text-shadow: 1px 1px 1px black;
font-family: 'Lobster', sans-serif;
text-align: center;
color: white;
border-radius: 5px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.75);
background: #333;
border: 2px solid #b70000;
font-size: 22px;
cursor: pointer;
opacity: 0.9;
}
.button:hover {
background: #b70000;
border: 2px solid #333;
font-size: 24px;
} CODE JQUERY
$(function(){
var $mainMenuItems = $("#main-menu ul").children("li"), //prendre les enfants du menu ul. ici c'est li
totalMainMenuItems = $mainMenuItems.length, //retourner le nombre d'éléments dans le main menu items
openedIndex = 0, //savoir index de l'élément ouvert . et ouvrir sur l'index 0
//déclarer la fonction init
init = function(){
bindEvents();
if(validIndex(openedIndex))
animateItem($mainMenuItems.eq(openedIndex), true, 700); //ouvrir le numéro dans "openedIndex" lors du chargement de la page en 700ms
},
bindEvents = function(){
$mainMenuItems.children(".images").click(function(){ //filtrer les enfants directs de mainMenu possédant la classe "image"
var newIndex = $(this).parent().index(); //Élément sur lequel je viens de cliquer. Index = Me retourner l'index de cet élément parmi ses parents.
//this = l'élément sur lequel je suis quand j'y exécute la fonction sur lequel sur laquelle j'ai mis un clic
checkAndAnimateItem(newIndex);
});
$(".button").hover(function(){ //quand je rentre sur le bouton j'ajoute la classe .hover
$(this).addClass("hover");
},
function(){ //quand je sors du bouton j'enlève la classe .hover
$(this).removeClass("hover");
});
$(".button").click(function(){ //quand je clique sur le bouton
var newIndex = $(this).index();
checkAndAnimateItem(newIndex);
});
},
validIndex = function(indexToCheck){
return (indexToCheck >= 0) && (indexToCheck < totalMainMenuItems); //est-ce que l'index est valide
},
animateItem = function($item, toOpen, speed){ //item que je veux animer + ouverture ou fermeture + vitesse
var $colorImage = $item.find(".color"), //trouver parmi les descendants, l'item qui a la classe "color"
itemParam = toOpen ? {width: "420px"}: {width: "140px"}, //si ouverture est vraie alors attribuer la valeur 1 (420) SINON false et valeur = 140px
colorImageParam = toOpen ? {left: "0px"}: {left: "140px"};
$colorImage.animate(colorImageParam,speed); //animation sur color image et la passer en fonction des paramètres de "colorImageParam"
$item.animate(itemParam,speed); //animation pour faire apparaître la description
},
checkAndAnimateItem = function(indexToCheckAndAnimate){
if(openedIndex === indexToCheckAndAnimate){ //Si l'Index sur lequel je viens de cliquer est égal à l'index qui était déjà ouvert
animateItem($mainMenuItems.eq(indexToCheckAndAnimate), false, 150); //fermer l'item (false) d'une vitesse de 150ms
openedIndex = -1;
}
else {
if(validIndex(indexToCheckAndAnimate)) { //vérifier si l'index sur lequel je clique est valide
if(validIndex(openedIndex)) {
animateItem($mainMenuItems.eq(openedIndex), false, 150); //fermer l'index précédent
}
openedIndex = indexToCheckAndAnimate; //ouvrir le nouvel index
animateItem($mainMenuItems.eq(openedIndex), true, 150); //ouvrir l'item (true) d'une vitesse de 150ms
}
}
};
init(); //exécuter la fonction init
});