CODEWITHSUNDEEP
htmlcsssasspug
Ibrahim Noor
Ibrahim Noor

Reputation: 259

How to prevent divs moving when changin window(browser) size?

so I am not really experienced in css. I was looking at a cool animation available at https://codepen.io/YusukeNakaya/pen/boyOYm. The html(pug) part is

// Please typing your favorite word!
- var $text = "HAPPY HALLOWEEN :)"



#ui
  - for (i = 0; i < 40; i++)
    .text #{$text}

and the css(scss) part is as follows:

// Please change your favorite font-size!
$fontSize: 8rem;



body {
  background: rgba(20, 5, 5, 1);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  perspective: 800px;
}

div {
  transform-style: preserve-3d;
}

#ui {
  .text {
    position: absolute;
    font-size: $fontSize;
    color: #fff;
    line-height: $fontSize;
    opacity: 0;
    font-family: 'Anton', sans-serif;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;

    @for $i from 0 through 100 {
      $key: $i + 1;
      &:nth-child(#{$key}) {
        $row: floor($i / 20);
        color: rgba(255 - $key * 2, 50 - $key / 2, $key * 3, 1);
        clip-path: polygon(
          floor($i / 2) * 10% - $row * 100% $row * 50%,
          floor($key / 2) * 10% - $row * 100% ceil($key % 2) * 50% + ($row * 50%),
          ceil($key / 2) * 10% - $row * 100% ($row + 1) * 50%
        );
        transform-origin: random(100) - 50 + floor($i / 2) * 10% - $row * 100%  random(100) - 50 + $row * 50%;
        animation: fly#{$key} 5000ms $i * 40ms cubic-bezier(0.360, 0.100, 0.160, 1.000) infinite alternate;
        
        @keyframes fly#{$key} {
          $initX: random(1000) - 500;
          $initY: random(1000) - 500;
          $initZ: random(1000) - 500;
          $initDepth: random(3000) - 2500;
          0% {
            opacity: 0;
            transform: translate(-50%, -50%) rotateX(#{$initX}deg) rotateY(#{$initY}deg) rotateZ(#{$initZ}deg) translateZ(#{$initDepth}px);
          }
          10% {
            opacity: 0;
            transform: translate(-50%, -50%) rotateX(#{$initX}deg) rotateY(#{$initY}deg) rotateZ(#{$initZ}deg) translateZ(#{$initDepth}px);
          }
          90% {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
          }
          100% {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
          }
        }
      }
    }
  }
}

I want to edit this animation such that when I change screen height, the text doesn't move up or down but remains at the same place(Right now, when I change screen height, the text moves with the window size). I am not quite able to do that on my own. Can anyone please help.

Upvotes: 0

Views: 39

Answers (2)

Mamdlv
Mamdlv

Reputation: 550

Do you mean change screen height as in the size of the browser? If so, what you're looking for is web responsiveness in the form of media queries. Media queries will allow you to adjust what appears and where on your screen as the size of your browser changes or if you are viewing your page on a different/smaller device. To get a greater understanding of media queries take a look at this page...

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Upvotes: 0

Christian Buchwald
Christian Buchwald

Reputation: 570

Try to add the following css properties to the div:

position: absolute;
top: 100px;
left: 100px

Then it should always be at the position 100,100

Upvotes: 1

Related Questions