Snow Globe Animation

Hello Coder! Welcome to Codewithshobhit Blog. Today we are going to Create Snow Globe Animation

Snow Globe Animation

Project Folder Structure:

  • Create a file called  index.html  to serve as the main file.

  • Create a file called  style.css  for the CSS code.
  • Create a file called  script.js  for the JavaScript code.

Snow Globe Animation HTML CODE

HTML(PUG) 
.ground
.snowglobe
  .sg-bg
  .grnd-snow
    .snow-surface
  .tree
    .tree-shadow
    .branch-bot
      .branch-bot-snow
      .branch-shadow 
    .branch-mid
      .branch-mid-snow
      .branch-shadow 
    .branch-top
      .branch-top-snow
    .star
    .baubles
  .sm-shadow
  .snowman
    .snowman-bot
    .snowman-top
    .coal
    .carrot
  .falling-snow-wrap
    .falling-snow
      .flakes1
        p *
      .flakes2
        p *
  .sg-fg
  .stand-curved-wrap
    .stand-curved

Explanation Of HTML CODE

  • The HTML structure seems to represent a snow globe with various elements like a tree, snowman, falling snow, etc.
  • The styling is done using SCSS (Sass), a CSS preprocessor.

Snow Globe Animation CSS CODE

CSS(SCSS) 
$snow-col : #dbe8fc;

$sg-size : 400px;
$tree-size : 50px;

@mixin test {
  border:1px solid black;
}

@mixin sg-base {
  width: $sg-size;
  height: $sg-size;
  border-radius:100%;
  position:absolute;
  top:0px;
}
@mixin smaller-base {
  width: $sg-size*0.95;
  height: $sg-size*0.95;
  border-radius:100%; 
  position:absolute;
  top: $sg-size*0.025;
  left: $sg-size*0.025;
}

$zz-size: $tree-size*2;
@mixin snow-pattern {
  background: 
    linear-gradient(135deg, $snow-col 25%, transparent 25%) $zz-size*-0.16 0,
    linear-gradient(225deg, $snow-col 25%, transparent 25%)  $zz-size*-0.16 0,
    linear-gradient(315deg, $snow-col 25%, transparent 25%),
    linear-gradient(45deg, $snow-col 25%, transparent 25%); 
  background-size: $zz-size*0.32 $zz-size*0.32;
  width:100%;
  height:100%;
  position:absolute;
}



body {
  background: black;
  margin:10px 0px 0px 0px;
  padding:0px;
}
.snowglobe {
  width: $sg-size;
  height: $sg-size;
  margin:auto;
  position:relative;
}

.branch-top {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: $tree-size*0.8;
  height: $tree-size*1.5;
  background-color: #62838C;
  position:absolute;
  top: $tree-size*0.1;
  left: $tree-size*0.6;
}
.branch-top-snow {
  @include snow-pattern;
}

.branch-mid {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: $tree-size*1.5;
  height: $tree-size*2.3;
  background-color: #2D4959;
  position:absolute;
  top: $tree-size*0.7;
  left: $tree-size*0.25;
}
.branch-mid-snow {
  @include snow-pattern;
}

.branch-bot {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: $tree-size*2;
  height: $tree-size*2.5;
  background-color: #142833;
  position:absolute;
  top: $tree-size*1.6;
}
.branch-bot-snow {
  @include snow-pattern;
}

.branch-shadow {
  width:100%;
  height:100%;
  position:absolute;
  background: linear-gradient(to bottom, rgba(18, 67, 79, 1) 0%, rgba(255,255,255,0) 100%);
  mix-blend-mode:multiply;
}
  
.tree {
  width:$tree-size*2;
  height:$tree-size*4.1;
  position:relative;
  left: $sg-size*0.5;
  top:  $sg-size*0.15;
  //border:1px solid black;
}

.sg-bg {
  @include sg-base;
  background: rgba(255, 255, 255, 0.5);
}

.sg-fg {
  @include sg-base;
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(246,246,246,0.2) 47%, rgba(237,237,237,0) 100%);
}

.grnd-snow {
  @include smaller-base;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 68%, rgba(240,240,240,1) 68%, rgba(235,239,245,1) 79%, rgba(197,211,232,1) 100%);
}

.snow-surface {
  width:$sg-size*0.89;
  height:$sg-size*0.1;
  background: #fff;
  position:relative;
  top:$sg-size*0.59;
  border-radius:100%;
  margin:auto;
}

$star-size : 20px;
.star {
  width: 0px;
  height: 0px;
  border-right:  $star-size solid transparent;
  border-bottom: $star-size*0.7  solid gold;
  border-left:   $star-size solid transparent;
  transform:    rotate(35deg);
  position:absolute;
  top:0px;
  left: $tree-size*0.6;
}
.star:before {
   border-bottom: $star-size*0.8 solid gold;
   border-left: $star-size*0.3 solid transparent;
   border-right: $star-size*0.3 solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: $star-size*-0.45;
   left: $star-size*-0.65;
   content: '';
   transform: rotate(-35deg);
}
.star:after {
   position: absolute;
   top: $star-size*0.03;
   left: $star-size*-1.05;
   width: 0px;
   height: 0px;
   border-right: $star-size solid transparent;
   border-bottom: $star-size*0.7 solid gold;
   border-left: $star-size solid transparent;
   transform: rotate(-70deg);
   content: '';
}

.falling-snow-wrap {
  overflow:hidden;
  opacity:0.99;
  height:$sg-size*0.65;
  width:$sg-size;
  position:absolute;
  top:0px;
}
.falling-snow {
  @include smaller-base;
  overflow:hidden;
  opacity:0.99; 
}

.flakes1 {   
  width: $sg-size;
  height: $sg-size*2;
  position:absolute;
  top:0px;
  color:#fff;
  opacity: 0.5;
  animation: sfanim linear 30s;
  animation-iteration-count: infinite;
  text-shadow:303px 117px, 32px 89px, 323px 119px, 98px 183px, 126px 235px, 0px 171px, 380px 61px, 269px 17px, 0px 151px, 121px 344px, 229px 136px, 237px 280px, 303px 30px, 211px 314px, 378px 285px, 10px 287px, 93px 345px, 292px 324px, 223px 292px, 156px 160px, 253px 58px, 205px 195px, 145px 106px, 79px 312px, 182px 359px, 279px 99px, 349px 124px, 5px 33px, 216px 147px, 388px 117px, 70px 295px, 149px 318px, 96px 66px, 129px 217px, 138px 218px, 241px 310px, 231px 368px, 18px 327px, 173px 213px, 118px 10px, 246px 208px, 159px 244px, 268px 376px, 167px 262px, 85px 238px, 277px 47px, 386px 192px, 259px 364px, 325px 327px, 279px 201px, 303px 517px, 32px 489px, 323px 519px, 98px 583px, 126px 635px, 0px 571px, 380px 461px, 269px 417px, 0px 551px, 121px 744px, 229px 536px, 237px 680px, 303px 430px, 211px 714px, 378px 685px, 10px 687px, 93px 745px, 292px 724px, 223px 692px, 156px 560px, 253px 458px, 205px 595px, 145px 506px, 79px 712px, 182px 759px, 279px 499px, 349px 524px, 5px 433px, 216px 547px, 388px 517px, 70px 695px, 149px 718px, 96px 466px, 129px 617px, 138px 618px, 241px 710px, 231px 768px, 18px 727px, 173px 613px, 118px 410px, 246px 608px, 159px 644px, 268px 776px, 167px 662px, 85px 638px, 277px 447px, 386px 592px, 259px 764px, 325px 727px, 279px 601px;
}


.flakes2 {  
  width: $sg-size;
  height: $sg-size*2;
  position:absolute;
  top:0px;
  color:#fff;
  animation: sfanim linear 15s;
  animation-iteration-count: infinite;
  text-shadow:375px 485px, 11px 689px, 254px 784px, 5px 686px, 266px 705px, 388px 698px, 180px 707px, 36px 413px, 74px 695px, 238px 690px, 384px 635px, 1px 694px, 45px 538px, 131px 750px, 258px 520px, 157px 705px, 96px 749px, 325px 719px, 132px 688px, 167px 511px, 303px 408px, 340px 620px, 394px 428px, 187px 748px, 217px 624px, 356px 630px, 33px 758px, 238px 762px, 357px 586px, 253px 798px, 68px 786px, 164px 662px, 119px 598px, 221px 557px, 126px 537px, 282px 503px, 11px 455px, 219px 632px, 60px 597px, 41px 529px, 247px 451px, 217px 644px, 304px 400px, 214px 421px, 287px 757px, 76px 404px, 376px 735px, 169px 572px, 245px 790px, 66px 717px, 375px 85px, 11px 289px, 254px 384px, 5px 286px, 266px 305px, 388px 298px, 180px 307px, 36px 13px, 74px 295px, 238px 290px, 384px 235px, 1px 294px, 45px 138px, 131px 350px, 258px 120px, 157px 305px, 96px 349px, 325px 319px, 132px 288px, 167px 111px, 303px 8px, 340px 220px, 394px 28px, 187px 348px, 217px 224px, 356px 230px, 33px 358px, 238px 362px, 357px 186px, 253px 398px, 68px 386px, 164px 262px, 119px 198px, 221px 157px, 126px 137px, 282px 103px, 11px 55px, 219px 232px, 60px 197px, 41px 129px, 247px 51px, 217px 244px, 304px 0px, 214px 21px, 287px 357px, 76px 4px, 376px 335px, 169px 172px, 245px 390px, 66px 317px;
}

@keyframes sfanim {
  0% {transform:  translate(0px,$sg-size*-1);}
  100% {transform:  translate(0px,0px);}
}

.baubles {
  width:$sg-size*0.04;
  height:$sg-size*0.04;
  background-color:rgba(191, 17, 49,1);
  border-radius:100%;
  position:absolute;
  top:$sg-size*0.1;
  left:$sg-size*0.1;
  box-shadow: $sg-size*0.02 $sg-size*0.11 0px 0px rgba(150, 0, 40,1),  $sg-size*-0.02 $sg-size*0.2 0px 0px rgba(206, 0, 55,1),  $sg-size*0.05 $sg-size*0.25 0px 0px rgba(206, 0, 37,1),  $sg-size*-0.06 $sg-size*0.33 0px 0px rgba(191, 17, 49,1),  $sg-size*0.08 $sg-size*0.35 0px 0px rgba(191, 17, 49,1);
}

.tree-shadow {
  width:$tree-size*4;
  height:20px;
  background: radial-gradient(ellipse at center, rgba(13,84,102,1) 0%, rgba(138,174,188,0) 65%, rgba(206,223,235,0) 100%);
  position:absolute;
  bottom:$tree-size*-0.2;
  left:$tree-size*-0.7;
}

.stand-curved {
  height:180px;
  width:500px;
  border-radius:50%;
  border:100px solid #3b31b7;
  position:absolute;
  bottom:0px;
  left:-70px;
}
.stand-curved-wrap {
  width: $sg-size*1.4;
  height: $sg-size/3;
  position:absolute;
  bottom:$sg-size*-0.34;
  margin-left:$sg-size*-0.2;
  position:relative;
  -webkit-clip-path: polygon(30% 10%, 70% 10%, 80% 100%, 20% 100%);
}

.ground {
  width:100%;
  height:150px;
  position:absolute;
  top:$sg-size;
}

.sm-shadow {
  width:$tree-size*2;
  height:20px;
  background: radial-gradient(ellipse at center, rgba(13,84,102,0.4) 0%, rgba(138,174,188,0) 65%, rgba(206,223,235,0) 100%);
  position:absolute;
  bottom:$tree-size*2.5;
  left:$tree-size*1.8;
}

.snowman-bot {
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, $snow-col 100%);
  width: $sg-size*0.15;
  height: $sg-size*0.15;
  border-radius:50%;
  position:absolute;
  bottom:$sg-size*0.33;
  left:$sg-size*0.25;
}

.snowman-top {
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, $snow-col 100%);
  width: $sg-size*0.1;
  height: $sg-size*0.1;
  border-radius:50%;
  position:absolute;
  bottom:$sg-size*0.46;
  left:$sg-size*0.27;
}

.coal {
  width:5px;
  height:5px;
  border-radius:50%;
  position:absolute;
  box-shadow: 120px -10px 0px 0px black, 137px -12px 0px 0px black, 119px 0px 0px 0px black, 125px 2px 0px 0px black, 132px 2px 0px 0px black, 138px -2px 0px 0px black, 130px 15px 0px 0px black, 132px 27px 0px 0px black, 132px 39px 0px 0px black;
}

.carrot {
  width:0px;
  height:0px;
  border-left:20px solid #f98e13;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  position:absolute;
  left:130px;
  top:198px;
}

Explanation Of CSS CODE

SCSS Variables:

  • $snow-col: Represents the color of snow.
  • $sg-size: Represents the size of the snow globe.
  • $tree-size: Represents the size of the tree.

SCSS Mixins:

  1. @mixin test: Defines a mixin named "test" that adds a black border.
  2. @mixin sg-base: Sets basic styles for the snow globe base.
  3. @mixin smaller-base: Similar to sg-base but slightly smaller.
  4. @mixin snow-pattern: Creates a snow pattern background using linear gradients.

Styling:

  1. Various sections of the snow globe (e.g., tree, branches, falling snow) are styled using these mixins and other styles.
  2. The tree is created using three parts (top, mid, bot) with associated snow patterns.
  3. The falling snow is achieved using text shadows with animation.

Keyframes:

  • @keyframes sfanim: Defines the falling snow animation.

  • Explanation:

    • The body background is set to black, creating a night theme.
    • The snow globe is placed in the center of the page.
    • The tree, snowman, falling snow, and other elements are positioned within the snow globe.
    • Gradients and shadows are used to create a realistic appearance for the tree, snowman, and falling snow.
    • The falling snow effect is achieved by using text shadows with a keyframe animation.

    This code seems to create a visually appealing and animated snow globe. If you have specific questions about parts of the code or if there's anything you'd like more clarification on, feel free to ask!

Live Preview Of Snow Globe Animation 

See the Pen Snow Globes by Codewithshobhit (@Codewithshobhit) on CodePen.

Conclusion

the provided code is a Pug (formerly Jade) HTML template coupled with SCSS (Sass) styles to create an animated snow globe. The snow globe consists of various elements, including a tree, snowman, falling snow, and decorative baubles. The structure is organized using mixins and variables to enhance maintainability and readability.

The SCSS variables define crucial aspects such as the color of snow ($snow-col), the size of the snow globe ($sg-size), and the size of the tree ($tree-size). Mixins are used for styling consistency and reusability, with specific mixins defining the base structure of the snow globe, smaller variations, and a snow pattern for certain elements.

The HTML structure, written in Pug, represents the different components of the snow globe, each carefully positioned within the globe. The use of gradients, shadows, and keyframe animations enhances the visual appeal, creating a lifelike representation of a snowy scene. The falling snow effect is particularly notable, achieved through text shadows and a keyframe animation, adding a dynamic and immersive element to the snow globe animation.

Overall, the code showcases a creative implementation of a snow globe animation using Pug for HTML structure and SCSS for styling, resulting in a visually pleasing and festive representation of a winter scene.

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.


Which Code Editor do you use to create those projects?

I am using VS Code Studio.


is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and found it useful, please share it with your friends and follow me on Instagram.

Thanks for reading!

Author: Shobhit 😊