Just a "circle" ... 004

In this example below you will see how to do a Just a "circle" ... 004 with some HTML / CSS and Javascript

Animation per scrolling ...Greensock

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Just a "circle"  ...  004</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  

  <div class="shapeWrapper"> 
  <h1>01100011 01101001 01110010 01100011 01101100 01100101</h1>
  </div>

  
  <p>... just a circle.</p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/just-a-andquotcircleandquot-004-yvByqP */
body{
  margin: 0;
  overflow:hidden;
}
h1{
  position: relative;
  top: 50%;
  left:50%;
  font-family: 'Lato Sans', sans-serif;
  font-size: 30px;
  line-height: 0;
  width: max-content;
  color: white;
  
  margin: 0;
}
p{
  position: relative;
  top: 30%;
  font-family: 'Lato Sans', sans-serif;
  font-size: 14px;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  visibility:hidden;
}
.shapeWrapper {
  position:absolute;
  top:30px;
  left:50%;
  top:50%;
  height: .1vh;
  width: .1vh;
  border-radius: 50%;
  background:green;
  overflow:hidden;
  visibility:hidden;
}


/*Downloaded from https://www.codeseek.co/mikeK/just-a-andquotcircleandquot-004-yvByqP */
TweenMax.set(".shapeWrapper, h1",{autoAlpha:1, xPercent:-50,yPercent:-50})
TweenLite.defaultEase = Power0.easeNone;

var blowupCircle = new TimelineMax({repeat:3,yoyo:true, repeatDelay:1})
.to(".shapeWrapper",4,{height:"150vw", width:"150vw", z:0.1, force3D:"auto"},1)
.to(".shapeWrapper",0.1,{height:"90vh", width:"90vw", borderRadius:'0%',z:0.1, force3D:"auto"})

Comments