Categories
CSS Web development

CSS Scarecrow

Autumn harvest is coming, and with it Scarecrows 🙂
Let’s create one with CSS!

scarecrow
Do you like this image? Check more images in the store.

CSS code opened in the Safari browser:

CSS Scarecrow
*to see the live output of the CSS code click here.

To create the Scarecrow above you need to add the first an HTML, and then style the HTML with CSS.

Step1.

Add HTML

<div id="circle">
<div class="content">
  <div class="clouds">
  <div class="cloud"></div>
  <div class="cloud1"></div>
  <div class="cloud2"></div>
  <div class="cloud3"></div>
  </div>
  <div class="grass"></div>
  <div class="scarecrow">
    <div class="head"></div>
    <div class="hat"></div>
    <div class="eyes"></div>
    <div class="smile"></div>
    <div class="jumper"></div>
    <div class="patch"></div>
    <div class="stick"></div>
    <div class="straw"></div> 
  </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background, and the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
  background-color: #654236;
}
#circle {
  positon: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #db995a;
  box-shadow: 10px 5px 1px rgba(0,0,0,0.07);
}

Add clouds to the background:

.content {
  position: relative;
}

.clouds {
  position: absolute;
  top:-10px;
}

.cloud {
  position: absolute; 
  background-color: #f4ae4a;
  width: 120px;
  height: 30px;
  border-radius: 100px;
  left: 270px;
  top: 80px;
}
.cloud:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 30px;
  border-radius: 100px;
  top:30px;
  background-color: #f4ae4a;
  left: 40px; 
}

.cloud:after {
  content:"";
  background-color: #db995a;
  position:absolute;
  border-radius:100px;
  width:50px;
  height:30px;
  top:30px;
  left:20px;
}

.cloud1 {
  position: absolute;
  height:30px;
  width:160px;
  background-color: #f4ae4a;
  top:140px;
  left:250px;
  border-radius:100px;
}

.cloud1:after {
  content:"";
  position: absolute; 
  background-color: #db995a;
  height:30px;
  width:50px;
  border-radius:100px;
  top:30px;
  left:25px;
}

.cloud1:before {
  content:"";
  position: absolute;
  background-color: #f4ae4a;
  width: 80px;
  height: 30px;
  border-radius:100px;
  top:30px;
  left:50px;
}

.cloud2 {
  position: absolute;
  background-color: #db995a;
  width: 50px;
  height:30px;
  border-radius:100px;
  top:170px;
  left:350px;
  
}

.cloud2:after {
  position: absolute;
  content:"";
  height:30px;
  width:90px;
  background-color: #f4ae4a;
  top:30px;
  border-radius:100px;
  left:-60px;
  
}

.cloud2:before {
  background-color: #f4ae4a;
  position: absolute;
  content:"";
  width:90px;
  height:30px;
  left:-360px;
  border-radius:100px;
  top:60px;
}

.cloud3 {
  position: absolute; 
  background-color: #f4ae4a;
  width: 60px;
  height: 30px;
  left:-10px;
  top:200px;
  border-radius:100px;
}

.cloud3:after {
  position: absolute;
  content:"";
  background-color: #db995a;
  height: 30px;
  width:50px;
  border-radius:100px;
  left:30px;
  
}

.cloud3:before {
  content:"";
  position:absolute;
  height:30px;
  width:120px;
  background-color: #f4ae4a;
  top:-30px;
  border-radius:100px;
  
}

And the grass:

.grass {
  background-color: #2a3c24;
  width: 400px;
  height:200px;
  border-radius:50%;
  top:250px;
  position:absolute;
  left:0;
}
CSS Autumn
*the output should look like that so far

Style the Scarecrow:

.scarecrow {
  position: absolute;
}

.head {
  position: absolute; 
  background-color: #ff6d00;
  width: 60px;
  height:90px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  z-index:5;
}

.head:before {
  content:"";
  position: absolute;
  background-color: #ff6d00;
  width: 60px;
  height:90px;
  left:50px;
  top:0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: inset -10px 5px 0 rgba(0,0,0,0.07);
  
}

.head:after {
  content:"";
  position: absolute;
  width: 60px;
  height:90px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background-color: #ff8500;
  left:25px;
}

.hat {
  width: 130px;
  height: 60px;
  border-radius:50%;
  position: absolute;
  background-color: #ad5015;
  top:85px;
  left: 135px;
  box-shadow: inset -20px -5px 0 rgba(0,0,0,0.07);
  z-index:10;
}

.hat:before {
  content:"";
  position: absolute;
  border-bottom: 50px solid #ad5015;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 50px;
  top:-30px;
  left:25px;
}

.hat:after {
  content:"";
  position: absolute;
  background-color: #ad5015;
  border-radius:50%;
  width:50px;
  height:15px;
  top:-38px;
  left:40px;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,0.07);
}

.eyes {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid black;
  left:170px;
  top:150px;
  z-index:7;
}

.eyes:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 17px solid transparent;
  border-top: 12px solid black;
  left:20px;
  top:-12px;
  
}

.smile {
  position: absolute;
  background-color: black;
  width: 35px;
  height: 13px;
  border-radius: 0 0 100px 100px;
  left:185px;
  top:170px;
  z-index:7;
}

.smile:before {
  content:"";
  position: absolute; 
  background-color: #ff8500;
  width: 7px;
  height: 9px;
  top:-5px;
  left:7px;
}

.smile:after {
  content:"";
  position: absolute; 
  background-color: #ff8500;
  width: 7px;
  height: 9px;
  left:18px;
  top:8px;
}

.jumper {
  position: absolute;
  background-color: #4059ad;
  width:250px;
  height: 50px;
  z-index:2;
  top: 160px;
  left:75px;
  border-radius: 0 0 30px 30px;
}

.jumper:before {
  content:"";
  position: absolute;
  background-color: #4059ad;
  border-radius: 0 0 30px 0;
  width: 150px;
  height: 140px;
  left:55px;
}

.jumper:after {
  content:"";
  position: absolute;
  background-color: #4059ad;
  width: 30px;
  height:80px;
  border-radius: 0 0 20px 0;
  top:90px;
  left:55px;
    
}

.stick {
  z-index:1;
  width: 15px;
  height: 100px;
  background-color: #57240f;
  position: absolute;
  top:300px;
  left:195px;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
}

.stick:before {
  content:"";
  position: absolute;
  width: 300px;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
  background-color: #57240f;
  height: 15px;
  top:-140px;
  left:-145px;
  border-radius:10px;
}

.stick:after {
  content:"";
  position: absolute; 
  background-color: #deb841;
  width:5px;
  height:45px;
  border-radius: 10px;
  left: 20px;
  top: 60px;
  transform: rotate(20deg);
  
}

.straw {
  position: absolute;
  background-color: #deb841;
  width:5px;
  height: 45px;
  top: 360px;
  border-radius: 10px;
  left: 200px;
  z-index:1;
  
}

.straw:before {
  content:"";
  position: absolute;
  background-color: #deb841;
  width:5px;
  height: 45px;
  border-radius:10px;
  left:-25px;
  transform:rotate(-20deg);
  
}

.straw:after {
  content:"";
  position: absolute;
  background-color: #deb841;
  width:45px;
  top:-190px;
  height: 5px;
  border-radius:10px;
  left:-140px;
  transform: rotate(-30deg);
  
}

.patch {
  position: absolute; 
  width: 30px;
  height: 40px;
  background-color: #d7263d;
  left: 230px;
  top:230px;
  z-index:2;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
  
}

.patch:after {
  content:"";
  position: absolute;
  background-color: black;
  width:2px;
  height: 15px;
  left:5px;
  top:-5px;
  
}

.patch:before {
  content:"";
  position: absolute;
  background-color: black;
  width:2px;
  height: 8px;
  left: 20px;
  top:37px;
  
}

To see the live output of the code above go to lenastanley.com.

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

JavaScript Progress Bar/ Bee Progress Bar

A progress bar can be used to show a user how far along he/she is in a process ( such as a download, file transfer, or installation).

honey bee
Do you like this image? Check more images in the store.

In this tutorial, you’ll learn how to create a simple progress bar using JavaScript, and after that, we’ll add some CSS and jQuery to create an animated progress bar.

I. Simple Progress Bar

To create a Simple Progress Bar you need to:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

<div id="myProgress">
  <div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Click Me</button> 

Step2.

Add CSS

#myProgress {
  width: 100%;
  background-color: #839791;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #896978;
  text-align: center;
  line-height: 30px;
  color: white;
}

Step3.

Add JavaScript

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 0;
    var id = setInterval(frame, 20);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
      }
    }
  }
}

Output:

II. Bee Progress Bar

Now, when you know how the progress bar works we will do step ahead!

*animation opened in the Safari browser.
*to see the live output of the animation click here.

To create the Bee Progress Bar follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript/ jQuery

Step1.

Add HTML

 <div id="progress">
   <div id="text"><h1>Honey Bee</h1></div>
  <div id="bee">
    <div class="head"></div>
    <div class="feeler1"></div>
    <div class="feeler2"></div>
    <div class="eye"></div> 
    <div class="body"></div>
    <div class="leg1"></div>
    <div class="leg2"></div>
    <div class="wing1"></div>
    <div class="wing2"></div>
    <div class="sting"></div>
  </div>
    <div class="background">
    <div class="honey"></div>
    <div class="honey1"></div>
    <div class="honey2"></div>
  </div> 
  <div class="bar" id="bar"></div>
</div>

<button id="button" class="button" onclick="move()">Click Me</button> 

Step2.

Add CSS

Set the background colour and position of elements:

body{
   background-color: #f6ae2d;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

Style the Bee:

#bee {
  position: relative;
  left: 50px;
  top: -100px;
  z-index:100;
}

.head {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute; 
  background-color: #e9c46a;
}

.feeler1 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -12px;
  left: 10px;
}

.feeler1:after {
  position:absolute;
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background-color: black;
  left: 15px;
}

.feeler2 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -16px;
  left: 20px;
}

.feeler2:after {
  position:absolute;
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background-color: black;
  left: 15px;
}

.eye {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  left: 25px;
  top:7px;  
}

.eye:after {
  content:"";
  position: absolute;
  background-color: black;
  border-radius:50%;
  width: 7px;
  height: 7px;
  top:5px;
  left:7px;
}

.body {
  position: absolute;
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background: repeating-linear-gradient(
  to right,
  #000,
  #000 10px,
  #ffdc00 10px,
  #ffdc00 20px);
  z-index:-1;
  left: -75px;
  top:15px;
  
}

.sting {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 15px solid #f0efeb;
  left:-90px;
  top:29px;
  z-index:-2;
}

.leg1 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: 57px;
  left: -3px;
}

.leg1:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left: -53px;
}

.leg2 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: 45px;
  left: 5px;
  z-index:-3;
}

.leg2:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  top:7px;
  left: -68px;
}

.wing1 {
  position: absolute;
  background-color: #a8dadc;
  opacity: 0.7;
  width: 50px;
  height: 80px;
  border-radius: 50%;
  top:-53px;
  left:-48px;
  z-index:-4;
  transform-origin: top bottom;
	animation: fly 0.1s ease infinite;
}

.wing2 {
  position: absolute;
  background-color: #a8dadc;
  opacity: 0.7;
  width: 50px;
  height: 80px;
  border-radius:50%;
  top:-50px;
  left:-62px;
  transform-origin: top bottom;
  animation: fly 0.1s ease infinite;
}

Add animation to spin the wings:

@keyframes fly {
	0% {
		transform:rotate(-20deg);
	}
	50% {
		transform:rotate(-40deg);
	}
}

Style the progress bar and the button:

#progress {
  position: absolute;
  width: 50%;
  background-color: #f26419;
  border-radius:100px;
  border: 3px solid black;
  box-shadow: 5px 5px 2px rgba(0,0,0,0.07); 
  top: 250px;
  left:25%;
}

#progress:after {
  content:"";
  background-image: 
}

#bar {
  width: 1%;
  height: 30px;
  border-radius: 100px;
  background: repeating-linear-gradient(
  to right,
  #000,
  #000 10px,
  #ffdc00 10px,
  #ffdc00 20px   
);
  text-align: center;
  line-height: 30px;
  color: white;
}

.button {
  position: absolute;
  background-color: #fcca46;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius:100px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
  top:300px;
  left:47%;
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Add some decoration:

.background {
  position: absolute;
  left: 93%;
  top:-65px;
  
}

.honey {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      z-index:-10;
    }

.honey:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

.honey1 {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      left: 70px;
      top:-10px;
      z-index:-10;
      transform: rotate(40deg);
    }

.honey1:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

.honey2 {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      left: 60px;
      top:-170px;
      z-index:-10;
      transform: rotate(-30deg);
    }

.honey2:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

Add @keyframes to move the bee:

.moveright {
  animation: moveright 2s forwards;
}

@keyframes moveright {
  0% {left: 50px;}
  100% {left: 1000px;}

}
CSS Honey Bee Animation

Step3.

Add JavaScript/ jQuery

jQuery:

$(function() {
  $('#button').click(function() {
    $('#bee').addClass('moveright');
     setTimeout(function () {
    $("#bee").removeClass('moveright');
}, 4000);
  });
});

and JavaScript:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("bar");  
    var width = 10;
    var id = setInterval(frame, 15);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
        
      }
    }
  }
}

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Categories
CSS Web development

I’ts hot outside! /CSS Ice cream

It’s summer, it’s hot and sunny. I love it! Fancy some ice cream?

Do you like this image? Check more images in the store.
*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="icecream">
    <div class="ice">
      <div class="eyes"></div>
      <div class="smile"></div>
    </div>
    <div class="cone"></div>
    <div class="melt"></div>
    <div class="drip">
      <div class="drip2"></div>
      <div class="drip3"></div>
    </div>
  </div>
 <div class="shadow">
   <div class="top"></div>
   <div class="bottom"></div>
  </div>
</div> 

Step2.

Add CSS

Set the colour and the position of the background, and the container:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F5B7B1; 
}
.container {
  position: relative;
}

Style the ice cream:

.icecream {
  position: absolute;  
}

.cone {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 200px solid #F7DC6F;
    
}
.cone:after {
  content:"";
  position: absolute;
  background-color: #F7DC6F;
  width: 140px;
  height: 25px;
  border-radius: 100px;
  top:-220px;
  left:-70px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.cone:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 30px solid transparent;
  border-top: 200px solid rgba(0,0,0,0.07);
  top:-200px;
  left:15px;
  transform: rotate(8deg);
}
.ice {
  position:absolute;
  border-radius: 50%;
  background-color: #5DADE2;
  width: 160px;
  height: 160px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  top: -150px;
  left:-20px;
}
.ice:after {
  content:"";
  position:absolute;
  border-radius: 100px;
  background-color: #5DADE2;
  width: 175px;
  height: 30px;
  top: 100px;
  left: -5px; 
}

Add eyes and the smile:

.eyes {
  position: absolute;
  border-radius: 50%;
  background-color: #000;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  top: 40px;
  left: 40px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}
.eyes:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000;
  width: 20px;
  height: 20px;
  top: 0;
  left: 40px;
}
.smile {
  position: absolute;
  top: 70px;
  left: 50px;
  width: 40px;
  height: 20px;
  opacity:0.5;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  background:#000;
}
.smile:after {
  content:"";
  position: absolute;
  top: 8px;
  left: 5px;
  width: 80%;
  height: 70%;
  border-radius: 100px 100px 0 0;
  background: #5DADE2;
  opacity: 0.5;
}

Add the drip:

.melt {
  position: absolute;
  background-color: #5DADE2;
  z-index:1;
  width: 20px;
  height: 40px;
  border-radius: 0 0 30px 30px;
  top:-20px;
  left:20px;
}
.melt:after {
  content:"";
  position: absolute;
  background-color: #5DADE2;
  border-radius: 0 0 30px 30px;
  width: 20px;
  height: 50px;
  left:-30px;
}

.drip {
  position: absolute;
  left:-10px;
  top: 11px;
}

.drip2 {
  background-color: #5DADE2;
  top: 50px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius:50%;
  animation: down 2s infinite;
}

.drip3 {
  top: 173px;
  background-color: #5DADE2;
  position: absolute;
  width: 60px;
  height: 20px;
  border-radius:50%;
  left:-10px;
}

Step3.

Add CSS Animation

For eyes:

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 1);
    }
}

For the drip:

@keyframes down {
  from {top: 11px;}
  to {top: 170px;}
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS HTML JavaScript JQuery Web development

Sketchborad JavaScript

sketch board javascript

Do you like sketching? Did you know that you can sketch on Java Script canvas too?

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

To create the JavaScript sketch board you need to have the pencil cursor in .png/ SVG format (for practising you can use mine below) and follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript/ jQuery

Step1.

Add HTML

Create the canvas-wrap, add canvas and buttons.

<div id="canvas-wrap">
  <div class="sketch-board">
    <div class="paper"></div>
  </div>
  <div class="paperclip"></div>
<canvas id="canvas"></canvas>
<button class="button" id="clear">Clear</button>
<button class="button" id="undo">Undo</button>
<button class="button" id="brushBlack">Black</button>
<button class="button" id="brushYellow">Yellow</button>
<button class="button" id="brushRed">Red</button>
<button class="button" id="brushBlue">Blue</button>
<button class="button" id="brushGreen">Green</button>

</div>

Step2.

Add CSS

Set the background colour and the size:

body {
  background-color: #EFD5C3;
  height: 100vh;  
}

Add canvas-wrap:

#canvas-wrap {
  position: relative;
  left: 35%;
}

And the canvas with mouse cursor:

canvas {  
  background-color: #fff;
  cursor: url(https://lenadesignorg.files.wordpress.com/2020/06/pencil.png?w=79) 5 80, auto;
  z-index:100;
}

Style the sketchboard:

.sketch-board {
  position: absolute;
  width: 700px;
  height: 500px;
  background-color: #c19875;
  z-index:-5;
  border-radius: 30px;
  left: -80px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.sketch-board:before {
  background-color: #EFD5C3;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 30px;
  content:"";
  left: 30px;
  top: 170px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.paper {
  background-color: #e6e3dc;
  width: 500px;
  height: 350px;
  position: absolute;
  top: 90px;
  left: 120px;
}

.paperclip {
  position: absolute;
  width: 150px;
  height: 40px;
  border: 7px solid #c0c0c0;
  border-radius: 20px;
  left: 200px;
  top: 25px;
  box-shadow: 5px -5px 0 rgba(0,0,0,0.07);
  z-index:1;
}

.paperclip:after {
  position: absolute;
  content:"";
  width: 200px;
  height: 30px;
  top: -20px;
  left:-25px;
  background-color: #8b786d;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  border-radius: 20px;  
}

Style buttons:

.button {
  background-color: #00a6a6;
  border: none;
  border-radius:20px;
  color: #fff;
  padding: 7px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  top: 450px;
  left:45px;
  position: relative;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #73bfb8;
}
JavaScript drawing

Step3.

Add JavaScript/ jQuery

Note: Remember to add jQuery (code above) in the <head> section in your code.

var canvas = document.querySelector('canvas');
  canvas.style.position = 'absolute';
  canvas.style.top = "80px";
  canvas.style.left = "50px";

var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 350;

var lastX;
var lastY;
var mouseX;
var mouseY;
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isMouseDown = false;
var brushSize = 3;
var brushColor = "#000";

ctx.lineJoin = ctx.lineCap = 'round';

var points = [];


function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    ctx.beginPath();
    if (ctx.lineWidth != brushSize) {
        ctx.lineWidth = brushSize;
    }
    if (ctx.strokeStyle != brushColor) {
        ctx.strokeStyle = brushColor;
    }
    ctx.moveTo(mouseX, mouseY);
    points.push({
        x: mouseX,
        y: mouseY,
        size: brushSize,
        color: brushColor,
        mode: "begin"
    });
    lastX = mouseX;
    lastY = mouseY;
    isMouseDown = true;
}

function handleMouseUp(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    isMouseDown = false;
    points.push({
        x: mouseX,
        y: mouseY,
        size: brushSize,
        color: brushColor,
        mode: "end"
    });
}


function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    if (isMouseDown) {
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
        lastX = mouseX;
        lastY = mouseY;
       
        points.push({
            x: mouseX,
            y: mouseY,
            size: brushSize,
            color: brushColor,
            mode: "draw"
        });
    }
}

$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});


function redrawAll() {

    if (points.length == 0) {
        return;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < points.length; i++) {

        var pt = points[i];

        var begin = false;

        if (ctx.lineWidth != pt.size) {
            ctx.lineWidth = pt.size;
            begin = true;
        }
        if (ctx.strokeStyle != pt.color) {
            ctx.strokeStyle = pt.color;
            begin = true;
        }
        if (pt.mode == "begin" || begin) {
            ctx.beginPath();
            ctx.moveTo(pt.x, pt.y);
        }
        ctx.lineTo(pt.x, pt.y);
        if (pt.mode == "end" || (i == points.length - 1)) {
            ctx.stroke();
        }
    }
    ctx.stroke();
}

function undoLast() {
    points.pop();
    redrawAll();
}

$("#brushGreen").click(function () {
    brushColor = "#89bd9e";
});
$("#brushYellow").click(function () {
    brushColor = "#fde74c";
});
$("#brushRed").click(function () {
    brushColor = "#e55934";
});
$("#brushBlue").click(function () {
    brushColor = "#5bc0eb";
});

$("#brushBlack").click(function () {
    brushColor = "#000";
});

var interval;
$("#undo").mousedown(function () {
    interval = setInterval(undoLast, 20);
}).mouseup(function () {
    clearInterval(interval);
});

var clear = function(){
  ctx.clearRect(0,0,500,350);
};

$('#clear').on("click",clear);

To see the live output of the animation go to my Codepen.

Enjoy coding!

Categories
CSS HTML JavaScript Web development

Roll the dice!

We know now how to toss a coin using JavaScript, so why not to try a roll the dice too?

CSS Dice 3d

Try to roll double six!

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create the Dice game follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

Create the Game container and another one for dice, and dots.

Note: to creating the dice you need to know how to create 3d cube. If you need more information about 3d cube and CSS perspective check the tutorial CSS Perspective Property, CSS Perspective-origin Property and 3d Cube.

 <div class="game">
    <div class="container">
      <div id='dice1' class="dice dice-one">
        <div id="dice-one-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-one-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-one-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-one-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-one-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-one-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div>
   </div>
    <div class="container">
      <div id='dice2' class="dice dice-two">
        <div id="dice-two-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-two-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-two-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-two-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-two-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-two-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div> 
   </div>
   <div id='roll' class='roll-button'><button>Roll dice!</button></div>
  </div> 

Step2.

Add CSS

Set the colour of the background, and the position of the elements.

body {
  background-color: #6a994e;
  perspective: 900px; 
  height: 100vh;
 }

.game {
  position: relative;
  width: 100%;
  height: 50%; 
}

.container {
  position: relative;
  display: inline-block;
  left:40%;
  top: 200px;

}

Style the button:

.roll-button {
  margin-left: 15px; }

button {
  position: absolute;
  left:55%;
  top:-350px;
  padding: 15px 50px;
  color: #fff;
  background-color: #f4d35e;
  border: none;
  font-size: 20px;
  border-radius: 20px; 
  box-shadow: 1px 3px #50514F;
  outline: none;
  transition: .3s; }

button:hover, button:active {
  outline: none;
  background: #50514F;
  cursor: pointer;
  margin-top: 15px; }

Add dice and dots:

.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1s; }

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 5px 5px -10px;
  border-radius: 20px;
  background-color: #ef233c;
  box-shadow: inset 2px 2px #d90429;}

.dice-one {
  left: 450px; }

.dice-two {
  left: 300px;
  top:-200px;
}

.side {
  position: absolute;
  background-color: #ffF;
  border-radius:5px;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 2em;
}

.side:nth-child(1) {
  transform: translateZ(3.1em); }

.side:nth-child(6) {
  transform: rotateY(90deg) translateZ(3.1em); }

.side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(3.1em); }

.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(3.1em); }

.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(3.1em); }

.side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(3.1em); }

.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%; }

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; }

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%; }

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; }

.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%; }

.six-2 {
  top: 50%;
  left: 20%; }

.six-5 {
  top: 50%;
  left: 80%; 
}
3d roll dice javascript

Add .show elements which will spin the dice:

.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); }

.show-6 {
  transform: rotateX(-900deg) rotateZ(1080deg); }

.show-3 {
  transform: rotateY(-450deg) rotateZ(-1440deg); }

.show-4 {
  transform: rotateY(810deg) rotateZ(720deg); }

.show-5 {
  transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-2 {
  transform: rotateX(450deg) rotateZ(-720deg); }

Step3.

Add JavaScript

Note: To generate a random number of the dice dots we need to use Math.floor(Math.random() * 6) + 1;
If Math.random() were to roll 0.9, we take that and multiply it by 6 which gives us 5.4. Then we take the floor of that which is 5. Then we add 1 which gives us a final result of 6. So the random numbers will only be between 1 and 6.

var elDiceOne       = document.getElementById('dice1');
var elDiceTwo       = document.getElementById('dice2');
var elComeOut       = document.getElementById('roll');

elComeOut.onclick   = function () {rollDice();};

function rollDice() {

  var diceOne   = Math.floor((Math.random() * 6) + 1);
  var diceTwo   = Math.floor((Math.random() * 6) + 1);
 
  console.log(diceOne + ' ' + diceTwo);

  for (var i = 1; i <= 6; i++) {
    elDiceOne.classList.remove('show-' + i);
    if (diceOne === i) {
      elDiceOne.classList.add('show-' + i);
    }
  }

  for (var k = 1; k <= 6; k++) {
    elDiceTwo.classList.remove('show-' + k);
    if (diceTwo === k) {
      elDiceTwo.classList.add('show-' + k);
    }
  } 
  setTimeout(rollDice(), 1000);
}

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Categories
CSS HTML Web development

CSS Windsurfing

I love water sports – can’t wait to Windsurf again!

CSS Windsurfing Animation

Thinking about the wind and the waves I created the Windsurfing animation using just pure CSS.

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create the animation you’ll need 2 images of the waves in .png format. For your training, you can use mine pictures below which I created in Adobe Photoshop, and then follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="windserfing">
    <div class="sail">
      <div class="boom"></div>
      <div class="mast"></div>
    </div>
    <div class="board"></div>
    <div class="surfer">
      <div class="head"></div>
      <div class="hair"></div>
      <div class="sunglasses"></div>
      <div class="top"></div>
      <div class="shorts"></div>
      <div class="leg"></div>
      <div class="leg2"></div>
      <div class="arm"></div>
      <div class="arm2"></div>
    </div>
    </div>
   <div class="wave1"></div>
   <div class="wave2"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background, container:

body {
  background-color: #9bf6ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}
.container {
  position: relative;
  
}

Style the Sail:

.windsurfing {
  position:relative; 
  animation: surf 2s ease infinite;
}

.sail{
  position: relative;
  width: 0;
  height: 0;
  border-top: 280px solid transparent;
  border-right: 110px solid rgba(237, 246, 125, 0.95);
  border-bottom: 50px solid transparent;
  transform-style: preserve-3d;
  left:30px;
  top:-40px;
  z-index:5;
}
.sail:before {
  position: absolute;
  content:"";
  width:65px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:-130px;
  left:50px;
  transform: rotate(25deg);
}
.sail:after {
  position: absolute;
  content:"";
  width:123px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:20px;
  left:-7px;
  transform: rotate(25deg);
}

.boom {
  width: 145px;
  height: 150px;
  border: solid 10px black;
  border-radius: 50%;
  top: -125px; 
  left: -20px; 
  position: absolute;
  transform: rotate3d(0.4, 0.2, 0, 75deg); 
  box-sizing: border-box;
}
.mast {
  position: absolute;
  width:5px;
  height:360px;
  background-color: black;
  left:110px;
  top:-280px;
  border-radius:100px;
  z-index:1;
}
.mast:before {
  position: absolute;
  content:"";
  background-color:black;
  width:25px;
  height:10px;
  top:350px;
  left:-10px;
  border-radius:30px 30px 0 0;
}
CSS Sail

Style the Board:

.board {
  width:300px;
  height: 50px;
  position:absolute;
  background-color: #724CF9;
  border-radius:50%;
  left:-60px;
  top:300px;
  box-shadow: inset 15px -10px 0 #564592;
}
.board:after {
  content:"";
  position: absolute;
  border-radius:0 0 100% 50%;
  width:20px;
  height:40px;
  background-color: #564592;
  left:40px;
  top:40px;
  transform: skew(-25deg);
}
CSS Windsurfing

Add the Windsurfer:

.surfer {
  position:absolute;
  top:0;
  left:0;
}
.head {
  position:absolute;
  background-color: #ffcb69;
  border-radius:50%; 
  width:45px;
  height:50px;
  top:110px;
  left:-55px;
  box-shadow: inset 3px 8px 0 black;
}
.head:before {
  position:absolute;
  content:"";
  width:15px;
  height:15px;
  background-color: #ffcb69;
  left:35px;
  top:20px;
  border-radius: 0 40px;
  
}
.head:after {
  content:"";
  position: absolute;
  border-radius:50%;
  box-shadow: inset 2px 2px 0 black;
  width:15px;
  height:15px;
  top:15px;
  left:10px;
}

.sunglasses {
  position: absolute;
  width: 8px;
  height:15px;
  border-radius:50%;
  background-color: brown;
  top:120px;
  z-index:5; 
  left:-15px;
  box-shadow: inset 2px 2px 0 black;
  
}
.sunglasses:before {
  content:"";
  position:absolute;
  width:25px;
  height:3px;
  background-color:black;
  top:5px;
  left:-22px;
}

.sunglasses:after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background-color:black;
  border-radius:50%;
  top:-10px;
  left:-5px;
}

.top {
  position:absolute;
  width:20px;
  height:50px;
  border-top: 25px solid #41ead4;
  border-left: 35px solid #41ead4;
  border-bottom: 30px solid transparent;
  border-right: 20px solid transparent;
  border-radius:50%;
  top:150px;
  left:-70px;
}

.shorts {
  z-index:5;
  position:absolute;
  width:45px;
  height:40px;
  background-color: #CC444B;
  top:225px;
  left:-60px;
  transform: skew(10deg) rotate(-40deg);
  border-radius: 30px 0 0 0;
}
.shorts:before {
  content:"";
  position:absolute;
  width:36px;
  height:40px;
  background-color: #DA5552;
  top:7px;
  left:8px;
  border-radius: 30px 0 0 0;
  transform: skew(5deg) rotate(-30deg);
}

.shorts:after {
  content:"";
  position: absolute;
  width:38px;
  height:10px;
  left:10px;
  background-color: #CC444B;
}

.leg {
  position:absolute;
  width:5px;
  height:70px;
  background-color: #ffcb69;
  top:250px;
  left:5px;
  transform: rotate(-35deg);
}

.leg:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
}

.leg2 {
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:40px;
  top:250px;
  left:-31px;
  transform: rotate(-35deg);
}

.leg2:before {
  content:"";
  position: absolute; 
  width:5px;
  height:40px;
  background-color: #ffcb69;
  transform: rotate(35deg);
  top:35px;
  left:-11px;
}

.leg2:after {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
  left:-22px;
}

.arm { 
  position: absolute; 
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:168px;
  left:-5px;
  transform: rotate(-45deg);
  z-index:-1;
}
.arm:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:5px;
  left:11px;
  transform: rotate(45deg);
}

.arm:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:2px;
  left:25px;
  border-radius: 0 30px 30px 30px;
}

.arm2 {
  position:absolute;
  background-color: #ffcb69;
  width:35px;
  height:5px;
  top:155px;
  left:-21px;
  z-index:-1;
  
}
.arm2:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:-7px;
  left:40px;
  border-radius: 0 30px 30px 30px;
}

.hair {
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:15px;
  height:15px;
  top:97px;
  left:-40px;
}
.hair:before {
  content:"";
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:12px;
  height:12px;
  left:12px;
  top:6px;
}

and add the Waves:

.wave1, .wave2 {
  height: 300px;
  position: absolute;
  width: 1000px;
  z-index: 99;
  left: -400px;
  top:280px;
  opacity:0.6;
}

.wave1 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe3-1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 8.7s infinite linear; 
  -moz-animation:    wave-animation1 8.7s infinite linear; 
  -o-animation:      wave-animation1 8.7s infinite linear; 
   animation:        wave-animation1 8.7s infinite linear; 
}

.wave2 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 6.3s infinite linear;
  -moz-animation:    wave-animation1 6.3s infinite linear; 
  -o-animation:      wave-animation1 6.3s infinite linear; 
  animation:         wave-animation1 6.3s infinite linear; 
}
CSS Waves

Step3.

Add CSS Animation

To Surf:

@keyframes surf {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px) rotate(-7deg);}
	60% {transform: translateY(-15px) rotate(3deg);}
}

and for the Waves:

@-webkit-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-moz-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-o-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% {background-position: 1601px 0;}
}

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Categories
CSS JQuery Web development

Bitten Doughnut Animation

Some time ago I posted the tutorial CSS Doughnut Animation where I used the only CSS to create it. Today, I created similar Doughnut, but to animate “bites” I used jQuery.

CSS Bitten Doughnut

The doughnut has been bitten 🙂

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add jQuery/JS

Step1.

Add HTML

Draw your Doughnut:

<div class="container">
  <div class="content">
    <div class="doughnut"></div>
    <div class="sugar"></div>
    <div class="sugar1"></div>
    <div class="right"></div>
    <div class="sprinkles">
      <div class="sprinkle1"></div>
      <div class="sprinkle2"></div>
      <div class="sprinkle3"></div>
    </div>
    <div class="bite">
      <div class="bite1"></div>
      <div class="bite2"></div>
      <div class="bite3"></div>
      <div class="bite4"></div>
      <div class="bite5"></div>
      <div class="bite6"></div>
      <div class="bite7"></div>
  
    </div>
    <div class="crumbs">
      <div class="crumb1"></div>
      <div class="crumb2"></div>
    </div>
    <div class="shadow"></div>
  </div>
</div>

Step2.

Add CSS

Set the position and the color of the background, the container, and the content:

body {
  background-color: #720026;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}
.container {
  position: relative;
  top:-50px;
}

.content {
  position: relative;
}

Style the doughnut:

.doughnut { 
    position: relative;
    border: 120px solid #FF9B54;
    border-radius: 50%;
    box-shadow: inset 5px 5px 1px #FF7F51, 5px 5px 1px #FF7F51;
    height:150px;
    width:150px;
    
}

.doughnut:after {
  content:"";
  position: absolute;
  height: 170px;
  width: 170px;
  border-top:100px solid #CE4257;
	border-right:100px solid #CE4257;
  border-left:100px solid #CE4257;
  border-bottom: 100px solid transparent;
	border-radius:50%;
  top:-115px;
  left:-110px;
  z-index:1;
  
  
}
.doughnut:before {
  content:"";
  position: absolute;
  width:115px;
  height:110px;
  background-color: #FF9B54;
  left:-90px;
  top:100px;
  z-index:2;
  transform: skew(23deg);
}
.sugar {
  position: absolute; 
  background-color: #CE4257;
  width: 40px;
  height: 50px;
  border-radius:100px;
  top:190px;
  z-index:3;
  left:74px;
  transform: skew(15deg);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar:after {
  content:"";
  position: absolute; 
  background-color: #FF9B54;
  width: 40px;
  height: 50px;
  border-radius:100px;
  left:-40px;
  box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar:before {
  content:"";
  position:absolute;
  background-color: #CE4257;
  width:23px;
  height:35px;
  top:15px;
  left:-63px;
  border-radius:100px;
  transform: skew(-5deg);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar1 {
  position: absolute;
  width:120px;
  height:80px;
  background-color: #FF9B54;
  left:230px;
  top:258px;
  z-index:2;
  transform: skew(-30deg);
}

.sugar1:after {
  content:"";
  position: absolute;
  width:40px;
  height:40px;
  background-color: #CE4257;
  border-radius:100px;
  top:-25px;
  left:-2px;
  transform: skew(10deg);
  box-shadow:0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar1:before {
  content:"";
  position: absolute; 
  width:40px;
  height:40px;
  background-color: #FF9B54;
  z-index:3;
  border-radius:100px;
  left:39px;
  top:-20px;
  box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
}
.right {
  position: absolute;
  background-color: #CE4257;
  width:36px;
  height:40px;
  left:331px;
  top:238px;
  z-index:4;
  border-radius:100px;
  transform: skew(-25deg);
  box-shadow:0px 5px 0 rgba(255, 255, 255, 0.3);
}
CSS Doughnut

Add some sprinkles:

.sprinkles {
  position: absolute;
  z-index:5;
}

.sprinkle1 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #FEE440;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-260px;
  left:50px;
  transform: rotate(20deg);
}
.sprinkle1:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #F15BB5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-60px;
  left:50px;
  transform: rotate(20deg);
}

.sprinkle1:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00BBF9;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-110px;
  left:100px;
  transform: rotate(-60deg);
}

.sprinkle2 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00F5D4;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-260px;
  left:340px;
  transform: rotate(70deg);
}

.sprinkle2:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00F5D4;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:200px;
  left:-160px;
  transform: rotate(30deg);
}

.sprinkle2:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #9B5DE5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:100px;
  left:-160px;
  transform: rotate(30deg);
}

.sprinkle3 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #FEE440;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-210px;
  left:300px;
  transform: rotate(-40deg);
}

.sprinkle3:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #9B5DE5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-90px;
  left:30px;
  transform: rotate(30deg);
}

.sprinkle3:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #F15BB5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-120px;
  left:60px;
  transform: rotate(-180deg);
}
CSS Sprinkle

Shadow and crumbs:

.crumbs {
  position: absolute;
  
}

.crumb1 {
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:30px;
  height:30px;
  
}

.crumb1:after {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:20px;
  height:20px;
  left:-30px;
  top:-30px;
  
}

.crumb1:before {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:10px;
  height:10px;
  left:-50px;
  top:10px;
  
}

.crumb2 {
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:30px;
  height:30px;
  top:-20px; 
  left:350px;
}

.crumb2:after {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:20px;
  height:20px;
  left:-40px;
  top:40px;
}

.crumb2:before {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:10px;
  height:10px;
  left:60px;
  top:30px;
}

.shadow {
  position: absolute;
  width:500px;
  height:100px;
  background-color: rgba(0,0,0,0.07);
  border-radius:50%;
  left:-50px;
  top:350px;
  z-index:-2;
}
CSS Doughnut

Create the bites:

.bite {
  position: absolute;
  z-index:100;
}

.bite1 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:250px;
  top:-380px;
 
}
.bite1:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:40px;
  left:60px;
}

.bite1:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:-30px;
}

.bite2 {
  position: absolute;
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  top:-400px;
  left:90px;  
}

.bite2:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:65px;
  top:0;
}

.bite2:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-65px;
  top:0;
}

.bite3 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:310px;
  top:-220px;
}

.bite3:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:15px;
  top:-50px;
}

.bite3:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:15px;
  top:60px;
}

.bite4 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:210px;
  top:-320px;
}

.bite4:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:55px;
  top:35px;
}

.bite4:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-35px;
  top:-35px;
}

.bite5 {
  position: absolute;
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:50px;
  top:-330px;
}

.bite5:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:75px;
  top:5px;
}

.bite5:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-70px;
  top:0px;
}
.bite6 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:-10px;
  top:-220px;
 
}
.bite6:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:50px;
  left:10px;
}

.bite6:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:0;
}

.bite7 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:50px;
  top:-220px;
 
}
.bite7:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:50px;
  left:30px;
}

.bite7:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:15px;
}
Bitten doughnut

Step3.

Add jQuery /JS

(function($){ 
    
    var el = $('.bite1, .bite2, .bite3, .bite4, .bite5, .bite6, .bite7');
    var animationLength = 400;
    var duration = el.length * animationLength + animationLength;
    var clearAfter = 100;
    var animation;
    
    function fadeNext(collection){
        collection.eq(0).fadeIn(animationLength, function(){
            (collection=collection.slice(1)).length 
            && fadeNext(collection)
        });
    }
    
    function play(){
        fadeNext(el);
        animation = setTimeout(function(){
            el.hide();
            play();
        }, duration);
    }
    play();
    
    setTimeout(function(){
         clearTimeout(animation);   
    }, duration * clearAfter);
})(jQuery)

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

jQuery mouseover() Method/ Escaping Dots Animation

The mouseover event occurs when the mouse pointer is over the selected element.

The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs.

jQuery mouseover() Method

Syntax:

$(selector).mouseover()

Attach a function to the mouseover event (optional):

$(selector).mouseover(function)

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "pink");
  });
  $("p").mouseout(function(){
    $("p").css("background-color", "green");
  });
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

Output:

Let’s go to the animation:

By moving the mouse cursor on the elements make them moving.

*animation opened in the Safari browser.
To see the live output of the animation click here.

What you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. Add jQuery

Step1.

Add HTML

<div class="container">
  <div class="bokeh">
  <div class="bokeh1"></div>
  <div class="bokeh2"></div>
  <div class="bokeh3"></div>
  <div class="bokeh4"></div>
  <div class="bokeh5"></div>
  <div class="bokeh6"></div>
  <div class="bokeh7"></div>
  <div class="bokeh8"></div>
  <div class="bokeh9"></div>
  <div class="bokeh10"></div>
  <div class="bokeh11"></div>
  <div class="bokeh12"></div>
  <div class="bokeh13"></div>
  <div class="bokeh14"></div>
  <div class="bokeh15"></div>
  <div class="bokeh16"></div>
  <div class="bokeh17"></div>
  <div class="bokeh18"></div>
  <div class="bokeh19"></div>
  <div class="bokeh20"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the size of the background, and the container:

body {
  background: black;
  height: 100vh;
}
.container {
  position: relative; 
  
}

Style dots:

.bokeh {
 position: relative;
 width: 75%;
 height: 80vh;
 
}

.bokeh1 {
 position: absolute;
 border-radius:50%;
 background-color: #FF1654;
 width: 200px;
 height: 200px;
 opacity: 0.5;
 box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
 animation: move 5s linear infinite;
 animation: move 13s ease infinite;
}
.bokeh2 {
 position: absolute;
 border-radius:50%;
 background-color: #F3FFBD;
 width: 160px;
 left: 200px;
 height: 160px;
 opacity: 0.5;
 box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
 animation: move 11s ease infinite;
 
}
.bokeh3 {
  position: absolute;
  border-radius:50%;
  background-color: #247BA0;
  width: 160px;
  left: 200px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh4 {
  position: absolute;
  border-radius:50%;
  background-color: #FF006E;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:300px;
  left:500px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
}

.bokeh5 {
  position: absolute;
  border-radius:50%;
  background-color: #8338EC;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:400px;
  left:600px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
}

.bokeh6 {
  position: absolute;
  border-radius:50%;
  background-color: #FFBE0B;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:700px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
}
.bokeh7 {
  position: absolute;
  border-radius:50%;
  background-color: #FB5607;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:100px;
  left:800px;
  box-shadow:inset -10px 5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
}

.bokeh8 {
  position: absolute;
  border-radius:50%;
  background-color: #EF476F;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:600px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
}

.bokeh9 {
  position: absolute;
  border-radius:50%;
  background-color: #FFD166;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:400px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 8s ease infinite;
}

.bokeh10 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:500px;
  left:400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}
.bokeh10 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:500px;
  left:400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}

.bokeh11 {
  position: absolute;
  border-radius:50%;
  background-color: #118AB2;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:200px;
  left:800px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}

.bokeh12 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 180px;
  height: 180px;
  opacity: 0.5;
  top:200px;
  left:1100px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
  
}

.bokeh13 {
  position: absolute;
  border-radius:50%;
  background-color: #073B4C;
  width: 180px;
  height: 180px;
  opacity: 0.5;
  top:300px;
  left:1500px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

.bokeh14 {
  position: absolute;
  border-radius:50%;
  background-color: #4ECDC4;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:1600px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
  
}

.bokeh15 {
  position: absolute;
  border-radius:50%;
  background-color: #FF6B6B;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:100px;
  left:1500px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 8s ease infinite;
  
}

.bokeh16 {
  position: absolute;
  border-radius:50%;
  background-color: #FFE66D;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:1300px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
  
}

.bokeh17 {
  position: absolute;
  border-radius:50%;
  background-color: #F3722C;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:300px;
  left:1400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh17 {
  position: absolute;
  border-radius:50%;
  background-color: #90BE6D;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:1300px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 13s ease infinite;
  
}

.bokeh18 {
  position: absolute;
  border-radius:50%;
  background-color: #F8961E;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:800px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
  
}

.bokeh18 {
  position: absolute;
  border-radius:50%;
  background-color: #F94144;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:200px;
  left:900px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh19 {
  position: absolute;
  border-radius:50%;
  background-color: #577590;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:1100px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

.bokeh20 {
  position: absolute;
  border-radius:50%;
  background-color: #F3722C;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:1200px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

Step3.

Add CSS Animation

@keyframes move {
	from {
		transform: rotate(0deg)
		           translate(200px)
               rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(100px) 
               rotate(-360deg);
	}
}

Step4.

Add jQuery

jQuery(function($) {
    $(".bokeh1, .bokeh2, .bokeh3, .bokeh4, .bokeh5, .bokeh6, .bokeh7, .bokeh8, .bokeh9, .bokeh10, .bokeh11, .bokeh11, .bokeh12, .bokeh13, .bokeh14, .bokeh15, .bokeh16, .bokeh17, .bokeh18, .bokeh19, .bokeh20").mouseover(function() {
        var dWidth = $(document).width() - 50, 
            dHeight = $(document).height() - 50, 
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
    });
});

To see the live output of the animation visit lenastanley.com.

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Coraline/ Other Mother – Walking Animation

Some time ago I watched a movie Coraline (2009) and today I’ll show the animation with one of the main characters – Other Mother.

If you haven’t seen the movie I can truly recommend you to watch it.

CSS Other Mother

In this animation, we can move the Other Mother in the right, or the left side using the control buttons.

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

You need to have a walking cycle image in .png format (for the training purposes you can use mine which I drew in Adobe Animate CC) and follow the steps below:

CSS Walking Cycle
  1. Add HTML
  2. Add CSS
  3. Add JavaScript/jQuery

Before you start – remember to add jQuery in your head section. You can read – how to add jQuery to HTML here.

Step1.

Add HTML

Draw the container, door, other Mother and the buttons.

<div class="container">
<div class="othermother"></div>
<div class="door">
<div class="keyhole"></div>
  </div>
<button id = "go"> Walk </button>
<button id = "left"> Left </button> 
<button id = "right"> Right </button> 
  <p>Push the buttons to move the Other Mother.</p>
  </div>

Step2.

Add CSS

Set the colour, and position of the background, and the container:

body {
  background-color: #896978;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  
}

.container {
  position: relative;
}

Style the door:

.door {
  position: absolute;
  width: 75px;
  height: 90px;
  background-color: #7E390B;
  top:23px;
  border: 5px solid #AEB77D;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  z-index:-100;
}

.door:after {
  content:"";
  border-radius:50% 50% 0 0;
  position:absolute;
  width:300px;
  height:300px;
  background-color: rgba(0,0,0,0.07);
  z-index:-5;
  top:-100px;
  left:-55px;
}

.door:before {
  content:"";
  position: absolute;
  border-bottom: 105px solid rgba(0,0,0,0.09);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 86px;
  top:95px;
  left:-30px;
  
}


.keyhole {
  position:absolute; 
  width:25px;
  height:25px;
  border-radius:50%; 
  background-color: #AEB77D;
  box-shadow:inset 3px -3px 0 rgba(0,0,0,0.07);
  top:35px;
  left:5px;
}
.keyhole:after {
  content:"";
  position: absolute;
  background-color: black;
  width:10px;
  height:10px;
  border-radius:50%;
  top:5px;
  left:7px;
}
.keyhole:before {
  content:"";
  position:absolute; 
  border-bottom: 15px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  height: 0;
  width: 2px;
  top:7px;
  left:6px;
}
CSS Other Mother

Add the Other Mother:

.othermother {
  z-index:100;
  top:-35px;
  position: absolute;
  height: 224px;
  width: 130px; 
  background-image:url(
"https://lenadesign.org/wp-content/uploads/2020/05/1.png?w=1024"); 
  
}

button{
  margin-top: 200px; 
  background-color: #3498DB;
  display: inline-block;
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  border-radius:20px;
  
}

.left{
  transform: scaleX(-1); 
}
CSS Walking Cycle

Step3.

Add JavaScript/jQuery

$(document).ready(function(){
  var leftButton = $("#left"); 
  var rightButton = $("#right"); 
  var goButton = $("#go"); 
  var walking = false; 
  var stepNum = 5; 
  var stepTimeout; 
  var divWindow = $(".othermother"); 
  var divPosition = 0; 
  var direction = 1; 
  var speed = 10; 
   
  goButton.click(function(){
    walking = (!walking) ? true : false; 
    if(walking){
      goButton.html("Stop"); 
      step();  
    } 
    else{
      goButton.html("Walk"); 
      clearTimeout(stepTimeout); 
    }
  });
  
  leftButton.click(function(){
    divWindow.addClass("left"); 
    direction = -1; 
  }); 
  
  rightButton.click(function(){
    divWindow.removeClass("left"); 
    direction = 1; 
  }); 
  
  function step(){
    divWindow.css("background-position", (-130 * stepNum) + "px"); 
    divPosition = divPosition + (direction * speed);
    divWindow.css("left", divPosition + "px"); 
    stepNum = (stepNum + 1) % 8; 
    stepTimeout = setTimeout(step, 750/speed); 
  }; 
}); 

To see the live output of the animation vist lenastanley.com.

Enjoy coding!

Categories
CSS JavaScript JQuery

CSS/jQuery/JS Playing Cube

Let’s take a closer look on another example of the tutorial CSS Perspective Property, CSS Perspective-orgin Property & 3d Cube and let’s create a 3d Playing Cube.

CSS Playing Cube

Click and drag the cube and change its the position!

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create a 3d playing cube you will need 6 pictures. You can use these below:

and then:

  1. Add HTML
  2. Add CSS
  3. Add jQuery/JavaScript

Step1.

Add HTML

<div class="game">
  <div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
  </div>
</div>

Step2.

Add CSS

body {
  height:80vh;
  background: linear-gradient(6deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.game {
  perspective: 800px;
}
.cube {
  font-size: 50px;
  width: 100px;
  margin: 4.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);
        background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/1-1.png?w=100');}
.top {transform: rotateX(90deg) translateZ(1em);
       background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/4-1.png?w=100');}

.right {transform: rotateY(90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/5-1.png?w=100');}

.left {transform: rotateY(-90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/2-1.png?w=100');}

.bottom {transform: rotateX(-90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/3-1.png?w=100');}

.back {transform: rotateY(-180deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/6-1.png?w=100');}

Step3.

Add jQuery/JavaScript

var lastMouseX = 0,
	lastMouseY = 0;
var rotX = 0,
	rotY = 0;

$(document).on("mousedown", function(ev) {
	lastMouseX = ev.clientX;
	lastMouseY = ev.clientY;
	$(document).on("mousemove", mouseMoved);
});
$(document).on("mouseup", function() {
	$(document).off("mousemove", mouseMoved);
});

function mouseMoved(ev) {
	var deltaX = ev.pageX - lastMouseX;
	var deltaY = ev.pageY - lastMouseY;

	lastMouseX = ev.pageX;
	lastMouseY = ev.pageY;

	rotY -= deltaX * 0.1;
	rotX += deltaY * 0.1;

	$(".cube").css("transform", "translateX( 0px) rotateX( " + rotX + "deg) rotateY(" + rotY + "deg)");
}

To see the live output go to lenastanley.com.

Enjoy coding!