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 #thingy { |
| 11 width: 100px; |
| 12 height: 100px; |
| 13 border: 1px solid black; |
| 14 background: papayawhip; |
| 15 position: absolute; |
| 16 top: 10px; |
| 17 left: 200px; |
| 18 } |
| 19 </style> |
| 20 <div id="scroller"> |
| 21 <p> |
| 22 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod |
| 23 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim |
| 24 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
| 25 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate |
| 26 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat |
| 27 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id |
| 28 est laborum. |
| 29 <p> |
| 30 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod |
| 31 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim |
| 32 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
| 33 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate |
| 34 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat |
| 35 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id |
| 36 est laborum. |
| 37 <p> |
| 38 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod |
| 39 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim |
| 40 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
| 41 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate |
| 42 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat |
| 43 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id |
| 44 est laborum. |
| 45 </div> |
| 46 <div id="thingy"></div> |
| 47 <script src="scroll-animation.js"></script> |
OLD | NEW |