OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <style> |
| 3 #scroller { |
| 4 width: 100px; |
| 5 height: 400px; |
| 6 overflow: scroll; |
| 7 border: 1px solid black; |
| 8 will-change: transform; |
| 9 } |
| 10 |
| 11 .card { |
| 12 width: 20px; |
| 13 height: 20px; |
| 14 position: relative; |
| 15 } |
| 16 |
| 17 #fg { |
| 18 background: papayawhip; |
| 19 } |
| 20 |
| 21 #bg { |
| 22 background: green; |
| 23 left: 10px; |
| 24 } |
| 25 #bg-parallax { |
| 26 background: blue; |
| 27 left: 10px; |
| 28 top: 200px; |
| 29 } |
| 30 </style> |
| 31 |
| 32 <div id="scroller"> |
| 33 <div id="fg" class="card"></div> |
| 34 <div id="bg" class="card"></div> |
| 35 <div id="bg-parallax" class="card"></div> |
| 36 <p> |
| 37 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod |
| 38 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim |
| 39 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
| 40 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate |
| 41 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat |
| 42 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id |
| 43 est laborum. |
| 44 <p> |
| 45 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod |
| 46 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim |
| 47 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
| 48 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate |
| 49 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat |
| 50 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id |
| 51 est laborum. |
| 52 <p> |
| 53 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod |
| 54 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim |
| 55 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
| 56 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate |
| 57 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat |
| 58 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id |
| 59 est laborum. |
| 60 </div> |
| 61 <script src="parallax.js"></script> |
OLD | NEW |