LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Click anywhere on screen

CSS
body {
  background: #00d2ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #928DAB, #00d2ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #928DAB, #00d2ff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow:hidden;
}

.circle {
  height: 100px;
  width: 100px;
  background-color: white;
  position: absolute;
  border-radius: 50%;
  animation: scaleCircle 1s linear;
  animation-fill-mode: forwards;
}

.text {
  font-family: 'Varela Round', sans-serif;
  font-size: 20px;
  vertical-align: middle;
  color: white;
  position: relative;
  top: 50%;
  margin: 0 auto;
}

.content {
  height: 100%;
  width: 100%;
  position: absolute;
  text-align: center;
}

@keyframes scaleCircle {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(150);
    opacity: 0;
  }
}
JS
var posX;
var posY;
var clickNum = 0;
var textArray = ["Cool, huh?", "The center of the circle will be wherever you click!", "Lorem ipsum dolor sit amet", "consectetur adipiscing elit", "sed do eiusmod tempor incididunt", "The end"]
$(".content").mousemove(function(e) {
  posX = e.pageX - 50;
  posY = e.pageY - 50;
});

var currCircle = null;
$(".content").click(function() {
  currCircle = $(".content").append(
    "
" ); setTimeout(function() { $(".text").html(textArray[clickNum]); clickNum += 1; }, 100); setTimeout(function() { $("div").remove(currCircle); }, 1000); });
Term
Mon, 11/27/2017 - 21:26

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv