Categories
CSS JQuery Web development

CSS & jQuery Stopwatch

CSS & jQuery Stopwatch

To create the CSS & jQuery Stopwatch follow the steps below:

Demo:

*to see the CSS & jQuery Stopwatch on the website click here.

Step1.

Add HTML

<div class="stopwatch"> 
  <div class="screen">
    <div class="time"> 00 : 00 : 00 : 00</div>
  </div>
    <div class="buttons">
    <button class="start">START</button>
    <button class="stop">STOP</button>
    <button class="reset">RESET</button>
    </div>
</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

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

Style the stopwatch:

.stopwatch {
  position: relative;
  height: 250px;
  width:270px;
  background-color: black;
  border-radius:30px;
  box-shadow: 0 0 30px rgba(0,0,0,0.7);
}

.screen {
  width: 220px;
  height: 80px;
  position: relative;
  background-color: #e9c46a;
  border:5px solid #333;
  border-radius: 20px 20px 0 0;
  top:40px;
  left:20px;
}

.time {
  position: absolute;
  font-size: 30px;
  text-align:center;  
  transform: translateX(-50%) translateY(-50%);
  top:45px;
  left:110px;
  width: 230px;
}


.buttons {
  text-align:center;
  position: relative;
  top:80px;
}

button {
  padding:10px;
}

Step3.

Add jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Tip: Don’t forget to add jQuery library in the <head> section!

$(document).ready(function () {
    var msec;
    var sec;
    var min;
    var hr;
    var interval;
    var count = 0;

$(".start").click(function () {
      $(".start").hide();  
      interval = setInterval(stopWatch, 10); 
    });

function stopWatch() {
      hr = parseInt(count * 10 / 1000 / 60 / 60);
      min = parseInt(count * 10 / 1000 / 60);  
      sec = parseInt((count * 10 / 1000)%60);
      msec = parseInt((count* 10) % 1000/ 10); 

      hr = hr < 10 ? "0" + hr : hr;
      min = min < 10 ? "0" + min : min;
      sec = sec < 10 ? "0" + sec : sec;
      count++; 
      $(".time").text(hr + " : " + min + " : " + sec + " : " + msec);
    }

$(".stop").click(function () {
      $(".start").hide();
      clearInterval(interval);
    });

$(".reset").click(function () {
      $(".time").text("00 : 00 : 00 : 00"); 
      $(".start").show();   
      clearInterval(interval); 
      count = 0;             
    });
  })

Enjoy coding!

Categories
JQuery Web development

Zoom text/ changing font-size and width on hover (jQuery)

Zoom text/ changing font-size and width on hover (jQuery)

Demo:

*to see the zoom effect on the website click here.

To create the zoom text effect on hover with jQuery follow the steps below:

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

Step1.

Add HTML

<div class="text">He  was  an  old  man  who  fished  alone  in  a  skiff  in  the  Gulf  Stream  and  he  had  gone  eighty-four days now without taking a fish. In the first forty days a boy had been with him. But  after  forty  days  without  a  fish  the  boy’s  parents  had  told  him  that  the  old  man  was  now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at  their  orders  in  another  boat  which  caught  three  good  fish  the  first  week.  It  made  the  boy  sad  to  see  the  old  man  come  in  each  day  with  his  skiff  empty  and  he  always  went  down to help him carry either the coiled lines  or  the  gaff  and  harpoon  and  the  sail  that  was  furled  around  the  mast.  The  sail  was  patched  with  flour  sacks and, furled, it looked like the flag of permanent defeat.   The  old  man  was  thin  and  gaunt  with  deep  wrinkles  in  the  back  of  his  neck.  The  brown blotches of the benevolent skin cancer the sun brings from its [9] reflection on the tropic  sea  were  on  his  cheeks.  The  blotches  ran  well  down  the  sides  of  his  face  and  his  hands  had  the  deep-creased  scars  from  handling  heavy  fish  on  the  cords.  But  none  of  these scars were fresh. They were as old as erosions in a fishless desert. 
</div>

Step2.

Add CSS

Set the position of the background and elements:

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

Style the text:

.text {
  width: 400px;
  height: 350px;
  font-size:14px;
}

Step3.

Add jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Tip: Don’t forget to add jQuery library in the <head> section!

$(document).ready(function() {
  var oldSize = parseFloat($(".text").css('font-size'));
  var newSize = oldSize  * 2;
  var oldWidth = parseFloat($(".text").css('width'));
  var newWidth = oldWidth  * 1.5;
  
  $(".text").hover(
    function() {
     $(".text").animate({ fontSize: newSize, width: newWidth}, 100);
    },
    function() {
    $(".text").animate({ fontSize: oldSize, width: oldWidth}, 100);
   }
 );
});

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Div (circle) follows the cursor

Div follows the cursor

Demo:

*to see the “circle follows the cursor” on the website click here.

To create the “div/ circle that follows the cursor” follow the steps below:

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

Step1.

Add HTML

<div class="circle"></div>

Step2.

Add CSS

.circle {
	position: absolute;
  border: solid 4px #333;
	width: 65px; 
	height: 65px; 
  border-radius: 50%; 
  transition: .15s;
}

.circle:active {
  border: solid 4px #e76f51;
}

Step3.

Add JavaScript /jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Tip: Don’t forget to add jQuery library in the <head> section!

var Y = 0, X = 0;
var moveY = 0, moveX = 0;
   
$(document).mousemove(function(event){
    Y = event.pageY - 33; 
    X = event.pageX - 33;
  });
    
setInterval(function(){
    moveY += ((Y - moveY)/15);
    moveX += ((X - moveX)/15);
    $(".circle").css({ top: moveY +'px', left: moveX +'px'});
  }, 0);

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & jQuery Calculator

CSS & jQuery Calculator

Demo:

*to see the calculator on the website click here.

To create the CSS & jQuery calculator follow the steps below:

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

Step1.

Add HTML

Create the calculator container and add the rows with numbers:

<div class="calculator-container">
  <input type="text" id="result" disabled="disabled" value="0">/>
  <label for="result"></label>
<div class="values">
  <div class="calc-row">
    <button class="clear">C</button>
    <button>.</button>
    <button class="orange">÷</button>
  </div>
  <div class="calc-row">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button class="orange">x</button>
  </div>
  <div class="calc-row">
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="orange">-</button>
  </div>
  <div class="calc-row">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="orange">+</button>
  </div>
  <div class="calc-row">
    <button class="zero">0</button>
    <button class="orange">=</button>
  </div>
  </div>
</div>

Step2.

Add CSS

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

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

Style the calculator:

.calculator-container {
  position: relative;
  width:300px;
  height: 365px;
  background-color: #0a0908;
  text-align: center;
  box-shadow: 0 0 30px rgba(0,0,0,.7);
}

.calculator-container input[type=text] {
  line-height: 35px;
  width: 66%;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
  border: 1px solid rgba(0,0,0,0.4);
  background-color: #e8e8e8;
  margin-top:30px;
  direction: rtl;
  font-weight: bold;
  font-size: 15px;
  padding: 5px;
  color: black;
}

.calculator-container .calc-row {
  display: flex;
}

.values {
  margin-left: 50px;
  margin-top:20px;
}

.orange {
  background-color: #fb8b24;
  color: #fff;
  height: 50px;
  width: 50px;
  cursor: pointer;
}

.clear {
  background-color: #9a031e;
  color: #fff;
  width: 100px;
  height: 50px;
  cursor: pointer;
}

button {
  background-color: #0a0908;
  color: #fff;
  height: 50px;
  width: 50px;
  cursor: pointer;
  transition: transform .2s;
  border:none;
}

button:active {
  transform: translateY(2px) translateX(2px);
}

.zero {
  width: 150px;
  cursor: pointer;
}
CSS Calculator

Step3.

Add JavaScript/ jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Tip: Don’t forget to add jQuery library in the <head> section!

var numbers = [];
var sum = 0;

var calc = '';
$("button").on('click', function() {
 	var value = $(this).text();

  if (!isNaN(value) || value === '.') {
    calc += value;
    $("#result").val(calc.substring(0,10));
    
  } else if (value === 'C') {
    calc = '';
    sum = 0;
    $("#result").val('0')
  
 } else if (value === '÷') {
    numbers.push(calc);
    numbers.push('/');
    calc = '';
    
  } else if (value === 'x') {
    numbers.push(calc);
    numbers.push('*');
    calc = '';

  } else if (value === '=') {
  	numbers.push(calc);

    var count = Number(numbers[0]);
    for (var i = 1; i < numbers.length; i++) {
      var nextNum = Number(numbers[i+1])
      var mark = numbers[i];
      
      if (mark === '+') { count += nextNum; } 
      else if (mark === '/') { count /= nextNum; }
      else if (mark === '-') { count -= nextNum; } 
      else if (mark === '*') { count *= nextNum; }     
      i++;
    }
    
    if (count < 0) {
      count = Math.abs(count) + '-';
    }
    
    $("#result").val(count);
		numbers = [];
    calc = '';
    
  } else {
    numbers.push(calc);
    numbers.push(value);
    calc = '';
  }
});

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & JavaScript Bee Progress Bar

bee progress bar

Demo:

To create the CSS & JavaScript Bee Progress Bar follow the steps below:

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

Step1.

Add HTML

<div class="honey-bee">
  <div id="text"><h1>Honey Bee</h1></div>
  <div id="bee">
    <div class="head"></div>
    <div class="feelers"></div>
    <div class="body"></div>
    <div class="wingOne"></div>
    <div class="wingTwo"></div>
    <div class="legs"></div>
  </div>
  <div class="background">
    <div class="honey"></div>
    <div class="honey1"></div>
    <div class="honey2"></div>
  </div> 
<div id="progress">
   <div class="bar" id="bar"></div>
</div>
<button id="button" class="button" onclick="move()">Click Me</button> 
</div>

Step2.

Add CSS

Import the font:

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

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

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

.honey-bee {
  position: relative;
}

Style the progress bar and the button:

#progress {
  position: relative;
  width: 500px;
  background-color: #f26419;
  border-radius:100px;
  border: 3px solid black;
  box-shadow: inset -5px 5px rgba(0,0,0,0.07); 
  top: 0;
  left:0;
  overflow:hidden;
}

#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;
  font-size: 16px;
  margin: 4px 2px;
  border-radius:100px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
  top:60px;
  left:175px;
}

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

Style the text:

#text {
  position: absolute;
  top: -80px;
  left: 175px;
  font-family: 'Lobster', cursive;
}
Honey Bee progress bar

Add the Bee:

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

#bee:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left:-62px;
  top:53px;
}

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

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

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

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

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

.feelers:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -4px;
  left: 10px;
}

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

.body {
  position:absolute;
  width: 0;
  height: 0;
  border-right: 30px solid #f0efeb;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left:-90px;
  top:30px;
}

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

.body:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left:35px;
  top:18px; 
  transform: rotate(10deg);
}

.legs {
  z-index:-1;
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left:5px;
  top:45px; 
}
.wingOne {
  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;
}

.wingTwo {
  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;
}
CSS progress bar

Make the wings move:

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

Style the honey:

.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;
    }
Progress Bar

Add CSS animation to move the Bee (we will use it later in the step3):

.moveright {
  animation: moveright 2s forwards;
}

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

Step3.

Add JavaScript

Note: Don’t forget to add jQuery to the <head> section.

jQuery:

const dist = document.querySelector('#bee');

document.querySelector('button').addEventListener('click', () => {
  dist.classList.remove('moveright');
  setTimeout(function(){
    dist.classList.add('moveright');
  },100);
});

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  + "%";
        
      }
    }
  }
}

Enjoy coding!

Categories
JQuery Web development

jQuery setTimeOut method / Coffee, coffee more coffee…

CSS coffee animation

Demo:

*to see the animation on the website click here.

What do you need to do?

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

Step1.

Add HTML

<div class="container">
<div id="circle">
     <div class="mug">
       <div class="handle"></div>
       <div class="inside">
         <div class="coffee"></div>
       </div>
       <div class="drink"></div>
       <div class="drip"></div>
        <div class="drip1"></div>
        <div class="drip2"></div>
     </div>
     <div class="fill"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

.container {
  position: relative;
}

#circle {
  position: relative;
  background-color: #A1C181;
  width:450px;
  height:450px;
  border-radius: 50%;
  overflow:hidden;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

Style the mug:

.mug {
  position: absolute;
  width: 170px;
  height: 180px;
  background-color: #FCCA46;
  top: 135px;
  left:140px;  
}

.mug:after {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:-18px;
}

.mug:before {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:158px;
  box-shadow: 1px 25px 3px rgba(0,0,0,0.09);
}
.handle {
  position: absolute;
  border: 17px solid #FCCA46;
  border-radius:50%;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 25px;  
}

.inside {
  position: absolute;
  content:"";
  width: 155px;
  height: 40px;
  border-radius:50%;
  background-color: #ffe066;
  top:-13px;
  left: 7px;
  z-index:1;
  overflow: hidden; 
}
Coffee jQuery

Add Coffee and drip:

.coffee {
  position: absolute;
  width: 200px;
  left:-20px;
  height: 40px;
  border-radius:50%;
  background-color: #432818;
  top:30px;
  
}

.drip {
  position: absolute; 
  width: 5px;
  height: 5px;
  background-color: #432818;
  z-index:2;
  left:60px;
  top:20px;
  
}

.drip1 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:35px;
  top:20px;
  background-color: #432818;
}

.drip2 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:130px;
  top:20px;
  background-color: #432818;
}

.fill {
  position: absolute;
  width: 500px;
  height: 500px;
  top:450px;
  background-color: #432818;
  z-index:3;
}

.drink {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #432818;
  top:-150px;
  left: 75px;
  z-index:2;
}

Step3.

Add jQuery

setTimeout(function(){
    $(".drink").animate({
        "height": "+=275",
        top: "-=100"
    })
}, 2500, "ease")


setTimeout(function(){
    $(".coffee").animate({
        "height": "+=300",
        top: "-=100"
    })
}, 3000, "ease")

setTimeout(function(){
    $(".drip").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 4500, "ease")

setTimeout(function(){
    $(".drip1").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 5500, "ease")

setTimeout(function(){
    $(".drip2").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 6500, "ease")

setTimeout(function(){
    $(".fill").animate({
        "height": "+=500",
        top: "-=500"
    }, 5000)
}, 5500, "ease")

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Coraline/ Other Mother – Walking Animation

coraline other mother

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

Demo:

*to see the animation on the website 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) 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="other-mother">
  <div class="othermother"></div>
  <div class="shadow"></div>
  <div class="door"></div>
  <div class="knob"></div>
<button id ="go"> Walk </button>
<button id ="left"> Left </button> 
<button id ="right"> Right </button> 
</div>

Step2.

Add CSS

Set the colour the position of the background and elements:

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

.other-mother {
  position: relative;
  top:-100px;
}

Style the door:

.shadow {
  position: relative;
  background-color: #eae2b7;
  width: 120px;
  height:170px;
  perspective: 100px;
}

.shadow:before {
  content:"";
  position: absolute;
  width: 370px;
  height:500px;
  background-color: #eae2b7;
  transform: rotateX(90deg) skew(55deg);
  top:115px;
  left:230px;
}

.shadow:after {
  content:"";
  position: absolute;
  background-color: #403d39;
  top:-20px;
  left:-20px;
  width: 90px;
  height: 210px;
  transform: rotateY(-30deg);
}

.door {
  position: absolute;
  width:0;
  height:0;
  border-left: 67px solid transparent;
  border-top:40px solid #eae2b7;
  top:0;
  left:0;
}

.door:before {
  content:"";
  position: absolute;
  width:200px;
  height:50px;
  background-color: #333;
  left:-100px;
  top:-90px;
}

.door:after {
  position: absolute;
  content:"";
  width:5px;
  height:181px;
  background-color: #292724;
  left:-3px;
  top:-1px;
}

.knob {
  position: absolute;
  background-color: #292724;
  width: 20px;
  height:7px;
  border-radius:10px;
  left:38px;
  top:125px;
  transform: rotate(30deg);
  box-shadow:1px 3px rgba(0,0,0,0.1);
}

.knob:before {
  content:"";
  position: absolute;
  height:5px;
  width:79px;
  background-color: #292724;
  top:-85px;
  left:-96px;
}
CSS Door

Add the Other Mother:

.othermother {
  z-index:100;
  top:45px;
  left:0;
  position: absolute;
  height: 224px;
  width: 130px; 
  background-image:url(
"https://lenadesignorg.files.wordpress.com/2020/05/1.png?w=1024"); 
}
other mother

Style the buttons:

button {
  text-align: center;
  background-color: #e5e5e5;
  border-radius:10px;
  font-size: 16px;
  color: #333;
  border: none;
  width:70px;
  transition: .2s;
  display: block;
  margin-left:200px;
  margin-top:-50px;
}

button:hover {
  background-color: #ef233c;
}

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

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); 
  }; 
}); 

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & jQuery 3d Cube

3d Cube

Demo:

*the cube is gonna rotate with the move of the mouse.
*to see the CSS & jQuery 3d Cube on the website click here.

What do you need to do?

To create the CSS & jQuery rotating cube follow the steps below:

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

Step1.

Add HTML

Each cube has 6 sides. We need to create them in HTML:

<div id="wrap">
    <div id="D3Cube">
        <div id="side1"></div>
        <div id="side2"></div>
        <div id="side3"></div>
        <div id="side4"></div>
        <div id="side5"></div>
        <div id="side6"></div>
    </div>
</div>

Step2.

Add CSS

body {
  background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(233,210,148,1) 100%);
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
}

#wrap {
    position:relative;
}
#D3Cube {
    position: relative;
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 250px;
    height: 250px;
    float: left;
    overflow: hidden;
    opacity: 0.8;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F9E79F;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #85C1E9;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F1948A;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #1ABC9C;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #8E44AD;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #D7DBDD;
   }

Step3.

Add JavaScript/jQuery

$(document).mousemove(function(e) {
  $('#3dCube').css('transform', 'rotateX(0deg) rotateY(0deg)');
  
  var rotate_X;
  var rotate_Y;
  var invert = false;
  
  if (invert) {
    rotate_X = e.pageX;
    rotate_Y = e.pageY;
  } else if (!invert) {
    rotate_X = e.pageX;
    rotate_Y = -e.pageY;
  }
  
  $('#D3Cube').css('transform', 'rotateX(' + rotate_Y + 'deg) rotateY(' + rotate_X + 'deg)')
});

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS Perspective Property, CSS Perspective-origin Property & 3d Cube

CSS Perspective property

Today we’ll talk about the CSS Perspective property, then we’ll go to the CSS Perspective-origin property and in the end, we’ll create the 3d cube using pure CSS.

  1. CSS Perspective property
  2. CSS Perspective-origin property
  3. 3d Cube

Click on/ drag to rotate the Cube:


1
6
4
3
5
2







CSS Perspective Property

The CSS perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

CSS Syntax:

perspective: length|none;

Where:

length– how far the element is placed from the view.

none– default value. Same as 0. The perspective is not set.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#el1 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 60px;
  border: 5px solid #2a9d8f;
  perspective: 100px;  
}
#el2, #el4 {
  padding: 35px;
  position: absolute;
  border: 5px solid #e76f51;
  background-color: #e9c46a; 
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  opacity:0.5; 
}
#el3 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 60px;
  border: 5px solid #2a9d8f;
  perspective: none;
}
</style>
</head>
<body>

<h4>perspective: 100px:</h4>
<div id="el1">1
  <div id="el2">2</div>
</div>
<h4>perspective: none:</h4>
<div id="el3">3
  <div id="el4">4</div>
</div>
</body>

Output:

perspective: 100px:

1
2

perspective: none:

3
4

CSS Perspective-origin Property

The perspective-origin property property defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

CSS Syntax:

perspective-origin: x-axis y-axis;

Where:

x-axis – defining where the view is placed at the x-axis (left, center, right, length, %). Default value: 50%.

y-axis – defining where the view is placed at the y-axis (top, center, bottom, length, %). Default value: 50%.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#element1 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 150px;
  margin-top:30px;
  border: 5px solid #2a9d8f;
  perspective: 100px;
  perspective-origin: right;  
}
#element2, #element4, #element6 {
  padding: 50px;
  position: absolute;
  border: 5px solid #e76f51;
  background-color: #e9c46a; 
  opacity:0.5;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}
#element3 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 150px;
  margin-top:60px;
  border: 5px solid #2a9d8f;
  perspective: 150px;
  perspective-origin: top left;
}
#element5 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-top:60px;
  margin-left: 150px;
  border: 5px solid #2a9d8f;
  perspective: 100px;
  perspective-origin: -80%;  
}
</style>
</head>
<body>
<h4>perspective-origin: right:</h4>
<div id="element1">1
  <div id="element2">2</div>
</div>
<h4>perspective-origin: top left:</h4>
<div id="element3">3
  <div id="element4">4</div>
</div>
<h4>perspective-origin: -80%:</h4>
<div id="element5">5
  <div id="element6">6</div>
</div>
</body>
</html>

Output:

perspective-origin: right:

1
2




perspective-origin: top left:

3
4




perspective-origin: -80%:

5
6




3d Cube

Using all knowledge from above we can create now a 3d cube.

We can create cubes setting different perspectives. In the first example, the CSS perspective property is set to 200px, in the second example 900px.

Example1:

Perspective: 200px;

<!DOCTYPE html>
<html>
<head>
<style>

.cube-content {
  perspective: 200px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #e9c46a;
  color: #264653;
  opacity:0.5;
  border: 1px solid #264653;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="cube-content">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>

</body>
</html>

Output:

1
6
4
3
5
2




Example2:

Perspective: 900px:

<!DOCTYPE html>
<html>
<head>
<style>
.cube-container {
  perspective: 900px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #e9c46a;
  opacity:0.5;
  border: 1px solid #264653;
  color: #264653;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="cube-container">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>
</body>
</html>

Output:

1
6
4
3
5
2




Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Happy Earth Day! /lettering.js

CSS Earth Day

Demo:

To create Happy Earth Day! /lettering.js effect follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="earth">
    <div class="continent"></div>
    <div class="continent2"></div>
  </div>
  <div class="eyes"></div>  
  <div class="smile"></div>
  <div class="shadow">
    <div class="circle"><h1>Happy Earth Day!</h1></div>
  </div>
    </div>

Step2.

Add JQuery

Add first these in the <head> section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

and then a script block with the .lettering() method:

<script>
	$(function() {
        $("h1").lettering();
    });
	</script>

Note: The resulting code will churn our .h1 and output the following:

<h1>
  <span class="char1">H</span>
  <span class="char2">a</span>
  <span class="char3">p</span>
  <span class="char4">p</span>
  <span class="char5">y</span>
  <span class="char6"></span>
  <span class="char7">E</span>
  <span class="char8">a</span>
  <span class="char9">r</span>
  <span class="char10">t</span>
  <span class="char11">h</span>
  <span class="char12"></span>
  <span class="char13">D</span>
  <span class="char14">a</span>
  <span class="char15">y</span>
  <span class="char16">!</span>
</h1>

Step3.

Add CSS

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

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

Style the Earth and add continents:

.earth {
  position: relative;
  background-color: #3498DB;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  overflow: hidden;
  left:25px;
  top: 25px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: earth alternate infinite 400ms 40ms ease-in-out;
}
.continent {
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 120px;
  height: 90px;
  border-radius: 50%; 
  left: 45px;
  
}
  
.continent:after {
  content:"";
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 80px;
  height: 110px;
  border-radius: 50%; 
  top:50px;
  left:35px;
  
}
.continent:before {
  content:"";
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 20px;
  height: 40px;
  border-radius: 50%; 
  top:120px;
  left:115px;
  transform: rotate(40deg);
  

}
.continent2 {
  position: absolute;
  background-color: #2ECC71;
  width: 120px;
  height: 140px;
  border-radius: 50%; 
  top: 150px;
  left: 180px;
}
.continent2:after {
  content:"";
  position: absolute;
  background-color: #2ECC71;
  width: 60px;
  height: 70px;
  border-radius: 50%; 
  left:-30px;
  top:50px;
}
.continent2:before {
  content:"";
  position: absolute;
  background-color: #2ECC71;
  width: 40px;
  height: 70px;
  border-radius: 50%; 
  left:-120px;
  top:10px;
  transform: rotate(-40deg);
}
CSS Earth Animation

Make the Earth smile:

.eyes {
  position: absolute;
  display: block;
  background-color:black;
  z-index: 10;
  border-radius:50%;
  width: 30px;
  height: 30px;
  top:130px;
  left: 95px;
  box-shadow: 80px 0 black;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}
.eyes:before {
  content:"";
  position: absolute;
  background-color: white;
  width: 10px;
  height: 10px;
  border-radius:50%;
  top: 10px;
  left: 5px;
  box-shadow: 80px 0 white;
}

.smile {
  position: absolute;
  top: 160px;
  left: 130px;
  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: 1;
}
CSS Smiling Earth

Add an extra background to the Earth:

.shadow {
  position: absolute;
  border-radius: 50%;
  top:-50px;
  left:-50px;
  background-color: #FCF3CF;
  width: 400px;
  height: 400px;
  z-index:-10;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
CSS Earth Day

The text is easy to manipulate in your CSS using an ordinal .char# pattern. 

.circle {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h1 span {
  font-size:33px;
  font-family: tahoma;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 35px;
  top: -65px;
  transform-origin: bottom;  
}

.char1 {
  transform: rotate(4deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}
.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

Step4.

Add CSS Animation

For the Earth’s eyes:

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

and the globe:

@keyframes earth { 
  to { transform: scaleX(1.03) scaleY(0.97); } 
}

Enjoy coding!