width : 스크롤 영역의 가로 넓이를 설정!
height : 스크롤 영역의 세로 높이를 설정!
scrolldelay : 스크롤 이동 속도를 설정!
bgcolor : 스크롤 영역의 배경 색상을 설정!
하지만 marquee tag는 옛날 것이라는 글을 읽었다.
그래서
<div class="marquee">
<div>
<span>
•FREE SHIPPING ON ORDERS OVER 34€ • 10% DISCOUNT IF YOU SUBSCRIBE
TO THE NEWSLETTER
</span>
<span>
•FREE SHIPPING ON ORDERS OVER 34€ • 10% DISCOUNT IF YOU SUBSCRIBE
TO THE NEWSLETTER
</span>
</div>
</div>
.marquee {
height: 25px;
width: 220px;
margin: 0 40px;
overflow: hidden;
position: absolute;
right: 1%;
top: 100%;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 2s linear infinite;
}
.marquee span {
float: left;
width: 50%;
background: $default-yellow;
}
@keyframes marquee {
0% {
left: 0;
}
100% {
left: -100%;
}
}
@keyframes를 활용하여 텍스트를 좌우로 움직이는 효과를 주었다.