FFNM/test/i-scroll.html

327 lines
24 KiB
HTML
Raw Permalink Normal View History

2020-07-16 00:44:52 +02:00
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Test i-scroll</title>
<script src="../dist/ffnm.min.js"></script>
<style>
.nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 10rem;
background: orange;
transition: 1s;
transform: translateY(10rem);
}
.show {
transform: translateY(0);
}
</style>
</head>
<body>
<nav i-scroll-down="class:remove('show')" i-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
<p i-scroll-down="class:toggle('ala', 'p')">
Ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices. Sapien et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis.
</p>
<p>
Praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris. Pellentesque habitant morbi tristique senectus et?
</p>
<p>
Tempor nec feugiat nisl pretium fusce id velit ut tortor pretium. At elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec.
</p>
<p>
Ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel, pharetra vel turpis nunc eget lorem dolor, sed! Aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros.
</p>
<p>
Laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit! Mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in!
</p>
<p>
Massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra? Euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante!
</p>
<p>
Feugiat scelerisque varius morbi enim nunc, faucibus a pellentesque sit amet, porttitor eget dolor morbi non arcu risus, quis varius quam quisque id diam? Pellentesque id nibh tortor, id aliquet!
</p>
<p>
Tempus, urna et pharetra pharetra, massa massa ultricies mi, quis hendrerit dolor magna eget est lorem ipsum dolor sit amet, consectetur adipiscing? Venenatis, lectus magna fringilla urna, porttitor rhoncus dolor.
</p>
<p>
In ante metus, dictum at tempor commodo, ullamcorper a lacus? Hendrerit gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci.
</p>
<p>
Id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus! Nec dui nunc mattis enim ut tellus elementum sagittis vitae et.
</p>
<p>
Faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus, sed.
</p>
<p>
Leo vel orci porta non pulvinar. Sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus?
</p>
<p>
Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus!
</p>
<p>
Nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet? Nunc sed velit dignissim sodales ut eu sem integer.
</p>
<p>
Sed vulputate mi sit amet mauris commodo quis imperdiet massa! Senectus et netus et malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi leo urna, molestie at elementum eu!
</p>
<p>
Eu mi bibendum neque egestas congue quisque egestas diam in. Id interdum velit laoreet id donec ultrices tincidunt arcu, non sodales neque sodales ut etiam sit amet nisl purus, in!
</p>
<p>
Id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus, urna et pharetra pharetra. Eros donec ac odio tempor.
</p>
<p>
Tortor aliquam nulla facilisi cras fermentum? Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante.
</p>
<p>
Nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi, quis eleifend quam adipiscing vitae!
</p>
<p>
Curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo! Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent.
</p>
<p>
Ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus! Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
</p>
<p>
Egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc? Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis.
</p>
<p>
Nibh tellus molestie nunc, non blandit massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et! Mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas.
</p>
<p>
Faucibus purus in massa tempor nec? Tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat.
</p>
<p>
Donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Consectetur a erat nam at lectus urna duis convallis!
</p>
<p>
Enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.
</p>
<p>
Ac, feugiat sed lectus vestibulum mattis ullamcorper velit? Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim?
</p>
<p>
Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur! Neque sodales ut etiam sit amet nisl purus, in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non?
</p>
<p>
Et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit! Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien.
</p>
<p>
Ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum tempus egestas sed sed risus pretium. Mauris pharetra et ultrices neque ornare aenean euismod elementum.
</p>
<p>
Neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla.
</p>
<p>
Aliquet enim tortor, at auctor. Orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla!
</p>
<p>
Risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque adipiscing commodo elit, at. Aenean vel elit scelerisque mauris pellentesque!
</p>
<p>
Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero enim, sed faucibus turpis in eu mi bibendum? Venenatis tellus in metus vulputate!
</p>
<p>
Ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at. Ut enim blandit volutpat maecenas volutpat blandit aliquam.
</p>
<p>
Neque, vitae tempus quam pellentesque nec nam aliquam sem et tortor consequat id? Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero.
</p>
<p>
Elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere? Nibh praesent tristique magna sit amet purus gravida?
</p>
<p>
Sit amet justo donec enim diam, vulputate ut pharetra? Ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed.
</p>
<p>
Amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris! Pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in.
</p>
<p>
Faucibus et molestie ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra? Libero volutpat sed cras ornare arcu dui vivamus arcu?
</p>
<p>
Tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet? Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed?
</p>
<p>
Porttitor lacus, luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet. Arcu dictum varius duis at consectetur lorem!
</p>
<p>
Purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet! Enim, facilisis gravida neque convallis a cras semper auctor neque, vitae tempus quam pellentesque.
</p>
<p>
Proin sed libero enim, sed faucibus turpis in eu mi bibendum neque egestas? Sagittis, nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed.
</p>
<p>
Massa, eget egestas purus viverra accumsan in nisl. Cras fermentum, odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum!
</p>
<p>
Quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur! Orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa enim nec?
</p>
<p>
Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus, dictum at tempor commodo, ullamcorper a. Eget est lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque habitant?
</p>
<p>
Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sed blandit libero volutpat sed cras ornare arcu dui vivamus arcu felis, bibendum?
</p>
<p>
Neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed blandit libero volutpat sed cras ornare arcu! Vel eros donec ac odio!
</p>
<p>
Viverra vitae congue eu, consequat ac felis. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus nulla at volutpat.
</p>
<p>
Est velit egestas dui, id ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum?
</p>
<p>
Dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet! At auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci?
</p>
<p>
Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo? Cras adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros.
</p>
<p>
Eget felis eget nunc lobortis mattis aliquam faucibus purus in massa tempor nec feugiat nisl! Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat!
</p>
<p>
Mi tempus imperdiet nulla malesuada pellentesque elit eget? In eu mi bibendum neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed!
</p>
<p>
Accumsan sit amet nulla facilisi morbi. Gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus.
</p>
<p>
Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante? Sit amet facilisis magna etiam tempor, orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa!
</p>
<p>
Sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis? Auctor eu augue ut lectus.
</p>
<p>
Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis? Eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue.
</p>
<p>
Risus, quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam! Non pulvinar neque laoreet suspendisse interdum consectetur libero, id faucibus nisl tincidunt eget nullam non nisi.
</p>
<p>
Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae?
</p>
<p>
Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et! Mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum, faucibus vitae aliquet nec, ullamcorper!
</p>
<p>
Eu augue ut lectus arcu? Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc?
</p>
<p>
Eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel? Et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis vulputate enim nulla aliquet.
</p>
<p>
Viverra mauris, in aliquam sem fringilla ut morbi tincidunt? Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et tortor?
</p>
<p>
Sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris. Ipsum dolor sit amet, consectetur adipiscing elit duis.
</p>
<p>
Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et.
</p>
<p>
Lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus! Eros, in cursus turpis massa tincidunt dui ut ornare.
</p>
<p>
Tellus cras adipiscing enim eu? Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies?
</p>
<p>
Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna? Eu scelerisque felis imperdiet proin.
</p>
<p>
Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet! Amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim!
</p>
<p>
Eget nunc scelerisque viverra mauris, in aliquam sem fringilla ut. Morbi leo urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing?
</p>
<p>
Ut placerat orci nulla pellentesque. Aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat?
</p>
<p>
Mi sit amet mauris commodo quis! Viverra mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.
</p>
<p>
Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo?
</p>
<p>
Integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa? Viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas?
</p>
<p>
Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem sed risus ultricies?
</p>
<p>
Integer quis auctor elit sed vulputate? Adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in cursus turpis massa tincidunt dui ut ornare.
</p>
<p>
Nam aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit. Libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis? Pretium lectus quam id leo?
</p>
<p>
Accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu! Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget.
</p>
<p>
Malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse? Maecenas pharetra convallis posuere morbi leo urna?
</p>
<p>
Mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi.
</p>
<p>
Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Ac tortor dignissim convallis aenean.
</p>
<p>
Non arcu risus, quis varius quam quisque id diam vel. Ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam?
</p>
<p>
Vitae, auctor eu augue ut lectus arcu, bibendum at! Aliquam vestibulum morbi blandit cursus risus, at ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus.
</p>
<p>
Urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio! Hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus?
</p>
<p>
Vitae tortor condimentum lacinia quis vel eros donec ac odio. Praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
</p>
<p>
Sed nisi lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat? Viverra accumsan in nisl nisi, scelerisque eu ultrices!
</p>
<p>
Cursus turpis massa tincidunt dui ut ornare lectus sit amet est placerat. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo?
</p>
<p>
Pellentesque id nibh tortor, id aliquet lectus proin nibh nisl, condimentum id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et. Semper quis lectus nulla at!
</p>
<p>
Elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes. Arcu dui vivamus arcu felis, bibendum ut tristique et, egestas quis ipsum suspendisse ultrices gravida dictum fusce ut.
</p>
<p>
Aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit, scelerisque in dictum non, consectetur a.
</p>
<p>
Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus.
</p>
<p>
Egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque. Maecenas volutpat blandit aliquam etiam erat velit.
</p>
<p>
Sit amet purus gravida quis blandit turpis cursus? Platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas sed enim.
</p>
<p>
Etiam tempor, orci eu lobortis. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus et molestie!
</p>
<p>
Aenean pharetra, magna ac placerat vestibulum, lectus mauris? Faucibus purus in massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
</p>
<p>
Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi! Dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget.
</p>
<p>
Nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem! A diam maecenas sed enim ut sem viverra aliquet!
</p>
</body>
</html>