DevAnswer - Developers Answer

Animating Message Box

12th September

Preview


Source Code
                            
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.devanswer.com -->
<style>
body {
  background: #444;
}

.show-me {
  display: block;
}

.open-ot-alert {
  font-family: Helvetica,Arial,sans-serif;
  color: #ccc;
  font-size: 2rem;
  font-weight: bold;
  width: 30rem;
  text-align: left;
  margin: 3rem auto;
  padding: 1rem;
  line-height: 2rem;
  background-color: #805300;
}
.open-ot-alert:hover {
  cursor: pointer;
  background-color: #b37400;
}

.open-ot-alert p {
  color: #444;
}

.more-ot-alert {
  display: none;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 10px;
  background-color: #eee;
  border: 2px solid #9e9e9e;
  height: 4.2rem;
  width: 12rem;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: move .4s ease 3;
          animation: move .4s ease 3;
  position: absolute;
  top: 38px;
  left: 50%;
  z-index: 55;
}
.more-ot-alert p {
  font: 16px Arial;
  line-height: 18px;
  line-height: 1.2rem;
  margin-top: 0;
}

.more-ot-alert:before {
  content: "";
  position: absolute;
  top: 24px;
  left: -15px;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #9e9e9e;
  display: block;
  width: 0;
  z-index: 1;
}

.more-ot-alert:after {
  content: "";
  position: absolute;
  top: 27px;
  left: -12px;
  border-style: solid;
  border-width: 12px 12px 12px 0;
  border-color: transparent #eee;
  display: block;
  width: 0;
  z-index: 1;
}

.more-ot-alert .close-ot-alert {
  font-size: 15px;
  font-size: 1rem;
  clear: both;
  cursor: pointer;
  float: right;
  margin: -5px -3px 0 0;
}

.more-ot-alert .close-ot-alert i {
  color: #999;
}

.more-ot-alert .close-ot-alert i:hover {
  color: #cc0000;
}

@-webkit-keyframes move {
  50% {
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
  }
}

@keyframes move {
  50% {
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
  }
}
</style>

</head>
<body>
<div class="open-ot-alert">Click to View</div>
<div class="more-ot-alert">
<span class="close-ot-alert">
<i class="fa fa-close"></i>
</span>
<p>There is more OT in the upcoming weeks.
Scan your calendar to see it.</p>
</div>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.devanswer.com">Developer Code</a></div>
<script>
function closeAlert() {
  setTimeout(function () {
    $(".more-ot-alert").fadeOut("fast");
  }, 100);
}
function openAlert() {
  $(".more-ot-alert").fadeIn("fast");
  // IE8 animation polyfill
  if ($("html").hasClass("lt-ie9")) {
    var speed = 300;
    var times = 3;
    var loop = setInterval(anim, 300);
    function anim() {
      times--;
      if (times === 0) {clearInterval(loop);}
      $(".more-ot-alert").animate({ left: 450 }, speed).animate({ left: 440 }, speed);
      //.stop( true, true ).fadeIn();
    };
    anim();
  };
}
$(".close-ot-alert").on("click", function () {
  closeAlert();
});

$(".open-ot-alert").on("click", function () {
  openAlert();
});

$(document).keydown(function (e) {
  if (e.keyCode == 27) {closeAlert();}
  if (e.keyCode == 67) {openAlert();} // C is for click?
});
</script>

</body>
</html>                        



Other Codes