Added Scroll Reveal Effect to the main website

[sambitsingha]

Fixes #174

The website , when scrolled , reveals it's elements one by one in a systematic way.

How to add classes to this effect

ScrollReveal({
    reset: true,
    distance: "40px",
    duration: 2000,
});

ScrollReveal().reveal(".banner__title,.heading,.social,.footerTitle", {
    delay: 200,
    origin: "top",
});
ScrollReveal().reveal(".banner__text,.cards__item", {
    delay: 300,
    origin: "top",
    distance: "50px",
});

Here , the rules of the effect are specified such as delay , distance , origin and so on. We have to mention the class name inside the ScrollReveal().reveal(" { enter class name }",) part.

For cusstomisation of the rules, simply copy this section and paste in the next line and modify the rules according, along with different classnames ( it is reccommended not to have different rules for same element. )

A clip of the effect

https://github.com/shrey141102/Javascript-projects/assets/110420002/eb6529de-dc6f-4f72-8bd8-57d77f8dd6d2

Added a feature. I am open to any changes if needed. Thank you :)

[sambitsingha]

@shrey141102 Check this out

[shrey141102]

looks nice 👍🏻