CSS - есть ли лучший способ создать прокручивающийся повторяющийся текст, который появляется и исчезает с самого края поля?
.container {
font-family: sans-serif;
font-size: 30px;
position: relative;
/* border: 1px solid #000; */
width: 90%;
margin: 0 auto;
overflow: hidden;
text-align: center;
margin-top: 10px;
}
.individual {
animation: scroll 500ms linear infinite;
}
@keyframes scroll {
100% {
transform: translateY(100%);
}
}
.overlay-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: none;
outline: 20px solid #fff;
outline-offset: -20px;
}
.overlay-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: none;
z-index: 2;
outline: 2px solid #000;
outline-offset: -20px;
}<div class = "container">
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "overlay-1"></div>
<div class = "overlay-2"></div>
</div>Я пытаюсь понять, как воссоздать эффект, использованный на этом сайте: https://inthecity.strelka.com/en
Это эффект в полях, где слово вроде «конференция» повторяется снова и снова в прокручиваемом списке. Глядя на их исходный код, кажется, что они повторяют одно и то же слово в серии идентичных div, а затем анимируют их в бесконечном цикле с помощью transform: translate. Эта часть была достаточно простой, но было сложнее заставить верхнюю строку войти в поле «вне» поля, точно так же, как нижний текст выходит из поля, если это имеет смысл. Верхняя строка появляется внезапно.
Я решил это с помощью наложенного блока, который имеет контур с отрицательным смещением, который действует как внутренняя маска по краям, а затем еще один блок, чтобы обеспечить границу.
Но мне интересно, есть ли более простой способ решить эту проблему?
Любая помощь или идеи были бы замечательными, спасибо!
Ответы 1
Ваша проблема в этих двух строках:
outline: 20px solid #fff;
outline-offset: -20px;
Я добавил в приведенный ниже фрагмент правильный код.
.container {
font-family: sans-serif;
font-size: 30px;
position: relative;
/* border: 1px solid #000; */
width: 90%;
overflow: hidden;
text-align: center;
margin-top: 10px;
}
.individual {
animation: scroll 1000ms linear infinite;
}
@keyframes scroll {
100% {
transform: translateY(100%);
}
}
.overlay-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: none;
outline: 50px solid #fff;
outline-offset: -30px;
}
.overlay-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: none;
outline: 2px solid #000;
outline-offset: -20px;
}<div class = "container">
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class = "overlay-1"></div>
<div class = "overlay-2"></div>
</div>@ PS10916 Извините за недоразумение, с помощью своего фрагмента я сделал способ сделать переход текста более плавным сверху, как я видел в вашем фрагменте, он просто появляется из ниоткуда, поэтому я изменил его, чтобы сделать его более плавным. - TheCrafters001
Извините, я мог быть неясен в своем первоначальном вопросе - у меня эффект работает так, как задумано в моем фрагменте, мне просто интересно, есть ли лучший способ достичь того же результата. Ваши изменения обрезают текст перед краями поля, что не то, что я ищу. Спасибо, в любом случае!