Categories
CSS Web development

CSS Bubbles

CSS Bubble

I’ve got a lot of emails regarding my tutorial “How to create Bubbles in Photoshop” and I would like to thank you all for warm words! I am really happy to hear that this tutorial helped you with your work! It keeps me motivated. Some of you asked me to prepare the tutorial on how to create Bubbles in CSS, so here we are today! Ta-daaaah! CSS Bubbles tutorial is ready! Please follow the steps below and create awesome bubbles on your web page.

*animation opened in the Firefox browser.
To see the live output of the animation click here.
  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

Create the container and add some bubbles:

<div class="container">
  <div class="bubbles">
    <div class="bubble1"></div>
    <div class="bubble2"></div>
    <div class="bubble3"></div>
    <div class="bubble4"></div>
    <div class="bubble5"></div>
    <div class="bubble6"></div>
    <div class="bubble7"></div>
    <div class="bubble8"></div>
    <div class="bubble9"></div>
    <div class="bubble10"></div>
  </div>
</div>

Step2.

Add CSS

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

body {
  background-color: #00b4d8; 
  overflow-x: hidden;
  height: 100vh;
  
}
.container {
  position: relative;
  z-index: -10;
  top:0;
  
}

Style the bubbles:

.bubbles {
  position: fixed;
  opacity:0.9;
}

.bubble1 {
  position: absolute; 
  width: 100px;
  height: 100px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  animation: up 18s linear infinite;
  top:600px;
  left:1000px;
  
}

.bubble1:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:25px;
  height:50px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(8px);
}

.bubble2 {
  position: absolute; 
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:800px;
  top: 700px;
  animation: up 20s linear infinite;
}

.bubble2:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.6);
  border-radius:50%;
  width:12.5px;
  height:25px;
  left:15px;
  top:7px;
  transform: rotate(25deg);
  filter: blur(8px);
}

.bubble3 {
  position: absolute; 
  width: 80px;
  height: 80px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:1200px;
  top:800px;
  animation: up 25s linear infinite;
}

.bubble3:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:20px;
  height:40px;
  left:15px;
  top:10px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble4 {
  position: absolute; 
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -5px -5px 8px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  animation: up 27s linear infinite;
  left:800px;
  top: 700px;
}

.bubble4:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.8);
  border-radius:50%;
  width:10px;
  height:8px;
  left:7px;
  top:5px;
  transform: rotate(25deg);
  filter: blur(5px);
}

.bubble5 {
  position: absolute; 
  width: 90px;
  height: 90px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:350px;
  top:700px;
  animation: up 23s linear infinite;
}

.bubble5:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:22px;
  height:48px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble6 {
  position: absolute; 
  width: 70px;
  height: 70px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:750px;
  top:700px;
  animation: up 15s linear infinite;
}

.bubble6:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:22px;
  height:48px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble7 {
  position: absolute; 
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:-400px;
  top: 700px;
  animation: up 20s linear infinite;
}

.bubble7:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.6);
  border-radius:50%;
  width:12.5px;
  height:25px;
  left:15px;
  top:7px;
  transform: rotate(25deg);
  filter: blur(8px);
}

.bubble8 {
  position: absolute; 
  width: 80px;
  height: 80px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:-600px;
  top:800px;
  animation: up 8s linear infinite;
}

.bubble8:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:20px;
  height:40px;
  left:15px;
  top:10px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble9 {
  position: absolute; 
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -5px -5px 8px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  animation: up 27s linear infinite;
  left:600px;
  top: 700px;
}

.bubble9:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.8);
  border-radius:50%;
  width:10px;
  height:8px;
  left:7px;
  top:5px;
  transform: rotate(25deg);
  filter: blur(5px);
}

.bubble10 {
  position: absolute; 
  width: 90px;
  height: 90px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:-350px;
  top:700px;
  animation: up 13s linear infinite;
}

.bubble10:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:22px;
  height:48px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(7px);
}

Step3.

Add CSS Animation

@keyframes up {
  100% { transform: translateY(-1000px);} 
}

To see the live output go to lenastanley.com.

Enjoy coding!

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
#SVG Web development

Round text animation on Scroll

Lately, I posted the SVG tutorial, how to move the text on the path (to see the tutorial click here), today I’ll show you another SVG text effect, how to move SVG text on the circle path by mouse scrolling.

animate a text on the circle

Animation:

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

What do you need to do?

  1. Add SVG
  2. Add CSS
  3. Add JavaScript

Step1.

Add SVG

Add an SVG shape (circle), and the text:

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

   <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape" startOffset="500px" id="textPath">Scroll to move a text on the circle.</textPath>
      
    </text>
</svg>

Step2.

Add CSS

Style the text and the circle:

body {
  height: 200vh;  
}

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: fixed;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-150deg);
}

Step3.

Add JavaScript

const textPath = document.querySelector("#textPath");

const a = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", event => {
  let percent = (a[st]||b[st]) / ((a[sh]||b[sh]) - a.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 5) + 500)
});

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

Enjoy coding!

Categories
#SVG Web development

Moving text on an SVG path

Yesterday I posted a tutorial – how to create the text on a path in Adobe Illustrator (you can watch also the video tutorial), so if you want to create a simply SVG text on a path you can take a look at these tutorials, however, if you want to add some animation and move the text on the path follow the steps below 🙂

SVG text on a circle

Example1 – Moving text on a circle:

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

Example2 – Moving text on a heart path:

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

Step1.

Add a SVG path/ shape

In this tutorial we’ll create text on the circle (add a SVG path to the body section, to see more about the SVG path click here.):

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

Step2.

Add CSS/ Style the circle

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: relative;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-120deg);
}

Step3.

Add the text( body section)

  <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape">SVG moving text on the circle.</textPath>

Step4.

Add SVG Animation

  <animate attributeName="font-size" dur="10s" values="8;31" repeatCount="indefinite"></animate>
    </text>
</svg>

To see the live output of the animation click here and here.

Enjoy coding!

Categories
JavaScript Web development

CSS Avatar + Parallax.js

Learn how to create the simply avatar using CSS with Parallax.js. Follow steps below and/or watch the video tutorial.

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

Parallax.js is a simple JavaScript library that adds parallax effects on any images. Each Parallax.js instance needs a container element, the scene. 

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

To create the CSS Avatar with Parallax.js you need to do:

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

Step1.

Add HTML

<div id="content">
  <div id="circle">
    <div id="avatar">
      <div class="hair"></div>
      <div class="ear"></div>
      <div class="face"></div>
      <div class="top"></div>
      <div class="neck"></div>
      <div class="layer head" data-depth="0.3">
      <div class="eye"></div>
      <div class="nose"></div>
      <div class="glasses"></div>
      <div class="smile"></div>
      </div>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the colour, and position of the background, content and the circle.

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

#content {
  position: relative;
  transform-origin: bottom;
}

#circle {
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #b7e4c7;
  z-index:-2;
}

Style the avatar:

#avatar {
  position: absolute;
  left: 30%;
  top: 20%;
}

.hair {
  position: absolute;
  background-color: #5e503f;
  width: 100px;
  height: 125px;
  border-radius: 50px 50px 5px 5px; 
}

.face {
  position: absolute;
  background-color: #e6beae;
  width: 80px;
  height: 70px;
  border-radius: 0px 0px 30px 30px;
  left: 10px;
  top:50px;
}

.neck {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #e0baab;
  border-radius: 0 0 20px 20px;
  top: 118px;
  left:30px;
  
}

.top {
  position: absolute;
  background-color: #f0efeb;
  width: 150px;
  height: 150px;
  top:130px;
  left:-25px;
  border-radius:30px 30px 0 0;
  
}

.head {
  position: absolute;
}

.nose {
  position: absolute;
  width: 14px;
  height: 23px;
  background-color: #d6b0a1;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  left: 43px;
  top: 65px;
}

.eye {
  position: absolute;
  background-color: #333533;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 65px;
  left: 22px;
  z-index:10;
}

.eye:after {
  content:"";
  position: absolute;
  background-color: #333533;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  left: 42px;
  
}
.ear {
  background-color: #e0baab;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius:50%;
  top:55px;
  left:-10px;
  z-index:-1;
}

.ear:after {
  content:"";
  background-color: #e0baab;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius:50%;
  left:90px;
  
}

.glasses {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #001233;
  top: 55px;
  left: 10px;
}

.glasses:before {
  content:"";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #001233;
  left: 45px;
  top:-2px;
}

.glasses:after {
  content:"";
  position: absolute; 
  width: 18px;
  height: 18px;
  border-radius:50%;
  box-shadow: inset 0px 3px 0 #001233;
  left:29.5px;
  top:10px;
}

.smile {
  position: absolute;
  background-color: #333533;
  width: 28px;
  height: 13px;
  border-radius: 0 0 30px 30px;
  top: 95px;
  left:37px;
}

Step3.

Add JavaScript

const avatar = document.getElementById('content');
const parallax = new Parallax(avatar, {
  invertX: false,
  invertY: false,
  limitX: 25,
  limitY: 25,  
});

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

Watch also the video tutorial:

Enjoy coding!

Categories
#SVG JavaScript Web development

Before & After – how to compare two images with JavaScript?

Today you’ll learn how to create a slider that compares two images.

before and after
Do you like this image? Check more images in the store.

Animation(move the slider to compare images):

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

What do you need to do?

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

Step1.

Add HTML

Add your images:

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="https://lenadesign.org/wp-content/uploads/2020/08/makeup.jpg" width="640" height="480">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="https://lenadesign.org/wp-content/uploads/2020/08/no-makeup.jpg" width="640" height="480">
  </div>
</div>

Step2.

Add CSS

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

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

.img-comp-container {
  left:-50px;
  position: relative;
  height: 480px; 
  width: 640px;
  border: 10px solid #e63946;
}

Set the position of the images:

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
}

Style the slider:

.img-comp-slider {
  position: absolute;
  cursor: ew-resize;
  width: 3px;
  height: 480px;
  background-color: white;
  color: white;
}

.img-comp-slider:after {
  content:"";
  position: absolute;
  top: 240px;
  left:-40px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 40px solid #48bfe3;
  border-bottom: 30px solid transparent;  
}

.img-comp-slider:before {
  content:"";
  position: absolute;
  top: 240px;
  left:3px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 40px solid #48bfe3;
  border-bottom: 30px solid transparent;  
  
}

.img-comp-slider:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

Step3.

Add JavaScript

function initComparisons() {
  var x, i;
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    w = img.offsetWidth;
    h = img.offsetHeight;
    img.style.width = (w / 2) + "px";
    
    /*slider:*/
    slider = document.createElement("DIV");
    slider.style.zIndex = "10";
    slider.setAttribute("class", "img-comp-slider");
    img.parentElement.insertBefore(slider, img);
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    slider.addEventListener("mousedown", slideReady);
    window.addEventListener("mouseup", slideFinish);
    slider.addEventListener("touchstart", slideReady);
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      
      e.preventDefault();
      clicked = 1;
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      if (clicked == 0) return false;
      pos = getCursorPos(e)
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      a = img.getBoundingClientRect();
      x = e.pageX - a.left;
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      img.style.width = x + "px";
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

initComparisons();

To see the live output check my Codepen.

Enjoy coding!

Categories
JavaScript Web development

JavaScript Toggle Class

Working as a web developer, you need to often add, remove, and toggle CSS classes based on the user interactions with elements on the web page.

JavaScript Toggle Class

Toggling the class means if there is no class name assigned to the element, then a class name can be assigned to it dynamically.

Toggle between adding and removing a class name from an element with JavaScript!

Example:

Step1.

Add HTML

Toggle between adding a class name to the div element with id=”myDIV” (in this example we use a button to toggle the class name).

<button onclick="myFunction()">Click me</button>

<div id="myDIV">
  This is a DIV element.
</div>

Step2.

Add CSS

Add a class name to toggle:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: lightblue;
  color: red;
  font-size: 25px;
}

Step3.

Add JavaScript

Get the <div> element with id=”myDIV” and toggle between the “mystyle” class:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Output:

This is a DIV element.

Based on the knowledge above I created another example using SVG and JavaScript to toggle elements. To another see the example click here.

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
JavaScript Web development

JS Simple Signature Pad

Create the Signature Pad and export the file as PNG.

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

What do you need to do?

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

Step1.

Add HTML

Create the canvas-wrap:

<div id="canvas-wrap">
<canvas id="canvas"></canvas>   
<div id="buttons">
       <div id="text">Please sign above</div>
       <input type="button" id="download" value="Save as PNG"/>
      <input type="button" id="clear" value="Clear">
    </div>
</div>

Step2.

Add CSS

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

canvas {  
  background-color: #fff;
  border-radius: 15px;
  border: 5px solid black;
  box-shadow: 5px 4px 5px black;
  
}

#canvas-wrap {
  position: relative;
 
}

 #buttons {
        position: absolute;
        top: 370px;
        left: 170px;
        
      }
#buttons > input {
        padding: 10px;
        background-color: #839791;
        color: white;
        display: block-inline;
        margin-top: 5px;
      }

#text {
  position:relative;
  font-weight: bold;
  left: 25px;
}

Step3.

Add JavaScript

To drawing on the canvas:

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

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

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

var isDrawing, lastPoint;

canvas.onmousedown = function(event) {
  isDrawing = true;
  lastPoint = { x: event.clientX, y: event.clientY };
};

canvas.onmousemove = function(event) {
  if (!isDrawing) return;

  ctx.beginPath();
  
  ctx.globalAlpha = 1;
  ctx.moveTo(lastPoint.x, lastPoint.y);
  ctx.lineTo(event.clientX, event.clientY);
  ctx.stroke();
     
  lastPoint = { x: event.clientX, y: event.clientY };
};

canvas.onmouseup = function() {
  isDrawing = false;
};

To clear the canvas:

document.getElementById('clear').addEventListener('click', function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }, false);

To export the file as PNG:

window.onload = function(){
var save = document.getElementById('download');

 save.onclick = function(){
    download(canvas, 'signature.png');
  }

}

function download(canvas, filename) {
  var lnk = document.createElement('a'), e;
  lnk.download = filename;
  lnk.href = canvas.toDataURL("image/png;base64");
  
  if (document.createEvent) {
    e = document.createEvent("MouseEvents");
    e.initMouseEvent("click", true, true, window,
                     0, 0, 0, 0, 0, false, false, false,
                     false, 0, null);

    lnk.dispatchEvent(e);
  } else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
  }
}

To see the live output check my Codepen.

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!