I need to create a marquee with CSS (JS okay). I have a code now but it cuts the text off and does not allow the whole phrase to be shown. I want it to look like the one on top here: https://www.balenciaga.com/us but without pause on hover (and without the pause button). I'm a designer and just a rookie coder so this is kind of a whole new world to me but I appreciate all the help I can get. The problem I have with my code is that it doesn't allow the whole text to be shown, neither is it infinite where the text is always visible. I want it to be on a loop and always visible like on the link above.
My code now:
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h5 {
font-size: 1em;
color: black;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 8s linear infinite;
-webkit-animation: example1 8s linear infinite;
animation: example1 8s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Thanks in advance :)