How to create a Happy New Year Landing Page as a Background? | Web Design
Happy New Year web Page Design

How to create a Happy New Year Landing Page as a Background? | Web Design

Happy New Year: In this lesson we will a create happy new year code. Which we could use it for our website as a landing page. We will use a Particles.js library which is a JavaScript code library.

This lesson will follow the following order:

  • Download and extract Particles.js library.
  • Download the Background image.
  • Create the custom HTML and CSS code.
  • Add our custom code.

Lesson 08

Here is a Video for More Info about Creating Happy New Year:

https://youtu.be/UyvjO_vfwnE

Download and extract Particles.js library:

First of all we need to download Particles.js library from the following link https://github.com/VincentGarreau/particles.js.git. After downloading this package we will need to extract it and copy the “particles.js” file into our coding place. Also you will need to copy the app.js file in the same package at this path /demo/js/app.js.

Download the Background image:

Now we will need to download the background image which we will go to freepik.com and search fro the suitable background, i have used the following background image from freepik.com you could go and download it from this link: https://www.freepik.com/free-vector/glitter-happy-new-year_5702361.htm#page=1&query=happy%20new%20year&position=9

Create the custom HTML and CSS code:

Here we will create an HTML file and add this HTML and CSS code:

The HTML & CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    #sectionHero{
        background-color: #0f0f0f;
    }
    #newYearID{
        background-image: url("1.png");
        overflow: hidden;
        animation: animate 10s linear infinite;
    }
    @keyframes animate {
    0%{
            transform: translateY(-30px);
        }
    25%{
            transform: translateY(30px);
        }
    50%{
            transform: translateY(-30px);
        }
    100%{
            transform: translateY(30px);
        }
    }
</style>
</head>
<body>
<section id="sectionHero">
    <div id="newYearID"></div>
</section>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>

In the previous code we’ve added the the HTML Id that we will need and we’ve added the linking script code.

<section id="sectionHero">
    <div id="newYearID"></div>
</section>
<script src="particles.js"></script>
<script src="app.js"></script>

And at the head area we’ve added the style coding:

<style>
    #sectionHero{
        background-color: #0f0f0f;
    }
    #newYearID{
        background-image: url("1.png");
        overflow: hidden;
        animation: animate 10s linear infinite;
    }
    @keyframes animate {
    0%{
            transform: translateY(-30px);
        }
    25%{
            transform: translateY(30px);
        }
    50%{
            transform: translateY(-30px);
        }
    100%{
            transform: translateY(30px);
        }
    }
</style>

Add our custom code:

Finally we will need to add our Custom Js code to the app.js file that we have copied at the beginning of this post. This Code explained at the previous post at this link:Colored shapes animation post.

This lesson app.js file code :

particlesJS('newYearID',
  
  {
    "particles": {
      "number": {
        "value": 90,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": ['#ff0023','#42ff00','#0822ff','#ffc015','#00ecff']
      },
      "shape": {
        "type": ['circle','star','polygon','triangle'],
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 17,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 150,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 16,
        "direction": "top",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": false,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "config_demo": {
      "hide_card": false,
      "background_color": "#b61924",
      "background_image": "",
      "background_position": "50% 50%",
      "background_repeat": "no-repeat",
      "background_size": "cover"
    }
  }

);

The changes will happen only in these tow places color and shapes which we added an arrays.

The code:

 "color": {
        "value": ['#ff0023','#42ff00','#0822ff','#ffc015','#00ecff']
      },
      "shape": {
        "type": ['circle','star','polygon','triangle'],
        "stroke": {
          "width": 0,
          "color": "#000000"
        },

Download the code from here:

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instagram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967778283416

Leave a Reply