html marquee css,javascript - Creating CSS Marquee CSS/HTML/JS - Stack Overflow

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 :)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值