абсолютная позиция css, анимированная скрытым переполнением

ProgramBox

абсолютная позиция css, анимированная скрытым переполнением

Post author:admin
Запись опубликована:25 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть анимированный div с идентификатором shooting star :

мой html:

 <div id="sky">
    <span id="shootingstar"></span>
    <div id="allstars"></div>
</div>

 .shootingstar {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    transform-origin: 100% 0;
    animation-iteration-count: 1;
    opacity: 0;
}


.shootingstar-animation-right {
    animation: shootingstar-right-down ease-out;
}


.shootingstar-animation-left {
    animation: shootingstar-left-down ease-out;
}

.shootingstar-animation-right:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-45deg) translate3d(1px, 2px, 0);
    transform-origin: 0% 100%;
}

.shootingstar-animation-left:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-135deg) translate3d(1px, 5px, 0);
    transform-origin: 0% 100%;
}


@-webkit-keyframes shootingstar-right-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
    }
}


@-webkit-keyframes shootingstar-left-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(300px, 300px, 0);
    }
}

с помощью моего js-файла я клонирую элемент и делаю произвольную вершину и ширину, чтобы на небе было несколько падающих звезд:

 var sky = document.getElementById('sky')

function createShootingStar () {
        var time = Math.floor(Math.random() * (1000 - 800)   800) / 1000
        var finalTime = time.toFixed(2)
        var random = Math.round(Math.random())

        var tx = Math.floor(Math.random() * finalW)
        var ty = Math.random() * (finalH * 0.25 - 0)   0

        var element = document.getElementById('shootingstar')
        var cln = element.cloneNode(true)
        cln.classList.add('shootingstar')
        random == 1
          ? cln.classList.add('shootingstar-animation-right')
          : cln.classList.add('shootingstar-animation-left')
        cln.style.animationDuration = finalTime   's'
        cln.style.right = tx   'px'
        cln.style.top = ty    'px'
        sky.appendChild(cln)
        setTimeout(function () {
          sky.removeChild(cln)
        }, 3000)
}

setInterval(createShootingStar, 1000)

проблема в том, что иногда моя падающая звезда запускается или заканчивается при переполнении (и это то, что я хочу), но активируется горизонтальная полоса прокрутки, и я хочу это предотвратить.

Я хочу сделать все звезды, которых нет на экране, скрытыми, но overflow: hidden; это не работает.

РЕДАКТИРОВАТЬ: это происходит с мобильным измерением

1. Вы добавляете позицию относительного родителя класса shootingstar?

2. @RayeesAC нет, я должен?

3. пожалуйста, поделитесь своими кодами во фрагменте для лучшего понимания

4. @MijanurRahaman Я отредактировал свой вопрос, добавив больше кода

5. @samuel что такое finalH и finalW

Ответ №1:

Я получал ошибки, касающиеся finalH и finalW являющиеся undefined . Таким образом, им задана случайная начальная позиция. Применяется overflow: hidden к небу, и вы можете увидеть результат. Мне очень нравится эффект и тот факт, что падающие звезды не приходят только с одного направления, и, кроме того, тот факт, что не все они растворяются внутри окна просмотра.

 var sky = document.getElementById('sky')

function createShootingStar() {
  var finalW = Math.random() * window.outerWidth;
  var finalH = Math.random() * window.outerHeight;
  var time = Math.floor(Math.random() * (1000 - 800)   800) / 1000
  var finalTime = time.toFixed(2)
  var random = Math.round(Math.random())

  var tx = Math.floor(Math.random() * finalW)
  var ty = Math.random() * (finalH * 0.25 - 0)   0

  var element = document.getElementById('shootingstar')
  var cln = element.cloneNode(true)
  cln.classList.add('shootingstar')
  random == 1 ?
    cln.classList.add('shootingstar-animation-right') :
    cln.classList.add('shootingstar-animation-left')
  cln.style.animationDuration = finalTime   's'
  cln.style.right = tx   'px'
  cln.style.top = ty   'px'
  sky.appendChild(cln)
  setTimeout(function() {
    sky.removeChild(cln)
  }, 3000)
}

setInterval(createShootingStar, 1000)

 .shootingstar {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  transform-origin: 100% 0;
  animation-iteration-count: 1;
  opacity: 0;
}

#sky {
  background-color: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shootingstar-animation-right {
  animation: shootingstar-right-down ease-out;
}

.shootingstar-animation-left {
  animation: shootingstar-left-down ease-out;
}

.shootingstar-animation-right:after {
  content: '';
  position: absolute;
  border: 2px solid #f00;
  border-width: 2px 150px 2px 150px;
  border-color: transparent transparent transparent #fff;
  transform: rotate(-45deg) translate3d(1px, 2px, 0);
  transform-origin: 0% 100%;
}

.shootingstar-animation-left:after {
  content: '';
  position: absolute;
  border: 2px solid #f00;
  border-width: 2px 150px 2px 150px;
  border-color: transparent transparent transparent #fff;
  transform: rotate(-135deg) translate3d(1px, 5px, 0);
  transform-origin: 0% 100%;
}

@-webkit-keyframes shootingstar-right-down {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
  }
}

@-webkit-keyframes shootingstar-left-down {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(300px, 300px, 0);
  }
}

 <div id="sky">
  <span id="shootingstar"></span>
  <div id="allstars"></div>
</div>

1. спасибо, я копирую ваш css sky, и просто исправил изменение на absolute, потому что мне это нужно, и это работает отлично!

2. @samuel классный эффект, мне он очень понравился. Это то, что вы могли бы использовать во многих анимациях во время Рождества 🙂

Ответ №2:

 var sky = document.getElementById('sky');

    function createShootingStar () {
          var finalW = window.outerWidth;
          var finalH = window.outerHeight;
          var time = Math.floor(Math.random() * (1000 - 800)   800) / 1000;
          var finalTime = time.toFixed(2);
          var random = Math.round(Math.random());

          var tx = Math.round(Math.random() * finalW);
          var ty = Math.round(Math.random() * (finalH * 0.25 - 0)   0);

          var element = document.getElementById('shootingstar');
          var cln = element.cloneNode(true);
          cln.classList.add('shootingstar');
          random == 1 ? cln.classList.add('shootingstar-animation-right') : cln.classList.add('shootingstar-animation-left');
          cln.style.animationDuration = finalTime   's';
          cln.style.right = tx   'px';
          cln.style.top = ty    'px';
          sky.appendChild(cln);
          setTimeout(function () {
            sky.removeChild(cln);
          }, 3000);
    }

    setInterval(createShootingStar, 1000);

 body {
  background-color: #000;
  overflow:hidden;
}
.shootingstar {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    transform-origin: 100% 0;
    animation-iteration-count: 1;
    opacity: 0;
}


.shootingstar-animation-right {
    animation: shootingstar-right-down ease-out;
}


.shootingstar-animation-left {
    animation: shootingstar-left-down ease-out;
}

.shootingstar-animation-right:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-45deg) translate3d(1px, 2px, 0);
    transform-origin: 0% 100%;
}

.shootingstar-animation-left:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-135deg) translate3d(1px, 5px, 0);
    transform-origin: 0% 100%;
}


@-webkit-keyframes shootingstar-right-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
    }
}


@-webkit-keyframes shootingstar-left-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(150px, 150px, 0);
    }
}

 <div id="sky">
    <span id="shootingstar"></span>
    <div id="allstars"></div>
</div>

Для меня это работает нормально.

Ответ №3:

Я бы попробовал применить overflow: hidden к sky div.