Animation goutte d'eau

[dsigmoun]

Bonjour à tous,

Ce soir, j’essaie un nouveau défit pour moi qui ne maîtrise pas le code

J’aimerai une animation d’une goutte d’eau qui tombe à chaque changement de valeur du compteur d’eau. J’essaie de réponduire ce css mais j’en suis loin… https://codepen.io/abehjat/pen/oXMENv

J’arrive à un semblant de goutte qui tombe sans effet wave

Si quelqu’un peut m’aider, un grand merci !

Voici où j’en suis :

<!-- HTML -->
<div class="water-drop-widget">
  <div class="drop" id="waterDrop"></div>
  <div class="wave" id="waterWave"></div>
</div>

<!-- CSS -->
<style>
  .water-drop-widget {
    position: relative;
    width: 20px;
    height: 50px;
  }

  .drop {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 50%;
    margin-left: -10px;
    background: #FFF;
    border-radius: 10px;
    opacity: 0;
    transition: top 0.5s ease;
  }

  .drop.active {
    top: 190px;
    opacity: 1;
  }

  .drop:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 30px solid rgba(255, 255, 255, 1);
    top: -22px;
  }

  .wave {
    position: absolute;
    top: 190px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 1px;
    border: #FFF 7px solid;
    border-radius: 300px / 150px;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .wave.active {
    opacity: 1;
  }
</style>

<!-- JavaScript (jQuery) -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  $(document).ready(function () {
    jeedom.cmd.update['#id#'] = function (value) {
      $('#waterDrop').addClass('active');
      $('#waterWave').addClass('active');

      setTimeout(function () {
        $('#waterDrop').removeClass('active');
        $('#waterWave').removeClass('active');
      }, 3000);
    };
  });
</script>

Frédéric

[Salvialf]

Salut,

Testé rapidement pour le fun, je pense pouvoir fournir le code d’un widget complet en début d’aprem si j’ai le temps de finir ce midi :

[Salvialf]

Y’a tout un tas de points qui pourraient être améliorés mais à être trop perfectionniste y’a de quoi y passer la journée…

Voici le rendu final, la goutte d’eau est fixe par défaut et coule pendant 5 secondes sur changement de valeur :

Etant donné qu’il s’agit des valeurs d’un compteur d’eau, je suis parti sur un widget info/numeric :

<div class="cmd cmd-widget" data-type="info" data-subtype="numeric" data-template="waterDrop" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div class="content" style="height:80px;overflow:hidden;">
    <div>
  	  <div class="drop"></div>
  	  <div class="wave"></div>
    </div>
  </div>
<script>
  jeedom.cmd.addUpdateFunction('#id#', function(_options) {
    if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
      cmd.querySelector('.drop').classList.add('animate')
      cmd.querySelector('.wave').classList.add('animate')
      clearTimeout(window['timerHandle#uid#'])
      window['timerHandle#uid#'] = setTimeout(function () {
        cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]')
        cmd.querySelector('.drop').classList.remove('animate')
        cmd.querySelector('.wave').classList.remove('animate')
      }, 5200);
    }
  })
</script>
<style>
.drop {
  position: relative;
  width: 10px;
  height: 10px;
  top: -22px;
  margin: auto;
  background: #3498DB;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.drop:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 15px solid #3498DB;
  top: -11px;
  left: 0;
}

.drop.animate {
  -moz-animation-name: drip;
  -webkit-animation-name: drip;
  animation-name: drip;
  -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
  -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
  animation-timing-function: cubic-bezier(1,0,.91,.19);
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.wave {
  position: relative;
  margin: auto;
  top: 10px;
  opacity: 0;
  width: 3px;
  height: 1px;
  border: #3498DB 3px solid;
  -moz-border-radius: 30px / 15px;
  -webkit-border-radius: 30px / 15px;
  border-radius: 30px / 15px;
}
  
.wave.animate {
  -moz-animation-name: ripple;
  -webkit-animation-name: ripple;
  animation-name: ripple;
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    width: 60px;
    height: 30px;
    border-width: 1px;
    opacity: 0;
  }
}
    
@keyframes drip {
  from {
    opacity: 0;
  }
  to {
    top: 40px;
    opacity: 1;
  }
}
</style>
</div>

[dsigmoun]

Super. Merci @Salvialf !

J’ai juste ajouté un background:transparent; pour que ce soit parfait pour moi