Happy Earth Day! /lettering.js

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

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

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

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!

Share this: