Created
October 29, 2014 14:33
-
-
Save tkafka/dc47bd89fbbd15a971bc to your computer and use it in GitHub Desktop.
Native-like crude touch sliding panel with zepto + velocity.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no" /> | |
| <title>scroll and touchmove - jsFiddle demo</title> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script> | |
| <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script> | |
| <!-- | |
| https://gist.githubusercontent.com/tkafka/1bccde7e15588521f614/raw/aedc9a1d7e12127499e40da26df95839956d41ca/zepto-add-innersize.js | |
| + | |
| https://rawgit.com/ | |
| = | |
| --> | |
| <script type="text/javascript" src="https://cdn.rawgit.com/tkafka/1bccde7e15588521f614/raw/aedc9a1d7e12127499e40da26df95839956d41ca/zepto-add-innersize.js"></script> | |
| <style type="text/css"> | |
| html, | |
| body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| font-family: sans-serif; | |
| font-size: 120%; | |
| font: 17px -apple-system-font; | |
| line-height: 150%; | |
| } | |
| h1, h2 { | |
| margin-top: 0; | |
| font: 34px -apple-system-font; | |
| font-weight: 100; | |
| } | |
| #frame { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| #wrap { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| #content { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 4em; | |
| right: 0; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; | |
| padding: 2em; | |
| background: #fff; | |
| /*-webkit-transform: translate3d(0,0,0);*/ | |
| } | |
| a.btn { | |
| display: inline-block; | |
| border-radius: 2em; | |
| padding: 1em 2em; | |
| border: 1px solid rgb(0,122,255); | |
| color: rgb(0,122,255); | |
| text-transform: uppercase; | |
| } | |
| .extra { | |
| /* display: none; */ | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| //<![CDATA[ | |
| window.onload = function() { | |
| $(function() { | |
| var $wrap = $('#wrap'); | |
| var $content = $('#content'); | |
| var touchstartPos = null, | |
| offset = null; | |
| var pxPerSX = 0; | |
| var animationInProgress = false; | |
| var hidden = false; | |
| var type = null; | |
| afterShow(); | |
| $wrap.on('touchstart', function(e) { | |
| if (e.target == $wrap[0]) { | |
| console.log('wrap', hidden); | |
| if (hidden) { | |
| show(); | |
| } else { | |
| hide(); | |
| } | |
| } else { | |
| // start handling this touch | |
| touchstartPos = { | |
| x: e.touches[0].screenX, | |
| y: e.touches[0].screenY, | |
| t: new Date() | |
| }; | |
| } | |
| }); | |
| $wrap.on('touchmove', function(e) { | |
| if (animationInProgress || !touchstartPos) { | |
| e.preventDefault(); | |
| return; | |
| } | |
| offset = { | |
| x: e.touches[0].screenX - touchstartPos.x, | |
| y: e.touches[0].screenY - touchstartPos.y, | |
| t: new Date() - touchstartPos.t | |
| }; | |
| pxPerSX = offset.x / (offset.t / 1000) | |
| // console.log('offset', offset.x, offset.y); | |
| if (type == null && euclid(offset.x, offset.y) > 32) { | |
| if (Math.abs(offset.x) > Math.abs(offset.y)) { | |
| type = 'x'; | |
| } else { | |
| type = 'y'; | |
| } | |
| // console.log('type', type); | |
| } | |
| if (type == 'x') { | |
| $content.velocity({ | |
| translateX: Math.max(0, offset.x) | |
| }, { | |
| duration: 0 | |
| }); | |
| e.preventDefault(); | |
| } | |
| // $content.css('-webkit-transform', 'translate3d(' + offset.x + 'px, 0, 0)'); | |
| }); | |
| $wrap.on('touchend', function(e) { | |
| if (touchstartPos && type == 'x') { | |
| // offset.x - more like angle | |
| if (pxPerSX > 0 && offset && offset.x > 32) { | |
| hide(); | |
| } else { | |
| show(); | |
| } | |
| } | |
| touchstartPos = null; | |
| offset = null; | |
| type = null; | |
| ignoreRestOfTouch = false; | |
| }); | |
| function show() { | |
| $content.velocity({ | |
| translateX: 0 | |
| }, { | |
| duration: 200, | |
| complete: afterShow | |
| }); | |
| } | |
| function hide() { | |
| $content.velocity({ | |
| translateX: $content.width() | |
| }, { | |
| duration: 200, | |
| complete: afterHide | |
| }); | |
| } | |
| function afterShow() { | |
| hidden = false; | |
| // $content.css('-webkit-overflow-scrolling', 'touch'); | |
| } | |
| function afterHide() { | |
| hidden = true; | |
| // $content.css('-webkit-overflow-scrolling', 'auto'); | |
| } | |
| // ---- | |
| var $extra = $content.find('.extra'); | |
| $('a.btn-show-more').on('touchstart', function(e) { | |
| $extra.toggle(); | |
| e.preventDefault(); | |
| }); | |
| // ---- | |
| // http://stackoverflow.com/a/14244680/38729 | |
| var selScrollable = '.scrollable'; | |
| // Uses document because document will be topmost level in bubbling | |
| $(document).on('touchmove', function(e) { | |
| e.preventDefault(); | |
| }); | |
| // Uses body because jQuery on events are called off of the element they are | |
| // added to, so bubbling would not work if we used document instead. | |
| $('body').on('touchstart', selScrollable, function(e) { | |
| if (e.currentTarget.scrollTop === 0) { | |
| e.currentTarget.scrollTop = 1; | |
| } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { | |
| e.currentTarget.scrollTop -= 1; | |
| } | |
| }); | |
| // Stops preventDefault from being called on document if it sees a scrollable div | |
| $('body').on('touchmove', selScrollable, function(e) { | |
| // e.stopPropagation(); | |
| // Only block default if internal div contents are large enough to scroll | |
| // Warning: scrollHeight support is not universal. (http://stackoverflow.com/a/15033226/40352) | |
| if (this.scrollHeight > $(this).innerHeight()) { | |
| e.stopPropagation(); | |
| } | |
| }); | |
| /* | |
| $(document).bind('touchmove', function(e) { | |
| e.preventDefault(); | |
| }); | |
| $('.touchmove-dont-propagate').bind('touchmove', function(e) { | |
| e.stopPropagation(); | |
| }); | |
| $('.scrollable').bind('touchmove', function(e) { | |
| var $this = $(this); | |
| var innerHeight = $this.innerHeight(); | |
| console.log('.scrollable touchmove', this.scrollTop ,'scrollHeight', this.scrollHeight, 'innerHeight', innerHeight); | |
| if(this.scrollHeight <= innerHeight || this.scrollTop < 0) { | |
| console.log('touchmove preventDefault'); | |
| e.preventDefault(); | |
| } | |
| }); | |
| */ | |
| }); | |
| } //]]> | |
| function euclid(dx, dy) { | |
| return Math.sqrt(dx * dx + dy * dy); | |
| } | |
| </script> | |
| <style type="text/css"></style> | |
| <style type="text/css"></style> | |
| </head> | |
| <body> | |
| <div id="frame"> | |
| <div id="wrap" class="touchmove-dont-propagate"> | |
| <div id="content" class="scrollable" style="transform: translateX(0px);"> | |
| <div class="perex"> | |
| <h2>Lorem ipsum dolor sit amet</h2> | |
| <p>Consectetur adipiscing elit. Donec tristique mattis massa at viverra. Nunc tincidunt ultrices diam id rhoncus. Etiam at imperdiet arcu, in pellentesque neque. Suspendisse potenti. Pellentesque in dolor id nunc vestibulum egestas. Aliquam orci velit, sollicitudin ac pellentesque ac, facilisis ac ex. Maecenas pretium nisi et turpis ultricies lobortis.</p> | |
| <a class="btn btn-show-more">Toggle</a> | |
| </div> | |
| <div class="extra"> | |
| <p>Nam et sodales felis. Cras sodales, nulla sed suscipit porttitor, lorem dolor tincidunt tellus, in lobortis sem ante imperdiet risus. Vivamus sed feugiat purus. Nulla et nunc vel augue mattis accumsan vel id lectus. Nam nibh justo, euismod ac ligula non, ullamcorper sagittis est. Morbi pellentesque feugiat velit ut dapibus. Nullam porttitor mi ut nunc placerat vehicula. Nulla vestibulum at nulla eu finibus. Pellentesque dui ex, ullamcorper vestibulum malesuada ac, ullamcorper eget turpis. Nunc non libero eget quam congue eleifend. Donec nec ipsum ut est tristique porta ac eget velit. Sed dapibus volutpat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum faucibus lacus vitae faucibus. Donec molestie vestibulum mi, et consectetur elit imperdiet eget.</p> | |
| <p>Vestibulum scelerisque dictum turpis. Phasellus mauris odio, ullamcorper eu lorem at, eleifend varius sapien. Morbi tempor, ipsum ac congue tempor, orci augue cursus tortor, non congue erat turpis vel leo. Nunc viverra commodo tortor sed tincidunt. Praesent rhoncus maximus dolor ac accumsan. Etiam vitae volutpat arcu. Maecenas ultrices feugiat libero. Proin molestie euismod magna, quis iaculis dolor tempus id. Sed ante nisl, feugiat sit amet fringilla a, pretium a orci. Ut sed nisi nec risus ultricies pretium. Proin a dolor neque. Sed fermentum, justo vitae condimentum posuere, lacus arcu tristique turpis, ac euismod purus ipsum eget ligula.</p> | |
| <p>Nunc convallis, elit placerat varius egestas, ante diam tempus est, sed mattis ex est a enim. Nulla vitae lobortis metus. Nam sed vestibulum nulla. Praesent suscipit erat sit amet laoreet vulputate. Ut pretium nisl eget tristique ornare. Nullam quam neque, ornare mattis ultricies ut, facilisis eu ipsum. Duis lobortis sapien nunc, sed venenatis enim tincidunt vel. Pellentesque viverra purus ligula, quis pretium arcu consequat quis. Donec dolor libero, commodo non porttitor id, luctus nec sapien.</p> | |
| <p>Integer mi felis, auctor id sapien fermentum, vulputate finibus justo. Fusce fringilla pretium pretium. Duis sodales arcu non justo accumsan facilisis. Praesent efficitur aliquet libero eu placerat. Quisque tincidunt justo ut fermentum interdum. Mauris a ullamcorper ligula, vitae iaculis quam. Aliquam molestie ut lectus at sodales. Donec arcu dolor, lobortis nec aliquam nec, euismod nec lectus. Maecenas suscipit, est quis auctor aliquet, nisl nibh dignissim augue, vel tempor elit mauris nec magna. Sed eu porttitor lorem, at gravida dui. Nunc blandit quis ligula et mattis. Nam eleifend lectus sem, nec fringilla urna mollis sit amet. Integer mattis quam et elit mattis, ac scelerisque metus pharetra.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique mattis massa at viverra. Nunc tincidunt ultrices diam id rhoncus. Etiam at imperdiet arcu, in pellentesque neque. Suspendisse potenti. Pellentesque in dolor id nunc vestibulum egestas. Aliquam orci velit, sollicitudin ac pellentesque ac, facilisis ac ex. Maecenas pretium nisi et turpis ultricies lobortis. Aenean turpis quam, facilisis eget tortor non, accumsan fermentum arcu. Etiam non mi et ex vulputate placerat. Sed egestas hendrerit fringilla. Morbi sagittis, nunc quis iaculis suscipit, ante purus vehicula ipsum, at porta dui ligula a turpis. Phasellus efficitur lectus neque, dapibus commodo leo ultrices nec. Duis gravida sit amet tellus in pellentesque. Praesent sagittis suscipit orci ultrices vulputate. In sit amet suscipit sapien.</p> | |
| <p>Nam et sodales felis. Cras sodales, nulla sed suscipit porttitor, lorem dolor tincidunt tellus, in lobortis sem ante imperdiet risus. Vivamus sed feugiat purus. Nulla et nunc vel augue mattis accumsan vel id lectus. Nam nibh justo, euismod ac ligula non, ullamcorper sagittis est. Morbi pellentesque feugiat velit ut dapibus. Nullam porttitor mi ut nunc placerat vehicula. Nulla vestibulum at nulla eu finibus. Pellentesque dui ex, ullamcorper vestibulum malesuada ac, ullamcorper eget turpis. Nunc non libero eget quam congue eleifend. Donec nec ipsum ut est tristique porta ac eget velit. Sed dapibus volutpat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum faucibus lacus vitae faucibus. Donec molestie vestibulum mi, et consectetur elit imperdiet eget.</p> | |
| <p>Vestibulum scelerisque dictum turpis. Phasellus mauris odio, ullamcorper eu lorem at, eleifend varius sapien. Morbi tempor, ipsum ac congue tempor, orci augue cursus tortor, non congue erat turpis vel leo. Nunc viverra commodo tortor sed tincidunt. Praesent rhoncus maximus dolor ac accumsan. Etiam vitae volutpat arcu. Maecenas ultrices feugiat libero. Proin molestie euismod magna, quis iaculis dolor tempus id. Sed ante nisl, feugiat sit amet fringilla a, pretium a orci. Ut sed nisi nec risus ultricies pretium. Proin a dolor neque. Sed fermentum, justo vitae condimentum posuere, lacus arcu tristique turpis, ac euismod purus ipsum eget ligula.</p> | |
| <p>Nunc convallis, elit placerat varius egestas, ante diam tempus est, sed mattis ex est a enim. Nulla vitae lobortis metus. Nam sed vestibulum nulla. Praesent suscipit erat sit amet laoreet vulputate. Ut pretium nisl eget tristique ornare. Nullam quam neque, ornare mattis ultricies ut, facilisis eu ipsum. Duis lobortis sapien nunc, sed venenatis enim tincidunt vel. Pellentesque viverra purus ligula, quis pretium arcu consequat quis. Donec dolor libero, commodo non porttitor id, luctus nec sapien.</p> | |
| <p>Integer mi felis, auctor id sapien fermentum, vulputate finibus justo. Fusce fringilla pretium pretium. Duis sodales arcu non justo accumsan facilisis. Praesent efficitur aliquet libero eu placerat. Quisque tincidunt justo ut fermentum interdum. Mauris a ullamcorper ligula, vitae iaculis quam. Aliquam molestie ut lectus at sodales. Donec arcu dolor, lobortis nec aliquam nec, euismod nec lectus. Maecenas suscipit, est quis auctor aliquet, nisl nibh dignissim augue, vel tempor elit mauris nec magna. Sed eu porttitor lorem, at gravida dui. Nunc blandit quis ligula et mattis. Nam eleifend lectus sem, nec fringilla urna mollis sit amet. Integer mattis quam et elit mattis, ac scelerisque metus pharetra.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique mattis massa at viverra. Nunc tincidunt ultrices diam id rhoncus. Etiam at imperdiet arcu, in pellentesque neque. Suspendisse potenti. Pellentesque in dolor id nunc vestibulum egestas. Aliquam orci velit, sollicitudin ac pellentesque ac, facilisis ac ex. Maecenas pretium nisi et turpis ultricies lobortis. Aenean turpis quam, facilisis eget tortor non, accumsan fermentum arcu. Etiam non mi et ex vulputate placerat. Sed egestas hendrerit fringilla. Morbi sagittis, nunc quis iaculis suscipit, ante purus vehicula ipsum, at porta dui ligula a turpis. Phasellus efficitur lectus neque, dapibus commodo leo ultrices nec. Duis gravida sit amet tellus in pellentesque. Praesent sagittis suscipit orci ultrices vulputate. In sit amet suscipit sapien.</p> | |
| <p>Nam et sodales felis. Cras sodales, nulla sed suscipit porttitor, lorem dolor tincidunt tellus, in lobortis sem ante imperdiet risus. Vivamus sed feugiat purus. Nulla et nunc vel augue mattis accumsan vel id lectus. Nam nibh justo, euismod ac ligula non, ullamcorper sagittis est. Morbi pellentesque feugiat velit ut dapibus. Nullam porttitor mi ut nunc placerat vehicula. Nulla vestibulum at nulla eu finibus. Pellentesque dui ex, ullamcorper vestibulum malesuada ac, ullamcorper eget turpis. Nunc non libero eget quam congue eleifend. Donec nec ipsum ut est tristique porta ac eget velit. Sed dapibus volutpat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum faucibus lacus vitae faucibus. Donec molestie vestibulum mi, et consectetur elit imperdiet eget.</p> | |
| <p>Vestibulum scelerisque dictum turpis. Phasellus mauris odio, ullamcorper eu lorem at, eleifend varius sapien. Morbi tempor, ipsum ac congue tempor, orci augue cursus tortor, non congue erat turpis vel leo. Nunc viverra commodo tortor sed tincidunt. Praesent rhoncus maximus dolor ac accumsan. Etiam vitae volutpat arcu. Maecenas ultrices feugiat libero. Proin molestie euismod magna, quis iaculis dolor tempus id. Sed ante nisl, feugiat sit amet fringilla a, pretium a orci. Ut sed nisi nec risus ultricies pretium. Proin a dolor neque. Sed fermentum, justo vitae condimentum posuere, lacus arcu tristique turpis, ac euismod purus ipsum eget ligula.</p> | |
| <p>Nunc convallis, elit placerat varius egestas, ante diam tempus est, sed mattis ex est a enim. Nulla vitae lobortis metus. Nam sed vestibulum nulla. Praesent suscipit erat sit amet laoreet vulputate. Ut pretium nisl eget tristique ornare. Nullam quam neque, ornare mattis ultricies ut, facilisis eu ipsum. Duis lobortis sapien nunc, sed venenatis enim tincidunt vel. Pellentesque viverra purus ligula, quis pretium arcu consequat quis. Donec dolor libero, commodo non porttitor id, luctus nec sapien.</p> | |
| <p>Integer mi felis, auctor id sapien fermentum, vulputate finibus justo. Fusce fringilla pretium pretium. Duis sodales arcu non justo accumsan facilisis. Praesent efficitur aliquet libero eu placerat. Quisque tincidunt justo ut fermentum interdum. Mauris a ullamcorper ligula, vitae iaculis quam. Aliquam molestie ut lectus at sodales. Donec arcu dolor, lobortis nec aliquam nec, euismod nec lectus. Maecenas suscipit, est quis auctor aliquet, nisl nibh dignissim augue, vel tempor elit mauris nec magna. Sed eu porttitor lorem, at gravida dui. Nunc blandit quis ligula et mattis. Nam eleifend lectus sem, nec fringilla urna mollis sit amet. Integer mattis quam et elit mattis, ac scelerisque metus pharetra.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique mattis massa at viverra. Nunc tincidunt ultrices diam id rhoncus. Etiam at imperdiet arcu, in pellentesque neque. Suspendisse potenti. Pellentesque in dolor id nunc vestibulum egestas. Aliquam orci velit, sollicitudin ac pellentesque ac, facilisis ac ex. Maecenas pretium nisi et turpis ultricies lobortis. Aenean turpis quam, facilisis eget tortor non, accumsan fermentum arcu. Etiam non mi et ex vulputate placerat. Sed egestas hendrerit fringilla. Morbi sagittis, nunc quis iaculis suscipit, ante purus vehicula ipsum, at porta dui ligula a turpis. Phasellus efficitur lectus neque, dapibus commodo leo ultrices nec. Duis gravida sit amet tellus in pellentesque. Praesent sagittis suscipit orci ultrices vulputate. In sit amet suscipit sapien.</p> | |
| <p>Nam et sodales felis. Cras sodales, nulla sed suscipit porttitor, lorem dolor tincidunt tellus, in lobortis sem ante imperdiet risus. Vivamus sed feugiat purus. Nulla et nunc vel augue mattis accumsan vel id lectus. Nam nibh justo, euismod ac ligula non, ullamcorper sagittis est. Morbi pellentesque feugiat velit ut dapibus. Nullam porttitor mi ut nunc placerat vehicula. Nulla vestibulum at nulla eu finibus. Pellentesque dui ex, ullamcorper vestibulum malesuada ac, ullamcorper eget turpis. Nunc non libero eget quam congue eleifend. Donec nec ipsum ut est tristique porta ac eget velit. Sed dapibus volutpat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum faucibus lacus vitae faucibus. Donec molestie vestibulum mi, et consectetur elit imperdiet eget.</p> | |
| <p>Vestibulum scelerisque dictum turpis. Phasellus mauris odio, ullamcorper eu lorem at, eleifend varius sapien. Morbi tempor, ipsum ac congue tempor, orci augue cursus tortor, non congue erat turpis vel leo. Nunc viverra commodo tortor sed tincidunt. Praesent rhoncus maximus dolor ac accumsan. Etiam vitae volutpat arcu. Maecenas ultrices feugiat libero. Proin molestie euismod magna, quis iaculis dolor tempus id. Sed ante nisl, feugiat sit amet fringilla a, pretium a orci. Ut sed nisi nec risus ultricies pretium. Proin a dolor neque. Sed fermentum, justo vitae condimentum posuere, lacus arcu tristique turpis, ac euismod purus ipsum eget ligula.</p> | |
| <p>Nunc convallis, elit placerat varius egestas, ante diam tempus est, sed mattis ex est a enim. Nulla vitae lobortis metus. Nam sed vestibulum nulla. Praesent suscipit erat sit amet laoreet vulputate. Ut pretium nisl eget tristique ornare. Nullam quam neque, ornare mattis ultricies ut, facilisis eu ipsum. Duis lobortis sapien nunc, sed venenatis enim tincidunt vel. Pellentesque viverra purus ligula, quis pretium arcu consequat quis. Donec dolor libero, commodo non porttitor id, luctus nec sapien.</p> | |
| <p>Integer mi felis, auctor id sapien fermentum, vulputate finibus justo. Fusce fringilla pretium pretium. Duis sodales arcu non justo accumsan facilisis. Praesent efficitur aliquet libero eu placerat. Quisque tincidunt justo ut fermentum interdum. Mauris a ullamcorper ligula, vitae iaculis quam. Aliquam molestie ut lectus at sodales. Donec arcu dolor, lobortis nec aliquam nec, euismod nec lectus. Maecenas suscipit, est quis auctor aliquet, nisl nibh dignissim augue, vel tempor elit mauris nec magna. Sed eu porttitor lorem, at gravida dui. Nunc blandit quis ligula et mattis. Nam eleifend lectus sem, nec fringilla urna mollis sit amet. Integer mattis quam et elit mattis, ac scelerisque metus pharetra.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique mattis massa at viverra. Nunc tincidunt ultrices diam id rhoncus. Etiam at imperdiet arcu, in pellentesque neque. Suspendisse potenti. Pellentesque in dolor id nunc vestibulum egestas. Aliquam orci velit, sollicitudin ac pellentesque ac, facilisis ac ex. Maecenas pretium nisi et turpis ultricies lobortis. Aenean turpis quam, facilisis eget tortor non, accumsan fermentum arcu. Etiam non mi et ex vulputate placerat. Sed egestas hendrerit fringilla. Morbi sagittis, nunc quis iaculis suscipit, ante purus vehicula ipsum, at porta dui ligula a turpis. Phasellus efficitur lectus neque, dapibus commodo leo ultrices nec. Duis gravida sit amet tellus in pellentesque. Praesent sagittis suscipit orci ultrices vulputate. In sit amet suscipit sapien.</p> | |
| <p>Nam et sodales felis. Cras sodales, nulla sed suscipit porttitor, lorem dolor tincidunt tellus, in lobortis sem ante imperdiet risus. Vivamus sed feugiat purus. Nulla et nunc vel augue mattis accumsan vel id lectus. Nam nibh justo, euismod ac ligula non, ullamcorper sagittis est. Morbi pellentesque feugiat velit ut dapibus. Nullam porttitor mi ut nunc placerat vehicula. Nulla vestibulum at nulla eu finibus. Pellentesque dui ex, ullamcorper vestibulum malesuada ac, ullamcorper eget turpis. Nunc non libero eget quam congue eleifend. Donec nec ipsum ut est tristique porta ac eget velit. Sed dapibus volutpat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum faucibus lacus vitae faucibus. Donec molestie vestibulum mi, et consectetur elit imperdiet eget.</p> | |
| <p>Vestibulum scelerisque dictum turpis. Phasellus mauris odio, ullamcorper eu lorem at, eleifend varius sapien. Morbi tempor, ipsum ac congue tempor, orci augue cursus tortor, non congue erat turpis vel leo. Nunc viverra commodo tortor sed tincidunt. Praesent rhoncus maximus dolor ac accumsan. Etiam vitae volutpat arcu. Maecenas ultrices feugiat libero. Proin molestie euismod magna, quis iaculis dolor tempus id. Sed ante nisl, feugiat sit amet fringilla a, pretium a orci. Ut sed nisi nec risus ultricies pretium. Proin a dolor neque. Sed fermentum, justo vitae condimentum posuere, lacus arcu tristique turpis, ac euismod purus ipsum eget ligula.</p> | |
| <p>Nunc convallis, elit placerat varius egestas, ante diam tempus est, sed mattis ex est a enim. Nulla vitae lobortis metus. Nam sed vestibulum nulla. Praesent suscipit erat sit amet laoreet vulputate. Ut pretium nisl eget tristique ornare. Nullam quam neque, ornare mattis ultricies ut, facilisis eu ipsum. Duis lobortis sapien nunc, sed venenatis enim tincidunt vel. Pellentesque viverra purus ligula, quis pretium arcu consequat quis. Donec dolor libero, commodo non porttitor id, luctus nec sapien.</p> | |
| <p>Integer mi felis, auctor id sapien fermentum, vulputate finibus justo. Fusce fringilla pretium pretium. Duis sodales arcu non justo accumsan facilisis. Praesent efficitur aliquet libero eu placerat. Quisque tincidunt justo ut fermentum interdum. Mauris a ullamcorper ligula, vitae iaculis quam. Aliquam molestie ut lectus at sodales. Donec arcu dolor, lobortis nec aliquam nec, euismod nec lectus. Maecenas suscipit, est quis auctor aliquet, nisl nibh dignissim augue, vel tempor elit mauris nec magna. Sed eu porttitor lorem, at gravida dui. Nunc blandit quis ligula et mattis. Nam eleifend lectus sem, nec fringilla urna mollis sit amet. Integer mattis quam et elit mattis, ac scelerisque metus pharetra.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique mattis massa at viverra. Nunc tincidunt ultrices diam id rhoncus. Etiam at imperdiet arcu, in pellentesque neque. Suspendisse potenti. Pellentesque in dolor id nunc vestibulum egestas. Aliquam orci velit, sollicitudin ac pellentesque ac, facilisis ac ex. Maecenas pretium nisi et turpis ultricies lobortis. Aenean turpis quam, facilisis eget tortor non, accumsan fermentum arcu. Etiam non mi et ex vulputate placerat. Sed egestas hendrerit fringilla. Morbi sagittis, nunc quis iaculis suscipit, ante purus vehicula ipsum, at porta dui ligula a turpis. Phasellus efficitur lectus neque, dapibus commodo leo ultrices nec. Duis gravida sit amet tellus in pellentesque. Praesent sagittis suscipit orci ultrices vulputate. In sit amet suscipit sapien.</p> | |
| <p>Nam et sodales felis. Cras sodales, nulla sed suscipit porttitor, lorem dolor tincidunt tellus, in lobortis sem ante imperdiet risus. Vivamus sed feugiat purus. Nulla et nunc vel augue mattis accumsan vel id lectus. Nam nibh justo, euismod ac ligula non, ullamcorper sagittis est. Morbi pellentesque feugiat velit ut dapibus. Nullam porttitor mi ut nunc placerat vehicula. Nulla vestibulum at nulla eu finibus. Pellentesque dui ex, ullamcorper vestibulum malesuada ac, ullamcorper eget turpis. Nunc non libero eget quam congue eleifend. Donec nec ipsum ut est tristique porta ac eget velit. Sed dapibus volutpat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum faucibus lacus vitae faucibus. Donec molestie vestibulum mi, et consectetur elit imperdiet eget.</p> | |
| <p>Vestibulum scelerisque dictum turpis. Phasellus mauris odio, ullamcorper eu lorem at, eleifend varius sapien. Morbi tempor, ipsum ac congue tempor, orci augue cursus tortor, non congue erat turpis vel leo. Nunc viverra commodo tortor sed tincidunt. Praesent rhoncus maximus dolor ac accumsan. Etiam vitae volutpat arcu. Maecenas ultrices feugiat libero. Proin molestie euismod magna, quis iaculis dolor tempus id. Sed ante nisl, feugiat sit amet fringilla a, pretium a orci. Ut sed nisi nec risus ultricies pretium. Proin a dolor neque. Sed fermentum, justo vitae condimentum posuere, lacus arcu tristique turpis, ac euismod purus ipsum eget ligula.</p> | |
| <p>Nunc convallis, elit placerat varius egestas, ante diam tempus est, sed mattis ex est a enim. Nulla vitae lobortis metus. Nam sed vestibulum nulla. Praesent suscipit erat sit amet laoreet vulputate. Ut pretium nisl eget tristique ornare. Nullam quam neque, ornare mattis ultricies ut, facilisis eu ipsum. Duis lobortis sapien nunc, sed venenatis enim tincidunt vel. Pellentesque viverra purus ligula, quis pretium arcu consequat quis. Donec dolor libero, commodo non porttitor id, luctus nec sapien.</p> | |
| <p>Integer mi felis, auctor id sapien fermentum, vulputate finibus justo. Fusce fringilla pretium pretium. Duis sodales arcu non justo accumsan facilisis. Praesent efficitur aliquet libero eu placerat. Quisque tincidunt justo ut fermentum interdum. Mauris a ullamcorper ligula, vitae iaculis quam. Aliquam molestie ut lectus at sodales. Donec arcu dolor, lobortis nec aliquam nec, euismod nec lectus. Maecenas suscipit, est quis auctor aliquet, nisl nibh dignissim augue, vel tempor elit mauris nec magna. Sed eu porttitor lorem, at gravida dui. Nunc blandit quis ligula et mattis. Nam eleifend lectus sem, nec fringilla urna mollis sit amet. Integer mattis quam et elit mattis, ac scelerisque metus pharetra.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment