Attention seeker

AnimateCSS library to give some attention to specific elements. AnimateCSS does not require JS to work. We use it for demo purposes.

by George Y

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-5">
      <b>Δόσεις με πιστωτική</b>
    </div>
    <div class="col">
      <span class="blue-60 bold">€18,17</span>
      / μήνα

    </div>
    <div class="col-4 right">
      6 άτοκες δόσεις <b>+</b>
    </div>
  </div>
  <div class="row  ">
    <div class="col-7 disabled">
      Δόσεις με χρεωστική
    </div>

    <div class="col-5 right learn-more pulse-animate">
      <span class="blue-60 bold ">Μάθε περισσότερα</span> <b>+</b>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-5">
      <button id="pulseme" class="button-play">
        Pulse
      </button>
      <button id="shakeme" class="button-play-b">
        ShakeX
      </button>
    </div>
  </div>
</div>

SCSS

body {
  background-color: #c6c6c6;
  font-size: 12px;
}

.container {
  width: 380px;
  margin-top: 56px;
  border-radius: 4px;
  background: #FFFFFF;

  .row {
    &:first-of-type {
      border-bottom: 1px solid #c6c6c6;
    }
  }

  div[class*='col'] {
    padding: 6px;
  }

  .blue-60 {
    color: #3894F8;
  }
  
  .bold { 
    font-weight: bold;
  }
  
  .disabled {
    color: #999999;
  }
  
  .right {
    text-align: right;
  }
  
  .pulse-animate {
     animation: pulse; /* referring directly to the animation's @keyframe declaration */
     animation-duration: 1s; /* don't forget to set a duration! */

  }
  .shakeX-animate {
    animation: shakeX;
    animation-duration: 1s;
  }
}

JavaScript

window.onload = () => {

  const element = document.querySelector('.learn-more');
  const pulseBtn = document.getElementById('pulseme');
  const shakeXBtn = document.getElementById('shakeme');

  shakeXBtn.addEventListener('click', () => {

    removeClass(element, 'pulse-animate')

    addClass(element, 'shakeX-animate');
    setTimeout(() => {
      removeClass(element, 'shakeX-animate')
    }, 1000)


  });

  pulseBtn.addEventListener('click', () => {

    removeClass(element, 'pulse-animate')

    addClass(element, 'pulse-animate');
    setTimeout(() => {
      removeClass(element, 'pulse-animate')
    }, 1000)


  });


  function addClass(el, className) {
    el.className += ` ${className}`;
  }

  function removeClass(el, className) {
    el.className = el.className.replace(className, '');
  }
}