A Pen by A2

Thumbnail
This awesome code was written by a_tinker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright a_tinker ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  A2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  
  <div id = 'btn'>
    <div id = 'bd'></div>
  </div>
  
  <p id = 'instructions'>mouse over <br /> for a swirling view <br /> -then click!</p>
  
  
  
  
  
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-yYVMjV */
#btn {
  width: 20%;
  height: 300px;
  background-color: white;
  margin-top: 5%;
  margin-left: 5%;
  border-radius: 30px;
}

#bd {
  background-color: rgba(0, 128, 128, 0.3);
  box-shadow: 1px 1px 1px rgba(180, 180, 180, 0.9);
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background-position: left top;
}

div:hover #bd {
  margin-left: 85%;
  background-image: url("http://www.peggiesplace.com/Ocean1.jpg");
  background-position: center center;
  -webkit-transform: rotate(360deg);
  -webkit-transition: all 2.2s ease;
}

#instructions {
  color: #333;
  font-size: 20px;
  margin-top: -10%;
  margin-left: 5%;
}


/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-yYVMjV */
function kewl_klick(){
  
  $('#bd').mousedown(function(){
    $('#bd').css('border-radius', '0px');
    $('#bd').css('width', '300px');
    $('#bd').css('height', '300px');
    $('#bd').css('transition', 'all 1s ease');
  });
  

  }
 
  $('#bd').mouseup(function(){
    $('#bd').css('border-radius', '100px');
    $('#bd').css('width', '100px');
    $('#bd').css('height', '100px');
    
  });
 


kewl_klick();

Comments