CODEWITHSUNDEEP
htmlcsscss-animations
gaus shaikh
gaus shaikh

Reputation: 145

How to implement Celebration Confetti animations on ionic 4 page load?

I'm creating ionic 4 app, now i want to add Confetti Animation on page load as well as page contain also display. for example suppose we win game and celebration animations happen on same page.

Upvotes: 0

Views: 1854

Answers (1)

41 72 6c
41 72 6c

Reputation: 1780

you could try out this one: Fireworks

// Create the explosion...
$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $particles {
  $box-shadow: $box-shadow,
               random($width)-$width / 2 + px
               random($height)-$height / 1.2 + px
               hsl(random(360), 100, 50);
  $box-shadow2: $box-shadow2, 0 0 #fff

...

Or that one: Confetti

@for $i from 0 through 150 {
    $w: random(8);
    $l: random(100);
    .confetti-#{$i} 
    {
        width: #{$w}px;
        height: #{$w*0.4}px;
        background-color: nth($colors, random(3));
        top: -10%;
        left: unquote($l+"%");
        opacity: random() + 0.5;
        transform: rotate(#{random()*360}deg);
        animation: drop-#{$i} unquote(4+random()+"s") unquote(random()+"s") infinite;
    }
...

If you want to change the bubble size, there is the following class:

.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;   // that one
    height: 5px;   // that one
    border-radius: 50%;
    box-shadow: $box-shadow2;

-> If you change the width or height the bubbles adapt to your chosen size.

Upvotes: 2

Related Questions