Notify change

by Snj

HTML

<header>
  <div id="header_info" class="header--page-info my-font">
    <p id="header_pagenr" class="info__pagenr">Current-page: [&nbsp;</p>
    <p class="ip_curr"></p><p class="info__pagenr">&nbsp;/&nbsp;</p><p class="ip_end"></p><p>&nbsp;]</p>
  </div>
  <br><br>
  <button id="cheButt"  onclick="chebutt()" class="cheButt">Run/Check</button>
</header>

CSS

/* Blink for Webkit and others
(Chrome, Safari, Firefox, IE, ...)
*/
:root { --size: 260px; }
*, * ::before, * ::after { box-sizing: border-box; }

body {
  transition: padding-top .5s ease;
  background-color: #ecf0f1;
  overflow: hide; }

@-webkit-keyframes notiflash {
  from { filter: brightness(1);
         text-shadow: rgba(160, 107, 65, 0.63) -4px 4px 14px; }
  to { filter: brightness(2);
       text-shadow: rgb(168, 166, 125) -4px 4px 14px; }
}.notiflash {
  animation-name: notiflash;
  animation-duration: 1.0s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: reverse; }

header {
  width: calc(100% - 1.4rem);
  height: 150px;
  z-index: 5;
  position: relative;
  position: fixed;
  top: 0;
  background: rgba(32, 32, 32, 0.89);
  box-shadow: rgba(80, 60, 59, 0.48) 0px 6px 20px 2px;
  text-align: center;
  overflow: hidden;
  transition: all .3s ease-in; }
  header p {
    /* padding-left: 2em; */
    text-shadow: rgba(160, 107, 65, 0.63) -4px 4px 14px;
    margin: 1em 0em 0em 0em;
    }

  header .header--page-info {
    display: inline-flex;
    margin: 0em;
    padding: 0em 1em 1em 1em;
    background-color: #111111a6;
    transition: all .3s ease-in; }

    header .header--page-info .info__pagenr {
      /* flex: 4 0 auto; */
      width: auto;
      color: #a29b9b;
      transform: scaleX(1);
      transform-origin: left;
      transition: all .3s ease-in; }
.ip_curr {
      color: #c0c0c0; }
.ip_end  {
      color: #c0c0c0; }

.my-font {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 23px;
  color: rgb(189, 183, 171);
  text-shadow: rgba(51, 40, 39, 0.64) -4px 4px 11px, rgba(94, 47, 55, 0.71) -1px 3px 15px;
  letter-spacing: 0.4px;
  word-spacing: 5.2px;
  color: #888888;
  font-weight: 550;
  font-style: inherit;
  font-variant: normal;
  text-transform: capitalize;
  text-decoration: none;
  transition: 0.3s; }

JavaScript

var current_page = 1;
var end_page = 6;

(function() {
  var ip_curr = document.querySelector("p.ip_curr");
  var ip_end = document.querySelector("p.ip_end");
  ip_curr.textContent = current_page.toString();
  ip_end.textContent = end_page.toString();
})();

function chebutt() {
  current_page++;
  var ip_curr = document.querySelector("p.ip_curr");
  ip_curr.textContent = current_page;
  ip_curr.classList.remove("notiflash");
  void ip_curr.offsetWidth;
  ip_curr.classList.add("notiflash"); }