11480 sujets

JavaScript, DOM et API Web HTML5

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 Smiley cligne )).
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)
Hello,

Pour animer un élément du haut vers le bas :


#container1 { animation: 1s anim-top; }

@keyframes anim-top { from { transform: translateY(-1000px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } }


Par contre je pense que tu devrais fixer tous les petits trucs qui clochent avant de faire des animation Smiley smile
Bas justement si il y a moyen de m'aider pour fixer les mauvaises choses... car je n'ai jamais utilisé JS. Dit moi si m'a manière de faire est bien ou pas ? Que dois je faire pour l'améliorer, comment penser lorsque je fais mon site web ! car quand je regarde des tuto pour voir ce qui m'intéresse et comment ça fonctionne, je ne comprend pas tout, surtout l'assemblage des différentes propriété CSS, et leurs actions en étant combiné !
Modifié par HexteckGate (08 Apr 2020 - 10:39)
connecté
stryk a écrit :
Par contre je pense que tu devrais fixer tous les petits trucs qui clochent avant de faire des animation Smiley smile

Les textes qui dépassent de leurs conteneurs par exemple.
Ok, un petit overflow : hidden; et c'est bon, mais c'est pas vraiment le gros problème surtout que ce texte, y'aura pas vraiment du texte ici, en soit ne vous occupez pas des détails, je sais comment les régler, ce que je n'arrive pas à faire c'est tout simplement : l'utilisateur clique sur un block, et en gros t'a un fond transparent qui apparait pour mettre en valeur ce qui vas s'afficher. Ensuite des textes glissent pour s'afficher par dessus, en plus d'une croix pour fermer cette "pseudo fenêtre" qui s'affiche par dessus le site web !
Là j'ai fais la modif que "stryk" a écrit mais l'élément ne reste pas, comment faire mon "on - off" que l'élément soit animé mais qu'il reste. Car vous savez quand on dit à un block d'aller quelque part, puis on mais une transition de quelque secondes puis on lui dit de changer de place, bas il fait le trajet, ici il le fait quand je lui dit avec JavaScript mais y'a pas la transition !
Modifié par HexteckGate (08 Apr 2020 - 11:16)
HexteckGate a écrit :
Là j'ai fais la modif que "stryk" a écrit mais l'élément ne reste pas, comment faire mon "on - off" que l'élément soit animé mais qu'il reste

Il faudrait que l'élément en question soit bien positionné ...
Si tu regarde l'animation que je t'ai passé, ta div revient à sa place de départ !
Donc elle reste !! Elle reste à sa mauvaise place Smiley cligne ( vire le display: none sur ta div parente tu va comprendre ).
Une fois le positionnement réglé:
_ HTML: ajoute une croix en SVG et met un onclick dessus
_ JS: une fonction pour passer ce pop-up en hidden

_ CSS: ajoute une classe dans laquelle tu fais pointer l'animation
_ JS: un test d'apparition de la div dans le viewport
_ ajout de la classe avec l'animation
_ puis suppression de la classe
( pour pas que ça s'anime à chaque fois que tu scroll dessus.
Meilleure solution
Donc en gros, tu veux que je place les éléments directement à leurs positions d'arrivée pour ensuite les déplacer quand je fais mon animation ?
Et après je pourrai remettre le display: none; ou y'a une meilleure façon ?
Je n'arrive pas a gérer mon background transparent et en même temps m'a div qui contient les info, je crois ne sais pas pourquoi mais position: relative/absolute n'a aucun effet !
En fait, je comprend pas comment correctement placer les éléments, et c'est mon gros problème ! Pour les éléments parents ça va, mais les enfants, c'est vraiment le bazard, je sais pas comment faire ce que je veux.
Modifié par HexteckGate (08 Apr 2020 - 14:08)
Oui voilà tu place d'abord et ensuite l'animation fera le job !
Oui le display: none au click de la croix pour "fermer" la div.
Ah ça le placement c'est chiant ^ ( je galère souvent)
Je te conseille de faire un petit dessin sur papier avec les blocs à placer, ça va te faire gagner un temps fou.
Ça marche super bien ! Smiley biggrin Je comprend mieux maintenant ! Car avant les animations j'avais plein d'idées mais, comme je ne savais pas ça... RIP Smiley corde le résultat. Merci ! Pour le moment je laisse le post ouvert si j'ai d'autres questions, pour pas multiplier les posts.
Si ça peut t'aider, regarde ce site: http://planetepizza77.free.fr/ ( mon premier site mdr )
Dans le fichier slideElement.js tu as:
_un détecteur d'entrée d'élément dans le viewport
_une moulinette qui va ajouter/supprimer des classes selon si il a déjà été animé
Et dans le fichier slideElement.css tu as toutes les animations d'entrées possibles:
_ vers le bas / haut / droite ... etc
_ zoom / rotate

Pour utiliser c'est easy !!!
Tu veux animer un élément ? ( div img button autres )
tu place un div en parent avec la class que tu veux:
_ toAnimateTop / toAnimateZoom .. etc

Et c'est tout Smiley cligne
J'ai fais le button pour fermer mais du coup : l'animation ne se fais qu'une fois (je sais pourquoi mais pas comment régler le problème).
Et merci*
Je vois que t'utilise des "<span>" mais j'avoue ne jamais avoir saisis leur utilisation.
Modifié par HexteckGate (08 Apr 2020 - 14:54)
Bon du coup, je pourrais ajouter d'autres blocs animé comme celui déjà présent et aussi ajouter d'autres "pages-pop-up" facilement. Mais à terme, j'ajouterai un slider horizontale pour les blocs (de la page principale) mais c'est une toute autre histoire !
Modifié par HexteckGate (08 Apr 2020 - 15:08)
HexteckGate a écrit :
l'animation ne se fais qu'une fois (je sais pourquoi mais pas comment régler le problème).


Par défaut l'animation ne se fait qu'une fois sauf si tu précise les arguments.
Je pensais que tu voulais juste faire apparaitre ta div avec un effet.
Si tu veux animer en permanence, peut être voir de ce coté:
https://developer.mozilla.org/fr/docs/Web/CSS/animation
Non je parlais quand tu quitte la "page-pop-up" et que tu reviens ! mais j'ai relu ce que tu avais mis un peut plus haut ! Je sais pas si c'était destiné pour ça en tout cas dans m'a fonction pour fermer :
function close(productId, number) {
  containerId = 'container' + number;
  document.getElementById(productId).style.top = "-100vh"; // CACHER LA PAGE D'INFORMATION
  document.getElementById(containerId).style.animation = ""; //Enlever l'animation pour la remettre après !
}



Et puis, une remarque : il faut savoir correctement poser les bases et après TOUT s'ouvre ! On fais ce qu'on veut ! Smiley cligne
Modifié par HexteckGate (08 Apr 2020 - 17:23)
Résumé :

Je n'arrivais pas à :
--> Créer une "page-pop-up" qui s'affiche quand on clic sur un bouton.
--> Ensuite correctement afficher mes éléments sur cette "page-pop-up" (le texte/tout était invisible je ne comprenais pas pourquoi !).
--> Enfin, comment correctement animer les éléments quand la "page-pop-up" apparait !

Le résultat (c'est un test bien sûr !) :
https://deadlycavernousparameters.legendary4226.repl.co/

Il manque encore, pour que le site soit joli, des :hover sur les éléments etc...
Hello,

bah c'est pas mal du tout ^tu as bien avancé !!

Pour le placement de "TEST", plutôt que ça:

#productOne , #productTwo {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: -100vh;
  left: 0;
  overflow: hidden;
}


Tu peux essayer ceci: ( y'a surement plus simple mais bon )

.productInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}