jQuery / JavaScript animated weather cards: Sunny, Snow, Windy, Rain, and Storms

Creating weather cards for your websites

In this tutorial, I am going to share an awesome jQuery based solution for creating the animated weather cards.

You may switch among the sunny, snow, windy, rain and storm cards as using this nice plug-in. It uses SVG figures and jQuery code for creating animations. For different weather cards, it shows different light-weight animations e.g. if it is snow card then you may see snowfall animation. For windy weather, the leaves are animating from left to right. Similarly, for sunny weather, it displays the sun with nice sun-rays in an animated way.

See the following section for a live demo and how to set up this nice weather card on your website.

A demo of animated weather card based on jQuery

Click the following link or image below for seeing the live demo of weather cards with animated states. Just above the main weather card, you may see smaller icons for switching to different states like sunny, windy, snow etc.

jQuery weather card

See online demo and code

The CSS used for this demo:

<style>

@import "https://fonts.googleapis.com/css?family=Lato:300";

@import "https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css";

html, body, .background {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  font-family: 'Lato', sans-serif;

}

 

html {

  background: #fff;

}

 

body {

  background: #eee;

  background: -webkit-linear-gradient(bottom, rgba(0, 0, 200, 0.2), rgba(0, 0, 200, 0));

  background: linear-gradient(0deg, rgba(0, 0, 200, 0.2), rgba(0, 0, 200, 0));

}

 

.background {

  background: #eee;

  background: -webkit-linear-gradient(330deg, rgba(50, 150, 100, 0.2), rgba(0, 0, 100, 0));

  background: linear-gradient(120deg, rgba(50, 150, 100, 0.2), rgba(0, 0, 100, 0));

}

 

.container {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  margin: 0;

  padding: 0;

  height: 100%;

  width: 100%;

  overflow: auto;

  position: relative;

  background: #eee;

  background: -webkit-linear-gradient(210deg, rgba(150, 50, 50, 0.3), rgba(0, 0, 200, 0));

  background: linear-gradient(240deg, rgba(150, 50, 50, 0.3), rgba(0, 0, 200, 0));

}

 

nav ul {

  margin: 20px 20px 0 20px;

  list-style-type: none;

  padding: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-direction: row;

          flex-direction: row;

}

nav li a {

  display: block;

  width: 50px;

  text-align: center;

  color: #aaa;

  cursor: pointer;

}

nav li a:hover {

  color: #444;

}

nav li a.active {

  color: #4444ff;

}

 

#card {

  box-shadow: 9px 7px 40px -6px rgba(0, 0, 0, 0.25);

  overflow: hidden;

  width: 300px;

  padding: 0;

  height: 400px;

  min-height: 300px;

  margin: 20px;

  border-radius: 5px;

  position: relative;

}

#card .details {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  padding: 16px 20px;

  color: #888;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-direction: row;

          flex-direction: row;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  -webkit-transition: color 2s ease;

  transition: color 2s ease;

}

.thunder #card .details {

  color: #ddd;

}

#card .details .right {

  text-align: right;

}

#card .details #date {

  margin: 4px 0;

}

#card .details #summary {

  font-weight: 600;

  font-size: 22px;

}

#card .details .temp {

  font-size: 60px;

  line-height: 60px;

}

#card .details .temp span {

  font-size: 18px;

  line-height: 30px;

  vertical-align: top;

  margin-left: 5px;

}

 

.weather {

  background-color: #DAE3FD;

  -webkit-transition: background-color 2s ease;

  transition: background-color 2s ease;

}

.thunder .weather {

  background-color: #9FA4AD;

}

.rain .weather {

  background-color: #D8D8D8;

}

.sun .weather {

  background-color: #ccccff;

}

.weather #inner {

  background-color: white;

  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);

}

.weather .cloud {

  -webkit-transition: fill 2s ease;

  transition: fill 2s ease;

}

.weather #cloud1 {

  fill: #efefef;

}

.thunder .weather #cloud1 {

  fill: #9FA4AD;

}

.weather #cloud2 {

  fill: #E6E6E6;

}

.thunder .weather #cloud2 {

  fill: #8B8E98;

}

.weather #cloud3 {

  fill: #D5D5D5;

}

.thunder .weather #cloud3 {

  fill: #7B7988;

}

 

#outer, #back {

  position: fixed;

  pointer-events: none;

}

 

</style>

 

The code also includes the markup and jQuery that you may get from the demo page’s code section.

Usage of weather cards

You may use these weather cards for showing actual weather updates in your website. Alternatively, you may display this beautiful and lightweight cards for showing the certain state of a situation. For example, in SEO updates, the “SEO weather” is displayed in mozcast website. If there is some update like some major Google panda, penguin or other quality updates, the weather may be displayed as raining or windy.

Similarly, you may display this card for high changes in the stock exchange or whatever the case may be.

Dependencies for running this weather card

You need to include the jQuery library, snap.svg-min.js and TweenMax.min.js files. The CDN links for these are given below:

<script src=”https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js”></script>

Get the complete code from the demo page.

 

Credit link: steveg3003