How to lock the scroll option to not expend when new element is added? (without overflow: hidden)

user_14817835 0
Viewed 48

I've found this cool firework CSS that I want to use - https://codepen.io/yshlin/pen/ylDEk

CSS:

body {
      margin:0;
      padding:0;
      background: #000;
      overflow: hidden;
    }

$particles: 50;
$width: 500;
$height: 500;

// 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
}
@mixin keyframes ($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }

    @-moz-keyframes #{$animationName} {
        @content;
    }

    @-o-keyframes #{$animationName} {
        @content;
    }

    @-ms-keyframes #{$animationName} {
        @content;
    }

    @keyframes #{$animationName} {
        @content;
    }
}

@mixin animation-delay ($settings) {
    -moz-animation-delay: $settings;
    -webkit-animation-delay: $settings;
    -o-animation-delay: $settings;
    -ms-animation-delay: $settings;
    animation-delay: $settings;
}

@mixin animation-duration ($settings) {
    -moz-animation-duration: $settings;
    -webkit-animation-duration: $settings;
    -o-animation-duration: $settings;
    -ms-animation-duration: $settings;
    animation-duration: $settings;
}

@mixin animation ($settings) {
    -moz-animation: $settings;
    -webkit-animation: $settings;
    -o-animation: $settings;
    -ms-animation: $settings;
    animation: $settings;
}

@mixin transform ($settings) {
    transform: $settings;
    -moz-transform: $settings;
    -webkit-transform: $settings;
    -o-transform: $settings;
    -ms-transform: $settings;
}



.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: $box-shadow2;
  @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
}
    
.pyro > .after {
  @include animation-delay((1.25s, 1.25s, 1.25s));
  @include animation-duration((1.25s, 1.25s, 6.25s));
}
        
@include keyframes(bang) {
  to {
    box-shadow:$box-shadow;
  }
}
    
@include keyframes(gravity)  {
  to {
    @include transform(translateY(200px));
    opacity: 0;
  }
}
    
@include keyframes(position) {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {  
    margin-top: 20%;
    margin-left: 70%
  }
  60%, 79.9% {  
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {  
    margin-top: 30%;
    margin-left: 80%;
  }
}
<div class="pyro">
  <div class="before"></div>
  <div class="after"></div>
</div>
The problem is that if I remove the "overflow: hidden" then the scrollbar jumps in and out and mess up the whole look of it. And even if I take the other approach and do "overflow: scroll" to always show it it's again getting messed up when it tries to expand and then shrink.

So is there a way to "lock the Y-Axis" size or to put the fireworks "out of the flow" and not allow them to expand the view?

css html javascript
2 Answers

This snippet tries to simplify things, it's boiled the CSS down to pure CSS (no SCSS) and pre fixes removed to make it easier to see what is going on. It also removed the two inner divs, replacing them with pseudo elements on pyro. That way the class can be used on any div to give a firework background.

The div is given absolute positioning and overflow is hidden. This seems to do the trick.

body {
  margin: 0;
  padding: 0;
  background: #000;
}
.pyro, .pyro::before, .pyro::after {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.pyro {
  background: black;
  width: 100vw;
  height: 100vh;
}

.pyro::before, .pyro::after {
  content: '';
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro::after {
  overflow-y: hidden;
  animation-delay: 1.25s, 1.25s, 1.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@keyframes bang {
  to {
    box-shadow: 64px -324.6666666667px #ff000d, 185px -323.6666666667px #e1ff00, 238px -411.6666666667px #00ff0d, 55px -50.6666666667px #00ffb3, 113px 74.3333333333px #bb00ff, -72px -118.6666666667px #ff0037, -12px -63.6666666667px #ff00d0, -141px 11.3333333333px #00ff48, -155px -71.6666666667px #eaff00, -52px -22.6666666667px #0004ff, -178px -365.6666666667px #2fff00, -82px -307.6666666667px #00ff73, 224px -107.6666666667px #ffbb00, -200px -346.6666666667px #f200ff, 114px -182.6666666667px #ff00a6, -184px -307.6666666667px #006fff, -213px -413.6666666667px #ff2600, 103px -256.6666666667px #ff0015, -190px -266.6666666667px #ff00ee, 22px -169.6666666667px #ff002f, 87px -411.6666666667px #48ff00, -238px -200.6666666667px #ff0073, 242px 46.3333333333px #fb00ff, -119px 72.3333333333px #eaff00, -222px -197.6666666667px #00ff33, -137px -360.6666666667px #ff00f2, 215px -274.6666666667px #ff9100, -16px -384.6666666667px #0062ff, 208px -107.6666666667px #ff0d00, -232px -333.6666666667px #00d0ff, -150px -293.6666666667px #00ff3c, 170px -144.6666666667px #26ff00, -184px 60.3333333333px #aaff00, 37px -229.6666666667px #ff0044, -116px -368.6666666667px #ffaa00, 66px -171.6666666667px #33ff00, 201px 43.3333333333px #ff3c00, 45px 9.3333333333px #00ff51, -10px 76.3333333333px #0077ff, 134px 31.3333333333px #ff00d0, -204px 41.3333333333px #bb00ff, -94px -231.6666666667px #aeff00, -2px 57.3333333333px #f700ff, -213px -180.6666666667px #ff0055, 198px -348.6666666667px #6fff00, 43px -351.6666666667px #c800ff, -89px 9.3333333333px #b300ff, 31px 77.3333333333px #ff0059, -194px -258.6666666667px #00ff4d, -213px -265.6666666667px #15ff00, -249px -322.6666666667px #002bff;
  }
}

@keyframes gravity {
  to {
    transform: translateY(200px);
    opacity: 0;
  }
}

@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
<div class="pyro"></div>

user_108674540

On this specific example changing position to position: fixed will fix the problem. But I leave the question open to see if in general, it's possible to "lock" the Y-Axis to its initial value.

user_148178350
Related