Press "Enter" to skip to content

Realistic Flip Clock in JavaScript (jQuery) and CSS Animations

FlipClock is an animated realistic flip watch that displays the current time in retro style. Written with JavaScript (jQuery) and CSS animations.

Realistic Flip Clock, jquery page flip effect free download, flip timer jquery plugin, flip book jquery free download, jquery flip effect on hover

How to make use of it:

1. Build the HTML for the flip clock.

<div class="clock">
  <div class="flipper">
    <div class="gear"></div>
    <div class="gear"></div>
    <div class="top">
      <div class="text">00</div>
    </div>
    <div class="bottom">
      <div class="text">00</div>
    </div>
  </div>
  <div class="flipper">
    <div class="gear"></div>
    <div class="gear"></div>
    <div class="top">
      <div class="text">00</div>
    </div>
    <div class="bottom">
      <div class="text">00</div>
    </div>
  </div>
  <div class="flipper">
    <div class="gear"></div>
    <div class="gear"></div>
    <div class="top">
      <div class="text">00</div>
    </div>
    <div class="bottom">
      <div class="text">00</div>
    </div>
  </div>
</div>

2. The essential CSS types for the flip clock.

.clock {
  padding: 0 12px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 12px;
  min-width: 200px;
  height: var(--clockheight);
  border-radius: var(--radius);
  background-image: linear-gradient(
    rgb(14, 14, 15) 0%,
    rgb(26, 25, 28) 20%,
    rgb(44, 44, 52) 50%,
    rgb(20, 20, 27) 100%
  );
  box-shadow: inset 0 -3px 6px 3px rgba(0, 0, 0, 0.2),
    inset 0 4px 8px 3px rgba(0, 0, 0, 0.4),
    0 2px 3px 1px rgba(255, 255, 255, 0.3), 0 -2px 4px 4px rgba(56, 56, 61, 0.5);
}

.flipper {
  position: relative;
  width: 100%;
  min-width: 150px;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1600px;
}

.gear {
  position: absolute;
  top: calc(var(--clockheight) / 3);
  width: 12px;
  height: calc(var(--clockheight) / 3);
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #666666 17%,
    #7f7f7f 52%,
    #7f7f7f 52%,
    #0c0c0c 53%,
    #595959 87%,
    #131313 100%
  );
  outline: 3px solid #000;
  z-index: 99;
  transform-style: preserve-3d;
  transform: translateZ(10px);
  perspective: 0;
}

.gear:nth-child(2) {
  left: calc(100% - 12px);
}

.top,
.bottom {
  box-shadow: 0 6px 6px 1px rgba(0, 0, 0, 0.5),
    0 2px 2px 1px rgba(255, 255, 255, 0.15);
  border-top: 2px solid rgb(102, 103, 110);
  border-bottom: 2px solid #000;
}

.top {
  position: relative;
  width: 100%;
  height: calc(50% - 15px);
  background-image: linear-gradient(rgb(48, 49, 53) 0%, rgb(56, 57, 62) 100%);
  margin-top: 10px;
  margin-bottom: 5px;
  border-top-left-radius: calc(var(--radius) * 0.65);
  border-top-right-radius: calc(var(--radius) * 0.65);
}

.bottom {
  position: relative;
  width: 100%;
  height: calc(50% - 15px);
  background-image: linear-gradient(rgb(57, 58, 63) 0%, rgb(65, 65, 71) 100%);
  margin-top: 5px;
  margin-bottom: 10px;
  border-bottom-left-radius: calc(var(--radius) * 0.65);
  border-bottom-right-radius: calc(var(--radius) * 0.65);
}

.text {
  font-size: 140px;
  display: block;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  line-height: 193px;
  text-align: center;
}

.bottom .text {
  line-height: 0;
}

.top.new,
.bottom.new {
  position: absolute;
  left: 0;
  z-index: 12;
}

.top.new {
  top: 0;
  z-index: 1;
}

.top.new .text {
  backface-visibility: hidden;
}

.bottom.new {
  position: absolute;
  top: 0;
  height: calc(100% - 0px);
  transform: rotateX(0.5turn);
  z-index: 1;
  opacity: 0;
}

.flipper.flipping .top.new {
  transform-origin: bottom center;
  animation: rotate var(--rotationtime) 1 ease-in-out forwards;
}

.flipper.flipping .bottom.new {
  animation: rotatebottom var(--rotationtime) 1 ease-in-out forwards;
}

@keyframes rotatebottom {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0) translateY(0px);
  }
  100% {
    transform: rotateX(-180deg) translateY(-10px);
  }
}

3. Load the wanted jQuery JavaScript library on the finish of the doc.

<script src="/path/to/cdn/jquery.min.js"></script>

4. The major JavaScript to allow the flip clock.

var myhour, myminute, mysecond;

function flipNumber(el, newnumber) {
  var thistop = el.find(".top").clone();
  var thisbottom = el.find(".bottom").clone();
  thistop.addClass("new");
  thisbottom.addClass("new");
  thisbottom.find(".text").text(newnumber);
  el.find(".top").after(thistop);
  el.find(".top.new").append(thisbottom);
  el.addClass("flipping");
  el.find(".top:not(.new)").find(".text").text(newnumber);
  setTimeout(function () {
    el.find(".bottom:not(.new)").find(".text").text(newnumber);
  }, 500);
}
function setTime() {
  $(".flipper").removeClass("flipping");
  $(".flipper .new").remove();
  var date = new Date();
  var seconds = date.getSeconds().toString();
  if (seconds.length == 1) {
    seconds = "0" + seconds;
  }
  var minutes = date.getMinutes().toString();
  if (minutes.length == 1) {
    minutes = "0" + minutes;
  }
  var hour = date.getHours();
  if (hour > 12) {
    hour = hour - 12;
  }
  if (hour == 0) {
    hour = 12;
  }
  hour = hour.toString();
  if (hour.length == 1) {
    hour = "0" + hour;
  }
  if ($(myhour[0]).text() !== hour) {
    flipNumber($(myhour[0]).closest(".flipper"), hour);
  }
  if ($(myminute[0]).text() !== minutes) {
    flipNumber($(myminute[0]).closest(".flipper"), minutes);
  }
  if ($(mysecond[0]).text() !== seconds) {
    flipNumber($(mysecond[0]).closest(".flipper"), seconds);
  }
  setTimeout(function () {
    setTime();
  }, 500);
}

$(function () {
  myhour = $(".clock .flipper:nth-child(1) div:not(.new) .text");
  myminute = $(".clock .flipper:nth-child(2) div:not(.new) .text");
  mysecond = $(".clock .flipper:nth-child(3) div:not(.new) .text");
  setTime();
});

responsive flipbook jquery free download, jquery auto flip effect, flip carousel jquery, jquery flip image automatically


See Demo And Download

Official Website(gametroll): Click Here

This superior jQuery/javascript plugin is developed by gametroll. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *