| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title></title> |
| </head> |
| <style type="text/css"> |
| .scroller { |
| display: inline-block; |
| border: 2px solid black; |
| height: 100px; |
| width: 100px; |
| overflow: hidden; |
| } |
| .box { |
| background: gray; |
| height: 50px; |
| width: 50px; |
| margin: 0; |
| } |
| .half-shift { |
| transform: translateX(25px); |
| } |
| .full-shift { |
| transform: translateX(50px); |
| } |
| .blue { |
| background-color: #99f; |
| } |
| .green { |
| background-color: #9f9; |
| } |
| </style> |
| <body> |
| <div id="scroller-1" class="scroller"> |
| <div class="box green"></div> |
| <div class="box blue full-shift"></div> |
| </div> |
| <div id="scroller-2" class="scroller"> |
| <div class="box"></div> |
| <div class="box blue"></div> |
| </div> |
| <br> |
| <div id="scroller-3" class="scroller"> |
| <div class="box"></div> |
| <div class="box blue"></div> |
| </div> |
| <div id="scroller-4" class="scroller"> |
| <div class="box"></div> |
| <div class="box green"></div> |
| </div> |
| <br> |
| <div id="scroller-5" class="scroller"> |
| <div class="box blue"></div> |
| <div class="box half-shift green"></div> |
| </div> |
| <div id="scroller-6" class="scroller"> |
| <div class="box"></div> |
| <div class="box green"></div> |
| </div> |
| </body> |
| </html> |
