Как сделать так, чтобы этот альтернативный текст прокрутки НЕ выходил за пределы ширины или сторон родительского элемента?

#html #css

Вопрос:

Я пытаюсь заставить текст попеременно прокручиваться взад и вперед в родительском контейнере. Однако текст прокручивается, но с одной проблемой: текст выходит за пределы ширины или сторон родительского контейнера, а затем прокручивается назад. Я хочу, чтобы текст прокручивался слева направо и справа налево, как только он коснется левой и правой границ своих родителей.

Может ли кто-нибудь, пожалуйста, помочь мне внести некоторые изменения в мой приведенный ниже код, чтобы я мог достичь желаемого результата:

 .text_scroll {
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
}

.text_scroll_alt > p {
  width: max-content;
  padding-left: 100%;
  border: 1px solid red;
  animation: scroll_alt 5s linear infinite alternate;
}

@keyframes scroll_alt {
  to {transform: translateX(-100%);}
}

 <div class="text_scroll text_scroll_alt">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

1. Я тоже ищу подходящий ответ, потому что я уже сталкивался с этой проблемой раньше. Затем я использовал фиксированную ширину для родителей и детей, чтобы решить эту проблему.

2. @SatoTakeru фиксированная ширина-не идеальное решение в 2021 году, когда мы все намеревались разрабатывать веб-сайты и для мобильных устройств, но это просто быстрое решение.

Ответ №1:

Для этого вы можете сделать < p > абсолютным и указать левую позицию в ключевом кадре.

Я использовал translateX для вычитания динамической ширины элемента.

 .text_scroll {
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  position:relative;
  min-height:50px
}

.text_scroll_alt > p {
   width: max-content;
   position:absolute;
   border: 1px solid red;
   animation: scroll_alt 5s linear infinite alternate;
}

@keyframes scroll_alt {
    from {transform:translateX(0);left:0;}
    to {transform:translateX(-100%);left:100%}
}

 <div class="text_scroll text_scroll_alt">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

1. Не могли бы вы, пожалуйста, сказать мне, какова логика, лежащая в основе значения 360px, которое вы использовали calc() ?

2. Это ширина вашего элемента <p> Я вычел его ширину из левой позиции, чтобы он не переполнял контейнер.

3. Надеюсь, это прояснит логику, стоящую за этим.

4. Я размышлял о том же, но… как вы узнали, что ширина моего <p> элемента составляет 360 пикселей? Я не вижу никакой статической ширины, написанной для этого элемента в моем коде. Кроме того, что делать, если текст внутри этого элемента увеличивается или уменьшается? Будет ли тогда работать ваша статическая ширина?

5. Привет, я обновил ответ относительно динамической ширины вашего элемента <p>.:)

Ответ №2:

Вот пример. Ссылка взята из https://www.quackit.com/css/codes/marquees/

  .example5 {
     height: 50px;
     overflow: hidden;
     position: relative;
}
 .example5 h3 {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     line-height: 50px;
     text-align: left;
    /* Apply animation to this element */
     -moz-animation: example5 5s linear infinite alternate;
     -webkit-animation: example5 5s linear infinite alternate;
     animation: example5 5s linear infinite alternate;
}
/* Move it (define the animation) */
 @-moz-keyframes example5 {
     0% {
         -moz-transform: translateX(70%);
    }
     100% {
         -moz-transform: translateX(0%);
    }
}
 @-webkit-keyframes example5 {
     0% {
         -webkit-transform: translateX(70%);
    }
     100% {
         -webkit-transform: translateX(0%);
    }
}
 @keyframes example5 {
     0% {
         -moz-transform: translateX(70%);
        /* Firefox bug fix */
         -webkit-transform: translateX(70%);
        /* Firefox bug fix */
         transform: translateX(70%);
    }
     100% {
         -moz-transform: translateX(0%);
        /* Firefox bug fix */
         -webkit-transform: translateX(0%);
        /* Firefox bug fix */
         transform: translateX(0%);
    }
}

 <div class="example5">
  <h3>Bouncing text..</h3>
</div>