Happy-Diwali-Card-Design-Using-Html-Css-And-Gsap

Happy Diwali Card Animation Using Html, Css And Gsap

Card design using html and css involves creating a container element with desired dimensions, which will hold the content of the card. Css is used to style the card's layout, including the positioning of elements such as an image, link and text. Apart from that, Css is defining visual stylings, such as background colors, borders, and fonts. We are using GSAP (GreenSock Animation Platform) to add interactive animation effects to the card, such as hover states or transitions. You can visit our dedicated playlist on cards like profile cards, rating cards, comments, products etc.

There are a few basic steps that we are going to follow to design this card:

Use Html to structure the content and layout of the card.
Use Css to style and customize the appearance of the card, including fonts, background, colors, responsive design etc.
Use the GSAP library to add interactive animation and transitions to the card.
Consider incorporating images or icons to enhance the visual design of the card.
Use clear, concise messaging and layout to ensure that important information is easy to read and understand.

For more gsap animations you can follow the gsap playlist.

You can read more about web development from this playlist.

01. HTML
02. CSS
03. Script
04. Output
05. Youtube Video
06. Source Code

HTML:

Let's start with the boilerplate of html document which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Happy Diwali Card Animation | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Body Content 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Now let's go to script that we are going to include in this html file to show that animation. You can download all script file from this github link.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.textillate.js"></script>
<script src="jquery.lettering.js"></script>

Basic html structure and all dependencies are included in html document, It's time to write html code which is given below.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="animate.css">
    <title>Happy Diwali Wishes Card Design | Rustcode</title>
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" />
  </head>
<body>

<div class="container">
  <div class="lamp-container">
    <div class="lamp"></div>
    <p>Shine like sparkles, glow like candles and burn all the negativity like crackles. Wish you all a very lovely & cheerful Diwali.</p>
    <h2>Happy Diwali</h2>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.textillate.js"></script>
<script src="jquery.lettering.js"></script>
<script src="script.js"></script>
</body>
</html>

Output:

Read Also:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html. body{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  height: 100vh;
  background: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p, h2{
  font-family: "Poppins", sans-serif;
  text-align: center;
  font-size: 18px;
  color: whitesmoke;
  font-style: italic;
  line-height: 1.6;
  font-weight: 500;
  margin-top: 30px;
}

h2{
  font-size: 32px;
  color: #E24A3B;
  margin-top: 30px;
  font-family: Pacifico;
}

.lamp-container{
  width: 350px;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #2C2825;
  border-radius: 4px;
  padding: 24px;
  cursor: pointer;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, 
  rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 
  rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}


.lamp{
  position: relative;
  width: 180px;
  height: 80px;
  background: #E24A3B;
  margin-top: 40px;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}

.lamp::before{
  content: "";
  position: absolute;
  top: -20px;
  width: 100%;
  height: 40px;
  background: whitesmoke;
  border-radius: 50%;
  border: 10px solid #E24A3B;
  box-sizing: border-box;
}

.lamp::after{
  content: "";
  position: absolute;
  top: calc(-50% - 10px);
  left: 50%;
  height: 50px;
  width: 20px;
  background: #FFF;
  border-radius: 50%;
  filter: blur(5px);
  transform-origin: bottom;
  box-shadow:  0 0 0 5px #eff000, 0 0 0 10px rgba(255,255,255,.2);
  animation: flame 2.5s linear infinite;
}

@keyframes flame {
  0%{
    transform: translateX(-50%) scaleY(1.4);
  }
  50%{
    transform: translateX(-50%) scaleY(1.1);
  }
  75%{
    transform: translateX(-50%) scaleY(1.5);
  }
  100%{
    transform: translateX(-50%) scaleY(1);
  }
}

Output:

Read Also:

SCRIPT:

$('p').textillate({
  in:{
    effect: "fadeInUp",
    delayScale: 0.2
  }
});

$('h2').textillate({
  in:{
    effect: "fadeInUp",
    delayScale: 2.5
  }
});

TweenMax.from(".lamp", 2, {
  delay: 0.18,
  y: 100,
  ease: Expo.easeInOut,
  opacity: 0
});

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Happy Diwali Card Animation Using Html, Css And Gsap", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Read Also:

Archive

Happy Diwali Card Animation | Html, Css And Gsap

Happy Diwali Card Animation Using Html, Css And Gsap

Table Of Contents

HTML:

CSS:

SCRIPT:

Output:

Youtube Video:

Source Code:

Comments

Post a Comment