My first pen

In this example below you will see how to do a My first pen with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>My first pen</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="container">
  <svg viewBox="0 0 600 600">
    <line x1=200 x2=400 y1=300 y2=300 />
    <circle id="drop" cx="300" cy="0" r="50"/>
    <text x=40 y=355>That's all I'm able to do so far</text>
  </svg>
</div>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/uuuulala/my-first-pen-rWvoYX */
html, body {
  background-color: #fff;
  font-family: 'Roboto';
  font-size: 28px;
}

svg {
  position: fixed;
  width: 50%;
  min-width: 250px;
  max-width: 500px;
  height: auto;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -60%);
  -moz-transform: translate(-50%, -60%);
  -webkit-transform: translate(-50%, -60%);
  -o-transform: translate(-50%, -60%);
  -ms-transform: translate(-50%, -60%);
}
#drop { 
  fill: #f55;
}
line { 
  stroke: black; 
  stroke-width: 2; 
}
text { 
  fill: black; 
}

/*Downloaded from https://www.codeseek.co/uuuulala/my-first-pen-rWvoYX */
/* external js
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js
*/
var drop = document.getElementById('drop');
tl = new TimelineMax( { repeat: -1 } );
tl.set(drop, { y: -50, opacity: 1 })
  .to(drop, 1.2, { y: 249, ease: Bounce.easeOut }, '+=0.65')
  .to(drop, 1.2, { opacity: 0 }, '+=1.5')

Comments