Fluttering Ladybugs

In this example below you will see how to do a Fluttering Ladybugs with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Fluttering Ladybugs</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="ladybug">
  <div class="antennae antennae1"></div>
  <div class="antennae antennae2"></div>
  <div class="head"></div>
  <div class="body"></div>
  <div class="wing wing-left">
    <div class="dot dot1"></div>
    <div class="dot dot2"></div>
    <div class="dot dot3"></div>  
  </div>
  <div class="wing wing-right">
    <div class="dot dot4"></div>
    <div class="dot dot5"></div>
    <div class="dot dot6"></div>  
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/leahwhittaker/fluttering-ladybugs-PqyRjO */
body {
  background-color: #fdfdee;
}

div {
  position: absolute;
}

.head {
  background-color: #2F2A24;
  width: 15px;
  height: 15px;
  left:18px;
  top: 2px;
  border-radius:12px;
}

.antennae {
  background-color: #2F2A24;
  width: 2px;
  height: 10px;
  top: -1px;
  border-radius: 2px;
}

.antennae1 {
  left: 21px;
}

.antennae2 {
  left: 28px;
}

.body {
  background-color: #2F2A24;
  width: 27px;
  height: 26px;
  left:12px;
  top: 12px;
  border-radius:12px;
}

.wing {
  background-color: #F03E33;
  width: 18px;
  height: 30px;
  top: 7px;
  left: 8px;
  overflow: hidden;
}
  .wing-left {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  -ms-transform: rotate(5deg); /* IE 9 */
  -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
  transform: rotate(5deg);
}

.wing-right {
  left: 25px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
  transform: rotate(-5deg);
}

.dot {
  background-color: #2F2A24;
  width:7px;
  height:7px;
  border-radius: 5px;
}

.dot1 {
  left: 10px;
  top: 10px;
}

.dot2 {
  left: 1px;
  top: 20px;
}

.dot3 {
  left: 2px;
  top: 0px;
}

.dot4 {
  left: 8px;
  top: 0px;
}

.dot5 {
  left: 2px;
  top: 10px;
}

.dot6 {
  left: 12px;
  top: 16px;
}

/*Downloaded from https://www.codeseek.co/leahwhittaker/fluttering-ladybugs-PqyRjO */
var ladybug = document.getElementById("ladybug");
ladybug.style.visibility = "hidden";

var horizontalSpacing = 110;
var verticalSpacing = 60;
var rows = Math.ceil(window.innerHeight/verticalSpacing);
var columns = Math.ceil(window.innerWidth/horizontalSpacing);
var bugs = [];
for (var i = 0; i < rows; i++) {
  for (var j = 0; j < columns; j++) {
    var bug = ladybug.cloneNode(true);
    bug.id = "";
    if (Math.random() < 0.33) {
      bug.getElementsByClassName("wing-left")[0].style.backgroundColor = bug.getElementsByClassName("wing-right")[0].style.backgroundColor = "#c03128";
    }
    if (Math.random() > 0.66) {
      bug.getElementsByClassName("wing-left")[0].style.backgroundColor = bug.getElementsByClassName("wing-right")[0].style.backgroundColor = "#f3645b";
    }
    document.body.appendChild(bug);
    bug.style.left = horizontalSpacing * j + "px";
    if ((i % 2) != 0) {
      bug.style.left = parseFloat(bug.style.left) + horizontalSpacing/2 + "px";
    }
    bug.style.top = verticalSpacing * i + "px";
    bug.style.visibility = "visible";
    bugs.push(bug);
  }
}

function flutter() {
  var randomBugIndex =  Math.floor(Math.random()*bugs.length);
  var animLength = 0.4;
  
  var leftWing = bugs[randomBugIndex].getElementsByClassName("wing-left")[0];
  TweenMax.to(leftWing, animLength, {transform: "rotate(15deg)", transformOrigin:"100% 0%", ease:Bounce.easeIn});
  TweenMax.to(leftWing, animLength, {transform: "rotate(2deg)", transformOrigin:"100% 0%", ease:Sine.easeOut, delay:animLength});
  
    var rightWing = bugs[randomBugIndex].getElementsByClassName("wing-right")[0];
  TweenMax.to(rightWing, animLength, {transform: "rotate(-15deg)", transformOrigin:"0% 0%", ease:Bounce.easeIn});
  TweenMax.to(rightWing, animLength, {transform: "rotate(-2deg)", transformOrigin:"0% 0%", ease:Sine.easeOut, delay:animLength});
  
  TweenMax.delayedCall(Math.random()*1.5, flutter);
}

flutter();

Comments