PS : J'AI MIS EN FIN DU TOPIC UN RÉSUMÉ POUR CEUX QUI NE VEULENT PAS TOUT LIRE
Le lien de mon "site" est le suivant : https://deadlycavernousparameters.legendary4226.repl.co/
Alors je ne sais pas comment faire pour que le bloc "#container1" soit animé car là il s'affiche juste, j'aimerai le faire glisser du haut vers le bas ? Comment dois je m'y prendre ?
Pour utiliser mon site il faut cliquer sur le gros bloc de gauche (je n'ai pas encore tout codé c'est juste des test (donc moche aussi
)).
Ensuite pour revenir sur la page, il n'y a pas encore de bouton "Close" donc il faut actualiser !
LE CODE :
Modifié par HexteckGate (09 Apr 2020 - 09:23)
Le lien de mon "site" est le suivant : https://deadlycavernousparameters.legendary4226.repl.co/
Alors je ne sais pas comment faire pour que le bloc "#container1" soit animé car là il s'affiche juste, j'aimerai le faire glisser du haut vers le bas ? Comment dois je m'y prendre ?
Pour utiliser mon site il faut cliquer sur le gros bloc de gauche (je n'ai pas encore tout codé c'est juste des test (donc moche aussi
)). Ensuite pour revenir sur la page, il n'y a pas encore de bouton "Close" donc il faut actualiser !
LE CODE :
<html>
<head>
<title>Tests</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="slider">
<div class="contain-slide">
<button class="element one" onClick="javascript: productInfo('productOne', 1)">
<!-- Information sur l'application Une -->
<h1>Product 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. At varius vel pharetra vel turpis nunc eget lorem dolor. Dui faucibus in ornare quam viverra orci. Vestibulum lectus mauris ultrices eros in cursus turpis. Nulla facilisi cras fermentum odio. Odio aenean sed adipiscing diam donec adipiscing. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Etiam tempor orci eu lobortis elementum nibh tellus. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Etiam tempor orci eu lobortis elementum nibh tellus molestie.
Pellentesque nec nam aliquam sem et tortor consequat id. Lectus nulla at volutpat diam ut venenatis. Pellentesque nec nam aliquam sem et. Tortor condimentum lacinia quis vel eros donec ac odio. Velit ut tortor pretium viverra suspendisse potenti nullam. Congue eu consequat ac felis donec et odio pellentesque. Habitant morbi tristique senectus et netus et. Laoreet sit amet cursus sit amet dictum. Sed augue lacus viverra vitae congue eu consequat. Viverra accumsan in nisl nisi scelerisque eu ultrices.
</p>
</button>
<button id="productTwo" class="element two" onClick="javascript: productInfo('productTwo', 2)">
<!-- Information sur l'application Deux -->
<h1>Product 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. At varius vel pharetra vel turpis nunc eget lorem dolor. Dui faucibus in ornare quam viverra orci. Vestibulum lectus mauris ultrices eros in cursus turpis. Nulla facilisi cras fermentum odio. Odio aenean sed adipiscing diam donec adipiscing. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Etiam tempor orci eu lobortis elementum nibh tellus. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Etiam tempor orci eu lobortis elementum nibh tellus molestie.
Pellentesque nec nam aliquam sem et tortor consequat id. Lectus nulla at volutpat diam ut venenatis. Pellentesque nec nam aliquam sem et. Tortor condimentum lacinia quis vel eros donec ac odio. Velit ut tortor pretium viverra suspendisse potenti nullam. Congue eu consequat ac felis donec et odio pellentesque. Habitant morbi tristique senectus et netus et. Laoreet sit amet cursus sit amet dictum. Sed augue lacus viverra vitae congue eu consequat. Viverra accumsan in nisl nisi scelerisque eu ultrices.
</p>
</button>
</div>
</div>
<!-- Pages d'information produit -->
<div id="productOne">
<div id="back"></div>
<div id="container1">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. At varius vel pharetra vel turpis nunc eget lorem dolor. Dui faucibus in ornare quam viverra orci. Vestibulum lectus mauris ultrices eros in cursus turpis. Nulla facilisi cras fermentum odio. Odio aenean sed adipiscing diam donec adipiscing. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Etiam tempor orci eu lobortis elementum nibh tellus. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Etiam tempor orci eu lobortis elementum nibh tellus molestie.
Pellentesque nec nam aliquam sem et tortor consequat id. Lectus nulla at volutpat diam ut venenatis. Pellentesque nec nam aliquam sem et. Tortor condimentum lacinia quis vel eros donec ac odio. Velit uttortor pretium viverra suspendisse potenti nullam. Congue eu consequat ac felis donec et odio pellentesque. Habitant morbi tristique senectus et netus et. Laoreet sit amet cursus sit amet dictum. Sed augue lacus viverra vitae congue eu consequat. Viverra accumsan in nisl nisi scelerisque eu ultrices.</p>
</div>
</div>
</div>
</body>
</html>body {
margin: 0;
padding: 0;
background-color: #4c4c4c;
}
.slider {
width: 85vw;
height: 70vh;
position: relative;
top: 15vh;
left: 15vw;
}
.contain-slide {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.element {
margin: auto;
position: relative;
top: 5vh;
width: 25vw;
height: 60vh;
}
.one {
background-color: #9dad6f;
}
.two {
background-color: #bcd979;
}
div.contain-slide button {
border: none;
cursor: pointer;
}
/* Product ONE */
#productOne {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 15;
display: none;
}
#back {
z-index: 10;
width: 100vw;
height: 100vh;
background-color: #636363;
opacity: 0.79;
}
#container1 {
transition-duration: 3s;
position: absolute;
left: 0;
background-color: white;
height: 500px;
width: 800px;
top: -100vh;
}/* Variables GLOBALES */
var statusId = new Map();
/* Fonctions */
function productInfo(productId, number) { /* Vérifie l'état si le descriptif du produit est afficher ou non et ouvre/ferme l'aperçu. Prend le numéro du produit en argument. */
if (statusId.has(productId)) { /* Valeur à 1 pour Ouvrir et 0 pour Fermer */
if(statusId.get(productId) == 0) {
close(productId, number);
statusId.set(productId, 1);
}
else {
open(productId, number);
statusId.set(productId, 0);
}
}
else {
statusId.set(productId, 0);
open(productId, number);
}
containerId = 'container' + number;
console.log(containerId);
console.log(statusId);
}
function open(productId, number) {
containerId = 'container' + number;
document.getElementById(productId).style.display = "block"; // AFICHER LA PAGE D'INFORMATION
document.getElementById(containerId).style.transition = "1s ease"; // ANIMER
document.getElementById(containerId).style.transform = "translateY(100vh)";
}
function close(productId, number) {
}Modifié par HexteckGate (09 Apr 2020 - 09:23)
Je comprend mieux maintenant ! Car avant les animations j'avais plein d'idées mais, comme je ne savais pas ça... RIP 
le résultat. Merci ! Pour le moment je laisse le post ouvert si j'ai d'autres questions, pour pas multiplier les posts.