Utilities Bootstrap 5Free+ CSS
CSS marquee effect with animation — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1.7k views43 downloads
gosnippets.com/preview/css-marquee-effect-with-animation
Source Code
1<div class="marquee">
2 <div class="marquee__group">
3 <img src='https://i.imgur.com/SVFdCGY.jpg' alt=''>
4 <img src='https://i.imgur.com/uOzcIsz.jpg' alt=''>
5 <img src='https://i.imgur.com/N6h5l1e.jpg' alt=''>
6 <img src='https://i.imgur.com/SVFdCGY.jpg' alt=''>
7 <img src='https://i.imgur.com/uOzcIsz.jpg' alt=''>
8 </div>
9
10 <div aria-hidden="true" class="marquee__group">
11 <img src='https://i.imgur.com/N6h5l1e.jpg' alt=''>
12 <img src='https://i.imgur.com/SVFdCGY.jpg' alt=''>
13 <img src='https://i.imgur.com/uOzcIsz.jpg' alt=''>
14 <img src='https://i.imgur.com/N6h5l1e.jpg' alt=''>
15 <img src='https://i.imgur.com/SVFdCGY.jpg' alt=''>
16 </div>
17</div>
18
19<div class="marquee marquee--borders" style="--duration: 100s">
20 <div class="marquee__group">
21 <p>GoSnippets</p>
22 <p aria-hidden="true">GoSnippets</p>
23 <p aria-hidden="true">GoSnippets</p>
24 </div>
25
26 <div aria-hidden="true" class="marquee__group">
27 <p>GoSnippets</p>
28 <p>GoSnippets</p>
29 <p>GoSnippets</p>
30 </div>
31</div>
32
33<div class="marquee marquee--reverse">
34 <div class="marquee__group">
35 <img src='https://i.imgur.com/uOzcIsz.jpg' alt=''>
36 <img src='https://i.imgur.com/N6h5l1e.jpg' alt=''>
37 <img src='https://i.imgur.com/SVFdCGY.jpg' alt=''>
38 <img src='https://i.imgur.com/uOzcIsz.jpg' alt=''>
39 <img src='https://i.imgur.com/N6h5l1e.jpg' alt=''>
40 </div>
41
42 <div aria-hidden="true" class="marquee__group">
43 <img src='https://i.imgur.com/SVFdCGY.jpg' alt=''>
44 <img src='https://i.imgur.com/uOzcIsz.jpg' alt=''>
45 <img src='https://i.imgur.com/N6h5l1e.jpg' alt=''>
46 <img src='https://i.imgur.com/SVFdCGY.jpg' alt=''>
47 <img src='https://i.imgur.com/uOzcIsz.jpg' alt=''>
48 </div>
49</div>
50 More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.