Loop Scrolling animation (CSS)
Aug 17, 2022
เป็นสิ่งที่งงๆ แต่ทำได้ซะทีแงง กลัวลืม ขอจดไว้
🌸 ไฟล์รูป width เท่าขนาด DIV นั้นเลย (ใช้800px / 25rem)
🎀🍓 HTML 🎀🍓
<div className= “sky”>
<img className=’sky-1' src=’/images/sky.svg’></img>
<img className=’sky-2' src=’/images/sky.svg’></img>
</div>
🍒 💕 CSS 🍒 💕
.sky {
position: relative;
overflow: hidden;
width : 25rem;✨
.sky-1 {
position: absolute;
left: -100%; ✨
animation: scroll 10s linear infinite;
}
☁️ — — — ☁️ — — — ☁️ — — — ☁️ — — — ☁️
.sky-2 {
position: absolute;
left: -100%; ✨
animation: scroll 10s linear infinite;
animation-delay: 5s; ✨⚡️
}
☁️ — — — ☁️ — — — ☁️ — — — ☁️ — — — ☁️
@keyframes scroll {
0% { transform: translateX(0%);}
100% {transform: translateX(200%);}
}