Les animations

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Les animations

Message par Laférosse Mar 19 Sep 2023, 09:21

Bonjour, je n'ai pas un problème en particulier mais je m'interrogeai au sujet de certaines animations. Certains sites proposent des animations absolument géniales ( je pense notamment au sous-marin, la machine à café etc...) avec une redirection vers Codepen. Celui-ci comprend en général du HTML, CSS et parfois du JS. J'ai essayé bien sûr, de tester ces codes (sur ma version AwesomeBB) qui ne fonctionnent pas. Je me demandai alors si c'est simplement incompatible avec les forums FA où si c'est une question d'adaptation et que ces animations pourraient être donc opérationnelles pour moi (nous).  Merci de votre réponse.

Je mets les liens pour visualiser.

https://blog.hubspot.fr/website/animation-css
https://codepen.io/hjdesigner/pen/jvyJdX

https://web-eau.net/blog/15-animations-css-vraiment-bluffantes
https://codepen.io/ajerez/pen/EaEEOW


Dernière édition par crocnana le Mer 20 Sep 2023, 04:11, édité 1 fois
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Les animations

Message par Ganthille Mar 19 Sep 2023, 10:06

Bonjour,

Certaines animations auxquelles vous donnez des références sont en effet incompatibles avec Forumactif (PUG, SCSS, etc.)
Normalement la "machine à café" serait compatible, il s'agit de mettre le code HTML dans le template désiré ou une page HTML indépendante, et de mettre le CSS dans votre fichier CSS.

Ganthille

Ganthille
*

Messages : 40
Inscrit(e) le : 25/03/2021

https://frost.forumactif.com/
Ganthille a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les animations

Message par Laférosse Mar 19 Sep 2023, 10:30

J'ai testé plusieurs animations et notamment la machine à café en mettant le HTML en page accueil et bien sur la css. Sans résultat. Avez-vous, vous même testé sur la version AwesomeBB ? Dès fois, que je m'y serais mal pris. ok
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Les animations

Message par photoclic Mar 19 Sep 2023, 13:35

Bonjour,

Comme dit Ganthille, en mettant le code dans une page html, vous pourrez utiliser la page sous forme d'iframe par exemple.

A essayer, pas très doué en code:
Créer une nouvelle page html en y mettant le code et le css pour ne pas charger votre page css comme ceci:
Code:

<style>
  .container {
  width: 300px;
  height: 280px;
  position: absolute;
  top: calc(50% - 140px);
  left: calc(50% - 150px);
}
.coffee-header {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ddcfcc;
  border-radius: 10px;
}
.coffee-header__buttons {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 25px;
  background-color: #282323;
  border-radius: 50%;
}
.coffee-header__buttons::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 4px);
  background-color: #615e5e;
}
.coffee-header__button-one {
  left: 15px;
}
.coffee-header__button-two {
  left: 50px;
}
.coffee-header__display {
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  border-radius: 50%;
  background-color: #9acfc5;
  border: 5px solid #43beae;
  box-sizing: border-box;
}
.coffee-header__details {
  width: 8px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #9b9091;
  box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
}
.coffee-medium {
  width: 90%;
  height: 160px;
  position: absolute;
  top: 80px;
  left: calc(50% - 45%);
  background-color: #bcb0af;
}
.coffee-medium:before {
  content: "";
  width: 90%;
  height: 100px;
  background-color: #776f6e;
  position: absolute;
  bottom: 0;
  left: calc(50% - 45%);
  border-radius: 20px 20px 0 0;
}
.coffe-medium__exit {
  width: 60px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 30px);
  background-color: #231f20;
}
.coffe-medium__exit::before {
  content: "";
  width: 50px;
  height: 20px;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
  background-color: #231f20;
}
.coffe-medium__exit::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 5px);
  background-color: #231f20;
}
.coffee-medium__arm {
  width: 70px;
  height: 20px;
  position: absolute;
  top: 15px;
  right: 25px;
  background-color: #231f20;
}
.coffee-medium__arm::before {
  content: "";
  width: 15px;
  height: 5px;
  position: absolute;
  top: 7px;
  left: -15px;
  background-color: #9e9495;
}
.coffee-medium__cup {
  width: 80px;
  height: 47px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  background-color: #FFF;
  border-radius: 0 0 70px 70px / 0 0 110px 110px;
}
.coffee-medium__cup::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  right: -13px;
  border: 5px solid #FFF;
  border-radius: 50%;
}
@keyframes liquid {
  0% {
    height: 0px; 
    opacity: 1;
  }
  5% {
    height: 0px; 
    opacity: 1;
  }
  20% {
    height: 62px; 
    opacity: 1;
  }
  95% {
    height: 62px;
    opacity: 1;
  }
  100% {
    height: 62px;
    opacity: 0;
  }
}
.coffee-medium__liquid {
  width: 6px;
  height: 63px;
  opacity: 0;
  position: absolute;
  top: 50px;
  left: calc(50% - 3px);
  background-color: #74372b;
  animation: liquid 4s 4s linear infinite;
}
.coffee-medium__smoke {
  width: 8px;
  height: 20px;
  position: absolute; 
  border-radius: 5px;
  background-color: #b3aeae;
}
@keyframes smokeOne {
  0% {
    bottom: 20px;
    opacity: 0;
  }
  40% {
    bottom: 50px;
    opacity: .5;
  }
  80% {
    bottom: 80px;
    opacity: .3;
  }
  100% {
    bottom: 80px;
    opacity: 0;
  }
}
@keyframes smokeTwo {
  0% {
    bottom: 40px;
    opacity: 0;
  }
  40% {
    bottom: 70px;
    opacity: .5;
  }
  80% {
    bottom: 80px;
    opacity: .3;
  }
  100% {
    bottom: 80px;
    opacity: 0;
  }
}
.coffee-medium__smoke-one {
  opacity: 0;
  bottom: 50px;
  left: 102px;
  animation: smokeOne 3s 4s linear infinite;
}
.coffee-medium__smoke-two {
  opacity: 0;
  bottom: 70px;
  left: 118px;
  animation: smokeTwo 3s 5s linear infinite;
}
.coffee-medium__smoke-three {
  opacity: 0;
  bottom: 65px;
  right: 118px;
  animation: smokeTwo 3s 6s linear infinite;
}
.coffee-medium__smoke-for {
  opacity: 0;
  bottom: 50px;
  right: 102px;
  animation: smokeOne 3s 5s linear infinite;
}
.coffee-footer {
  width: 95%;
  height: 15px;
  position: absolute;
  bottom: 25px;
  left: calc(50% - 47.5%);
  background-color: #41bdad;
  border-radius: 10px;
}
.coffee-footer::after {
  content: "";
  width: 106%;
  height: 26px;
  position: absolute;
  bottom: -25px;
  left: -8px;
  background-color: #000;
}

 
</style>

<div class="container">
    <div class="coffee-header">
      <div class="coffee-header__buttons coffee-header__button-one"></div>
      <div class="coffee-header__buttons coffee-header__button-two"></div>
      <div class="coffee-header__display"></div>
      <div class="coffee-header__details"></div>
    </div>
    <div class="coffee-medium">
      <div class="coffe-medium__exit"></div>
      <div class="coffee-medium__arm"></div>
      <div class="coffee-medium__liquid"></div>
      <div class="coffee-medium__smoke coffee-medium__smoke-one"></div>
      <div class="coffee-medium__smoke coffee-medium__smoke-two"></div>
      <div class="coffee-medium__smoke coffee-medium__smoke-three"></div>
      <div class="coffee-medium__smoke coffee-medium__smoke-for"></div>
      <div class="coffee-medium__cup"></div>
    </div>
    <div class="coffee-footer"></div>
  </div>

Ensuite appeler cette page en mettant ce code par exemple dans votre page d'accueil - Généralités.

Code:

<iframe style="width:350px;border:none;height: 280px;" src="url du lien de votre page html"></iframe>
Remplacer url du lien de votre page html en le copiant dans la liste de vos pages html.
ça se présente sous cette forme:
https://adresse de votre forum/hxx-titre de votre page html

Normalement vous devriez avoir la tasse de café en haut de votre page d'accueil.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1333
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les animations

Message par Laférosse Mer 20 Sep 2023, 04:09

Bonjour photoclic. Oh ! Génial ! Merci beaucoup pour les explications et l'adaptation du code. La cafetière est opérationnelle. Wink
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum