Categories
Web development

CSS Easter Egg Animation


CSS Easter Egg Animation

To learn how to create the CSS Easter Egg Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="easter-egg-animation">
  <div class="easter-egg">
  <div class="egg">
    <div class="shell"></div>
  </div>
  <div class="egg-top">
    <div class="shell-top"></div>
  </div>
  </div>
  <div class="shadow"></div>
  <div class="text">Happy</br>Easter!</div>
</div>

Step2.

Add CSS

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

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

#easter-egg-animation {
  position: relative;
  cursor: pointer;
}

Style and animate the egg:

.easter-egg {
  position: relative;
  transform-origin: bottom;
  animation: wiggle 2s forwards;
}

.egg {
   position: relative;
   width: 160px;
   height: 80px;
   background-color: #19a0bd;
   border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
   top:90px;
}

.egg-top {
   position: absolute;
   width: 160px;
   height: 120px;
   background-color: #19a0bd;
   border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
   top:-44px;
   left:0;
   transform-origin: left;
   animation: open .5s ease forwards 2s;
}

@keyframes open {
  0% {transform: rotate(0);}
  100% {transform: rotate(-220deg);top:0;}
}

.egg:before, .egg:after, .egg-top:before, .shell:before {
   content:"";
   position: absolute;
   border-style: solid;
}

.egg:before {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 20px 20px 0;
  top: -20px;
}

.egg:after {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 0 20px 20px;
  top: -20px;
  left: 140px;
}

.egg-top:before {
  border-color: #19a0bd transparent transparent transparent;
  border-width: 20px 20px 0 20px;
  top:119px;
}

.shell-top, .shell-top:before, .shell-top:after {
  position: absolute;
  border-style: solid;
  border-color: #19a0bd transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

.shell-top {
  left:40px;
  top:119px;
}

.shell-top:before, .shell-top:after {
  content:"";
  top:-20px;
}

.shell-top:before {
  left:20px;
}

.shell-top:after {
  left:60px;
}

.shell {
  position: absolute;
}

.shell:before {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 20px 20px 20px;
  top:-19px;
  left:20px;
  filter: drop-shadow(40px 0 #19a0bd) drop-shadow(40px 0 #19a0bd);
}

.egg-top:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,.2);
  width:25px;
  height:60px;
  border-radius:50%;
  transform: rotate(-27deg);
  top:30px;
  left:115px;
}

.shell:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width:10px;
  height:10px;
  background-color: #f1f3ed;
  top: 30px;
  left:20px;
  box-shadow: 30px 25px #f1f3ed, 60px 0 #f1f3ed, 90px 20px #f1f3ed, 120px -5px #f1f3ed, 30px -25px #f1f3ed, 90px -25px #f1f3ed;
}

.shadow {
  position: absolute;
  width:220px;
  height:30px;
  background-color: rgba(0,0,0,.1);
  border-radius:50%;
  z-index:-1;
  top:147px;
  left:-27px;
}

@keyframes wiggle {
  0% {transform: rotate(0);}
  20% {transform: rotate(-20deg);}
  40% {transform: rotate(20deg);}
  60% {transform: rotate(-20deg);}
  80% {transform: rotate(20deg);}
  85% {transform: rotate(-20deg);}
  90% {transform: rotate(20deg);}
  95% {transform: rotate(-20deg);}
  99% {transform: rotate(20deg);}
  100% {transform: rotate(0);}
}

Style and animate the text:

.text {
  position: absolute;
  top:100px;
  left:45px;
  text-align: center;
  color: white;
  font-size: 25px;
  z-index:-1;
  transform-origin: bottom;
  animation: up .5s ease forwards 2s;
}

@keyframes up {
  0% {transform: translateY(0) scale(1);}
  100% {transform: translateY(-80px) scale(2);}
}

Step3. (optional)

Add jQuery

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#easter-egg-animation').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Easter Bunny/ Foldable Easter Card

CSS Egg Shape and CSS Easter eggs

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

Categories
Web development

Book Page Flip (CSS/ jQuery)

Book Page Flip (CSS/ jQuery)

To learn how to create the Book Page Flip using CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the Book Page Flip (CSS/ jQuery) on the website click here.

Images used in the tutorial:

cookie
cookie.png
bowl
bowl.png

Step1.

Add HTML

<div class="recipe-book">
<div class="cookie-book">
    <div class="ongoing left sheet one"></div>
    <div class="ongoing right sheet two">Cookie Book</div>
</div>
<div class="controls">
    <button class="back"><</button>
    <button class="next">></button>
</div>
  </div>

Step2.

Add CSS

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

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

.recipe-book {
  position: relative;
  padding:10px;
  font-family: Trebuchet MS;
}

.cookie-book {
  width:500px;
  height:350px;
  position:relative;
  transform-style: preserve-3d;
  perspective:2000px;
  margin-bottom:15px;
  left:-25%;
}

Style the sheets:

.cookie-book .sheet {
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transition: .7s;
  transform-style: preserve-3d;
  transform:rotateY(0deg);
  backface-visibility:hidden;
  z-index:1;
}

.cookie-book .sheet.left {
  left:0;
  transform-origin:right;
  border-radius: 5px 0 0 5px;
}

.cookie-book .sheet.right {
  left:50%;
  transform-origin:left;
  border-radius: 0 5px 5px 0;
}

.cookie-book .sheet.ongoing {
  z-index:2;
}

.cookie-book .ongoing.right.sheet.move {
  transform:rotateY(-165deg);
}
.cookie-book .ongoing.left.sheet.move {
  transform:rotateY(165deg);
}

.cookie-book .next.left.sheet {
  transform:rotateY(165deg);
}
.cookie-book .next.left.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .back.right.sheet {
  transform:rotateY(-165deg);
}

.cookie-book .back.right.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .sheet.one {
  background-color:transparent;
}

.cookie-book .sheet.two {
  background-color: #e63946;
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/cookie.png);
  background-size: 170px;
  background-repeat: no-repeat;
  background-position: center 80%;
  font-size: 60px;
  color: #333;
  text-align: center;
}

.cookie-book .sheet.three {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
  text-align: center;
  font-size: 20px;
  line-height:3;
}

.cookie-book .sheet.three:before {
  content:"Ingredients:";
  position: absolute;
  width:250px;
  text-align: center;
  left:0;
  top:75px;
}

.cookie-book .sheet.three:after {
  content:"150g butter, 1/2 cup brown sugar, 1 egg, 1 tsp vanilla extract, 1 3/4 cups flour, 1/2 cup milk chocolate bits, plus 1 tbsp extra";
  position: absolute;
  top:140px;
  width:250px;
  left:0;
  text-align: center;
  line-height: normal;
  font-size:17px;
}

.cookie-book .sheet.four {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/bowl.png);
  background-size: 180px;
  background-repeat: no-repeat;
  background-position: center 70%;
}

.cookie-book .sheet.four:before {
  content:"Preparation:";
  width: 250px;
  text-align:center;
  position: absolute;
  font-size: 20px;
  top:60px;
}

.cookie-book .sheet.five {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
}

.cookie-book .sheet.five:before {
  content:"Preheat oven to 175 degrees C.";
  position: absolute;
  width:200px;
  text-align: center;
  top:70px;
  left:25px;
}

.cookie-book .sheet.five:after {
  content:"Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. Bake for about 10 minutes in the preheated oven, or until edges are nicely browned.";
  position: absolute;
  width:200px;
  text-align: center;
  top:120px;
  left:25px;
}

.cookie-book .sheet.six {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
}

.cookie-book .sheet.six:before {
  content:"Enjoy!";
  font-size: 50px;
  text-align: center;
  width: 250px;
  position: absolute;
  top:40%;
}

.controls {
  text-align:center;
  width:500px;
}
.controls button {
  font-size:20px;
  margin:0 5px;
  padding:5px 20px;
  border: none;
  background-color: #d3d3d3;
  transition: .3s;
  cursor: pointer;
}

.controls button:hover {
  background-color: #b1a7a6;
  color: white;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here.

let sheets = [
    { name: 'one'},
    { name: 'two', id: 'Cookie Book'},
    { name: 'three', id: 'Chocolate chip cookies:'},
    { name: 'four'},
    { name: 'five' },
    { name: 'six' },
];

let ongoingSheet = 0,
changing = false;

$('.controls button').click(function(){
	change($(this).prop('class'));
});

function change(flip) {
if (changing) return;
    
if (flip != 'next' && flip != 'back') return;  
let next_sheet = (flip == 'next'),
    	switch_left_data = next_sheet ? sheets[ongoingSheet + 2] : sheets[ongoingSheet - 2],
      switch_right_data = next_sheet ? sheets[ongoingSheet + 3] : sheets[ongoingSheet - 1];
    
if (!switch_left_data && !switch_right_data) return;
    
changing = true;
let $ong_left = $('.cookie-book .ongoing.left.sheet'),
    $ong_right = $('.cookie-book .ongoing.right.sheet'),
    $switch_left = $('<div class="left sheet ' + flip + '" />'),
    $switch_right = $('<div class="right sheet ' + flip + '" />');
    
    if (switch_left_data) {
        $switch_left.addClass(switch_left_data.name);
        $switch_left.html(switch_left_data.id);
    }
    
    if (switch_right_data) {
        $switch_right.addClass(switch_right_data.name); 
        $switch_right.html(switch_right_data.id);
    }  
    
    $('.cookie-book').prepend($switch_left);
    $('.cookie-book').prepend($switch_right);
    
    $ong_left.addClass('to_remove');
    $ong_right.addClass('to_remove');
    
    setTimeout(function(){
        if (next_sheet) {
            $ong_right.addClass('move');
            $switch_left.addClass('move');
        }
        else {
            $ong_left.addClass('move');
            $switch_right.addClass('move');
        }
        
        $switch_left.addClass('ongoing');
        $switch_right.addClass('ongoing');
        
    }, 100);
    
    setTimeout(function(){
        $('.cookie-book .sheet.to_remove').remove();
        $('.cookie-book .sheet').removeClass('move next back'); 
        changing = false;        
    }, 500);
    
    ongoingSheet = next_sheet ? (ongoingSheet + 2) : (ongoingSheet - 2);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS 2 door Wardrobe (open/ close on hover)

Pure CSS Envelope (Open/Close on click)

CSS Door Animation (Open/Close on Hover)

Categories
Web development

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

To learn how to create the CSS & jQuery (drag and drop) Christmas tree follow the steps below and watch the video tutorial.

Demo:

*to see CSS & jQuery (drag and drop) Christmas tree on the website click here.

Step1.

Add HTML

Create the christmas-decorations container, dropzone and draggable elements (decorations):

<div id="christmas-decorations" class="christmas-decorations">
  <div class="tree">
    <div id="dropzone" class="tree-bottom"></div>
    <div id="dropzone-1"class="tree-middle"></div>
    <div id="dropzone-2" class="tree-top"></div>
  </div>
  <div id="decorations" class="decorations">
    <p class="text">Decorate the Christmas Tree:<p>
    <div id="ball1"></div>
    <div id="tree-star"></div>
    <div id="ball2"></div>
    <div id="ball3"></div>
    <div id="ball4"></div>
    <div id="ball5"></div>
    <div id="ball6"></div>
    <div id="bow"></div>
    <div id="bow2"></div>
    <div id="bow3"></div>
  </div>
  <div id="game-complete"><br/>Merry Christmas!!!</div>
</div>

Step2.

Add CSS

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

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

.christmas-decorations {
  position: relative;
}

Style the Christmas tree (dropzone):

.christmas-decorations:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: rgba(0,0,0,0.5);
  width:200px;
  height:20px;
  top:180px;
  left:-80px;
}

.tree {
  position: relative;
  background-color: #57462a;
  width: 35px;
  height: 70px;
  top:120px;
}

.tree-bottom, .tree-middle {
  position: absolute;
  height:0;
  width:100px;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 100px solid #64a85b;
}

.tree-bottom {
  top:-70px;
  left:-83px;
}

.tree-middle {
  top:-130px;
  left:-83px;
}

.tree-top {
  position: absolute;
  height:0;
  width:0;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  border-bottom: 120px solid #64a85b;
  top:-240px;
  left:-53px;
  z-index:1;
}

.tree-top:before {
  content:"";
  position: absolute;
  border-top: 10px solid rgba(0,0,0,0.5);
  border-right: 5px solid transparent;
  border-left: 105px solid transparent;
  top:120px;
  left:-50px;
  transform: skew(45deg);
}

.tree-top:after {
  content:"";
  position: absolute;
  border-top: 10px solid rgba(0,0,0,0.5);
  border-right: 5px solid transparent;
  border-left: 135px solid transparent;
  top:210px;
  left:-65px;
  transform: skew(45deg);
}
CSS Christmas Tree

Add Christmas decorations (draggable):

.decorations {
  position: absolute;
  width: 250px;
  height: 200px;
  background-color: white;
  left:-500px;
  top:-100px;
  box-shadow: 7px 7px rgba(0,0,0,0.5);
  z-index:3;
}

.text {
  text-align: center;
  font-weight: bold;
  font-family: tahoma;
  text-decoration: underline;
}

#ball1 {
  position: absolute;
  border-radius:50%;
  width:20px;
  height: 20px;
  background-color: #b65964;
  left:20px;
  cursor: pointer;
}

.tree-active {
  filter: brightness(110%);
}

#tree-star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 27px solid transparent;
  border-bottom: 20px solid #cec42f;
  border-left: 27px solid transparent;
  transform: rotate(-35deg);
  top:60px;
  left:50px;
  cursor: pointer;
    }

#tree-star:before {
      border-bottom: 20px solid #cec42f;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

#tree-star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -26.25px;
      width: 0px;
      height: 0px;
      border-right: 27px solid transparent;
      border-bottom: 20px solid #cec42f;
      border-left: 27px solid transparent;
      transform: rotate(-70deg);
      content:'';
}

#ball2 {
  position: absolute;
  border-radius:50%;
  width:22px;
  height: 22px;
  background-color: #7d45e6;
  left:120px;
  top:90px;
  cursor: pointer;
}

#ball3 {
  position: absolute;
  border-radius:50%;
  width:25px;
  height: 25px;
  background-color: #39bfd8;
  left:40px;
  top:120px;
  cursor: pointer;
}

#ball4 {
  position: absolute;
  border-radius:50%;
  width:23px;
  height: 23px;
  background-color: #cec431;
  left:80px;
  top:150px;
  cursor: pointer;
}

#ball5 {
  position: absolute;
  border-radius:50%;
  width:18px;
  height: 18px;
  background-color: #cec431;
  left:180px;
  top:150px;
  cursor: pointer;
}

#ball6 {
  position: absolute;
  border-radius:50%;
  width:25px;
  height: 25px;
  background-color: #b85863;
  left:180px;
  top:100px;
  cursor: pointer;
}

#bow {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 8px solid #7d45e6;
  border-top: 8px solid #7d45e6;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(-90deg);
  left:170px;
  cursor: pointer;
}

#bow2 {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 7px solid #39bfd8;
  border-top: 7px solid #39bfd8;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: rotate(-90deg);
  left:140px;
  top:160px;
  cursor: pointer;
}

#bow3 {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 7px solid #b85863;
  border-top: 7px solid #b85863;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: rotate(-90deg);
  left:100px;
  top:130px;
  cursor: pointer;
}

Style the text:

#game-complete {
  display: none;
  position: absolute;
  font-size:60px;
  font-weight: bold;
  font-family: tahoma;
  color: #ae2012;
  text-shadow: 2px 2px #001219;
  top:-110px;
  left:-165px;
  z-index:4;
  text-align: center;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here. Add libraries below in to the <head> section.

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

and then the following code:

<script>
  var score = 0;

$( function() {
	$("#ball1, #tree-star, #ball2, #ball3, #ball4, #ball5, #ball6, #bow, #bow2, #bow3 ").draggable({ revert: "invalid" });
  $("#dropzone, #dropzone-1, #dropzone-2").droppable({
			accept: "#ball1, #tree-star, #ball2, #ball3, #ball4, #ball5, #ball6, #bow, #bow2, #bow3 ",
      classes: {
        "ui-droppable-active": "tree-active",},
      drop: function() {
	  score++  
	finish();
  },
    });

function finish() {
	if(score === 12)
	{
		$('#game-complete').delay(300).fadeIn("fast");
       }
     }
   }); 
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Tree Animation

CSS Christmas Tree Snow Globe

Roll the dice!

Categories
Web development

CSS & jQuery Stopwatch

CSS & jQuery Stopwatch

To learn how 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 colour 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!

Read also:

Countdown Timer

CSS & JavaScript Digital Clock

JavaScript – Time and date

Categories
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!

Read also:

CSS Zoom on Hover

CSS Image Zoom on Hover

How to create the Comparison Slider?

Categories
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
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!

To read how to add the jQuery code to HTML click here.

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!

Read also:

Countdown Timer

CSS & jQuery Stopwatch

CSS & JavaScript Digital Clock

Categories
Web development

CSS & JavaScript Bee Progress Bar



bee progress bar

Demo:

*to see the Bee progress bar on the website click here.

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

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

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

To move the bee:

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

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

For the progress bar:

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!

Read also:

CSS Background Change Animation – Day & Night

CSS Bubbles Animation

CSS & jQuery Calculator

Categories
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!

Read also:

CSS Steaming Coffee

Simple CSS Birthday Cake

CSS Coffee Express Animation

Categories
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!

Read also:

JS Simple Signature Pad

CSS/JS Eye Follows Mouse Cursor + Blink on Hover

CSS & JavaScript Memory Game