trevorhreed/trigger-event-on-element-viewable.html

## trigger-event-on-element-viewable.html
<!doctype html>
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      html{
        margin: 20px;
      }
      #stats{
        position: fixed;
        right: 20px;
        border-radius: 18px;
        border: solid 1px #000;
        padding: 18px;
        background: rgba(0, 0, 0, .75);
        color: #fff;
        font-weight: bold;
      }
      #stats td{
        text-align: right;
        padding: 6px;
      }
      #element{
        color: blue;
        margin: 0;
        border-top: solid 1px blue;
        border-bottom: solid 1px blue;
      }
    </style>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', (e) => {

        var stats = document.querySelector('#stats')
        var element = document.querySelector('#element')

        const check = (e) => {

          var margin = document.body.parentElement.offsetTop
          var viewportTop = window.scrollY - document.body.parentElement.offsetTop
          var viewportHeight = window.innerHeight - document.body.parentElement.offsetTop

          var dims = {
            pageTop: window.scrollY - margin,
            pageBottom: window.scrollY + window.innerHeight - margin,
            elementTop: element.offsetTop,
            elementBottom: element.offsetTop + element.clientHeight
          }

          document
            .querySelectorAll('p')
            .forEach(el => update(el, dims))

          stats.innerHTML = `<table>
            <tr><td>pageTop</td><td>${dims.pageTop}</td></tr>
            <tr><td>pageBottom</td><td>${dims.pageBottom}</td></tr>
            <tr><td>elementTop</td><td>${dims.elementTop}</td></tr>
            <tr><td>elementBottom</td><td>${dims.elementBottom}</td></tr>
            <tr><td>Blue In View?</td><td>${isInView(element, dims)}</td></tr>
            <!-- <tr><td></td><td></td></tr> -->
            </table>`
        }

        const update = (el, dims) => {
          var elementTop = el.offsetTop
          var elementBottom = el.offsetTop + el.clientHeight
          if (dims.pageTop < elementTop && dims.pageBottom > elementBottom) {
            // fully in view
            el.style.color = null
          } else if (elementTop <= dims.pageBottom && elementBottom >= dims.pageTop) {
            // partially in view
            el.style.color = 'red'
          } else {
            // out of view
          }
        }

        const isInView = (el, dims, fully) => {
          var elementTop = el.offsetTop
          var elementBottom = el.offsetTop + el.clientHeight
          return elementTop <= dims.pageBottom && elementBottom >= dims.pageTop
        }

        window.addEventListener('scroll', check)
        check()
      })
    </script>
  </head>
  <body>
    <div id="stats"></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor mi, auctor ac felis id, tempor porttitor orci. Duis scelerisque ligula risus. Quisque sollicitudin accumsan turpis eget tempus. Praesent vel iaculis ex. Vestibulum quam odio, mattis vitae risus vel, placerat dignissim arcu. Morbi viverra erat eu leo imperdiet, eget varius lorem aliquet. Morbi nec metus tristique, congue ligula ac, mattis odio. Nam pellentesque lacus turpis, hendrerit dapibus ex scelerisque ac. Vestibulum in molestie neque, at sagittis lorem. Sed a quam malesuada sapien ornare dapibus ut id odio. Vestibulum at felis quis felis ornare tempus at vitae est. Fusce ac diam pharetra, vestibulum est nec, lacinia sem. Nunc consectetur mi quis enim efficitur, vestibulum porttitor turpis imperdiet.</p>

    <p>Sed vulputate vitae metus id commodo. Maecenas viverra neque diam, non aliquet mi blandit et. Nulla vitae magna imperdiet, mollis lacus quis, ornare nunc. Etiam magna ante, fermentum vel neque et, bibendum pellentesque orci. Donec non elit metus. In facilisis dignissim ipsum vel venenatis. Vivamus feugiat ultrices interdum. Sed vel risus sodales, semper eros ut, volutpat lacus.</p>

    <p>Suspendisse id tincidunt erat. Fusce eleifend elementum vulputate. Aenean at tristique tortor, vel tempor metus. Suspendisse enim velit, elementum vel semper at, placerat ut ipsum. Integer velit arcu, scelerisque nec turpis vitae, tristique tempus diam. Sed interdum lectus a tincidunt egestas. Aliquam vehicula, ipsum at euismod convallis, lorem leo tristique ipsum, ac hendrerit risus ligula ullamcorper dolor. Praesent ornare arcu in dui aliquam, id pharetra quam ultricies. Nam auctor placerat nulla, ut fermentum tellus posuere in. Donec quis dui purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed justo lacus.</p>

    <p>In semper quam et orci placerat ultricies. In dignissim rutrum lacinia. Donec et vestibulum quam, sed fringilla nunc. Pellentesque laoreet faucibus risus ut dapibus. Vivamus congue ligula in ante consectetur, non laoreet risus elementum. Quisque dapibus nibh dolor, vel auctor lectus accumsan vel. Nullam scelerisque eros nisl, in semper ex aliquam hendrerit. Vivamus egestas nibh in diam sollicitudin feugiat. Pellentesque venenatis porttitor ante, vel convallis neque lobortis ut. Mauris metus eros, consectetur eu urna eget, dictum malesuada diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean porta dolor urna, nec volutpat turpis euismod viverra. Morbi molestie euismod lectus, id aliquet arcu fermentum nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur quam est, feugiat sit amet tempor sed, consequat eu lacus. Donec vehicula aliquet ex porttitor iaculis. Sed nibh orci, vehicula sit amet ex et, lacinia sollicitudin enim. Nunc volutpat hendrerit est, quis varius tellus varius nec. Nulla placerat hendrerit libero, eget maximus enim convallis nec. Aenean eu magna sagittis, cursus est non, interdum neque. In vitae elementum felis. Vivamus at augue vel turpis pretium hendrerit eu venenatis dolor. Nam vulputate felis vitae arcu finibus vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed efficitur risus nec semper tempor.</p>

    <p>Curabitur nec tortor orci. Morbi ac gravida turpis. Etiam ultrices scelerisque quam. Praesent scelerisque maximus nibh, a cursus orci. Sed a nulla vehicula arcu posuere elementum. Nunc varius massa elit, sed porttitor erat facilisis ut. Duis lectus nisl, volutpat in enim eu, suscipit volutpat lacus. Morbi vitae lorem lorem. Suspendisse potenti. Quisque ornare lacus ut nunc venenatis vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer mollis justo at euismod tincidunt. Nulla tellus eros, interdum vitae nibh in, euismod congue felis.</p>

    <p>Cras ornare ac lorem in tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales, felis sit amet fringilla feugiat, lorem nibh facilisis nulla, vitae interdum mauris felis id eros. Quisque id nibh dui. Cras sodales elementum nisi eget ornare. Proin dignissim iaculis urna, non maximus enim. Donec molestie lacinia ex sed eleifend. Pellentesque porta iaculis malesuada.</p>

    <p>Vivamus enim ipsum, tincidunt a turpis at, lacinia vehicula erat. Nunc mattis hendrerit malesuada. Fusce gravida augue a metus viverra mattis. Mauris nisl orci, maximus sollicitudin odio sit amet, rhoncus hendrerit odio. Vestibulum vitae ullamcorper metus. Etiam egestas, lectus sit amet consectetur vehicula, nibh nisl lobortis lorem, sed eleifend ex magna quis libero. Praesent vitae felis ac libero fermentum faucibus quis nec dui. Nulla ullamcorper rhoncus nibh, at sagittis tellus hendrerit in. Ut eu rutrum massa. Nam nec arcu vulputate, hendrerit arcu et, blandit libero.</p>

    <p>Aenean placerat quis nulla sed placerat. Praesent pretium sem sed nunc lacinia, ac ultrices justo consectetur. Donec non vehicula dolor. Nunc tellus ligula, ullamcorper non laoreet et, consectetur et est. Nunc volutpat lectus eget nibh tincidunt maximus. Curabitur ac pharetra odio. Mauris a blandit nisl. Aliquam erat volutpat. Integer lectus erat, maximus at nisl ut, convallis imperdiet dolor. In elit lorem, ullamcorper ut sapien ac, rutrum cursus ligula. Curabitur dolor magna, sodales eget vulputate quis, dapibus quis nisl. Nulla luctus lacus eget ligula facilisis ultrices. Donec posuere dui id eleifend facilisis. Nullam molestie, justo quis commodo pulvinar, mauris purus tincidunt tortor, in efficitur metus massa varius ex.</p>

    <p>Mauris eget urna sit amet felis posuere finibus. Cras ultricies lorem quis feugiat vehicula. Donec malesuada elementum tempor. Nullam ultricies justo eget est eleifend imperdiet. Suspendisse id magna turpis. Etiam eget auctor leo, elementum iaculis mauris. Aenean eros nulla, efficitur eu felis eu, ullamcorper feugiat risus. Nulla a massa a quam pellentesque mollis ac non magna. Curabitur vehicula nunc commodo mattis auctor. Curabitur volutpat dolor dui, non imperdiet elit finibus nec. Nullam aliquet, est eget auctor porta, neque quam porttitor felis, vitae ultricies ipsum ante sed sapien.</p>

    <p>Mauris ut mollis arcu, vel fringilla elit. Proin mollis, quam ut sagittis egestas, libero lectus suscipit lectus, et efficitur lacus massa a metus. Pellentesque non ultrices mauris. Nam urna est, luctus vel arcu nec, hendrerit euismod libero. Nulla eu justo sed quam accumsan hendrerit vitae congue lectus. Cras tincidunt magna nec justo auctor, non lobortis lorem fringilla. Nunc at venenatis diam. Fusce purus ante, sodales porttitor pharetra et, fringilla sit amet justo. Morbi sagittis sit amet turpis at volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque feugiat erat in dui suscipit eleifend. Maecenas consectetur rhoncus nisi et varius. Praesent aliquam, risus eget ultricies tincidunt, ligula mauris rhoncus turpis, vitae auctor ex sapien sed magna.</p>

    <p>Phasellus ut velit et eros faucibus convallis eu molestie dolor. Fusce et diam egestas, ullamcorper urna sed, pretium neque. Praesent pretium nisi luctus urna posuere, eu elementum ipsum ultricies. Ut quam ipsum, porta quis nisi vitae, tincidunt suscipit ipsum. Vivamus viverra laoreet turpis, id commodo lacus pellentesque et. Aenean ultrices nisi orci, ut sodales metus convallis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p>Suspendisse quis eros condimentum, volutpat dolor vitae, pulvinar eros. Aenean risus dolor, placerat eu dui vitae, maximus blandit dolor. Curabitur sollicitudin enim augue, a aliquam velit mattis et. Cras augue sapien, consequat id venenatis non, sodales eget felis. Nulla facilisi. Mauris varius convallis mauris non faucibus. Sed dui sapien, condimentum a pharetra a, semper in nisi. Fusce aliquet interdum sem vel posuere. Mauris feugiat tincidunt nisl, at tempus urna sodales et. Aliquam vitae dignissim magna. Pellentesque gravida, mi ac convallis lacinia, mi mi laoreet arcu, a vulputate mauris sem at orci. Nunc tincidunt dapibus neque, quis semper metus eleifend vel.</p>

    <p id="element">Duis ullamcorper nulla sit amet lorem dapibus fermentum. Duis elementum, tortor nec pretium lacinia, nisl metus ullamcorper nunc, tempor condimentum ipsum urna vitae nibh. Integer pellentesque tempor vehicula. Etiam elementum egestas lorem, sit amet iaculis lectus tincidunt sit amet. Fusce luctus quam vitae leo faucibus, quis consequat ex aliquam. Sed id purus neque. Cras vestibulum pharetra tortor et consequat. Vivamus id eros semper sem commodo viverra. Nunc vel laoreet arcu. Morbi vitae ligula bibendum, porttitor ex id, bibendum massa. Aenean non justo non dolor scelerisque feugiat.</p>

    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu auctor est, ut porta ligula. Proin libero ipsum, eleifend et consequat at, congue vel neque. Nam iaculis rutrum nisi, vitae tincidunt diam ullamcorper quis. Duis ut maximus ligula, ac rutrum ipsum. Nunc malesuada et quam sit amet pellentesque. Fusce velit sem, finibus sed efficitur ut, varius vitae ante.</p>

    <p>Vivamus tempus consequat arcu, ac ultricies sem placerat ut. Donec viverra vel diam vel dapibus. Nunc lacinia nisl in posuere tristique. Aenean sagittis dapibus nisi, id consequat libero ultrices et. Proin interdum, nisi in consectetur viverra, neque justo blandit leo, eleifend sodales quam quam nec erat. Aenean sem mauris, pulvinar a erat tincidunt, finibus suscipit erat. Sed eu ullamcorper metus. In hac habitasse platea dictumst. Duis id mi tortor. Pellentesque malesuada ligula id facilisis luctus. Pellentesque at eleifend lacus. Nunc eget tincidunt dui.</p>

    <p>Donec volutpat dui id varius auctor. Curabitur ornare nisi nisi, et lacinia neque lobortis non. Aenean pulvinar, nisl in luctus efficitur, purus lacus mattis massa, et fringilla turpis ante non odio. Nulla rutrum ultrices leo sit amet ultrices. Vestibulum suscipit sit amet nunc quis posuere. Ut a tempus ante. Ut finibus scelerisque tellus, eu gravida lacus vulputate ut. Morbi at pulvinar ipsum, non faucibus risus.</p>

    <p>Nam rutrum gravida nunc at vehicula. Quisque sem lacus, volutpat at convallis id, lacinia vitae libero. Mauris sollicitudin, metus non vehicula ultricies, lacus odio malesuada tellus, vel efficitur sapien dui sed neque. Vestibulum vel vestibulum odio, sed viverra dolor. Proin non pulvinar nunc. Proin ipsum nunc, vulputate a elit vitae, sollicitudin laoreet tortor. Cras lacinia purus in erat congue scelerisque. Maecenas sed tempor orci, vel dignissim diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet sapien turpis. Fusce vel faucibus velit.</p>

    <p>In feugiat rutrum vehicula. Donec justo arcu, vulputate vel placerat ac, eleifend nec est. Suspendisse ipsum nisl, porttitor eu imperdiet eget, porttitor sed magna. Aenean auctor cursus elementum. Nulla ac dui scelerisque, dignissim orci commodo, rutrum nulla. Etiam eu elit gravida, dignissim orci ut, convallis dui. Aenean sed erat sagittis, interdum quam ut, pulvinar libero. Pellentesque quis tortor eros. Donec nec eros porttitor, malesuada odio vel, tincidunt sapien. Curabitur commodo orci at massa mattis, ut sagittis sem tempus. Sed ac feugiat ligula, tempor aliquet ligula. Quisque nibh mauris, pulvinar tincidunt posuere ullamcorper, tempor ac mi. Aenean sit amet risus sit amet magna pellentesque bibendum ac id lorem.</p>

    <p>Morbi varius mattis enim a ullamcorper. Ut enim ipsum, pretium id ullamcorper a, hendrerit id erat. Phasellus pulvinar, erat a ultrices luctus, ex eros fermentum neque, sed mattis lectus massa eu mi. Mauris sed felis at libero aliquam accumsan sit amet id velit. Maecenas rhoncus mauris a nunc ullamcorper dignissim. Etiam tristique ipsum eget dignissim tristique. Praesent tristique sit amet erat nec lobortis. Proin vitae pretium ante, ut sodales turpis. Sed dignissim risus eget porttitor volutpat. Phasellus bibendum pellentesque dolor, nec tristique quam congue eget. Donec tempus nulla ut purus aliquam, eget tristique lacus semper. Donec tincidunt nunc vitae consequat lobortis. Quisque at massa ultrices, venenatis ex eget, faucibus turpis. Praesent et mi mi. Duis ut egestas neque.</p>

    <p>Ut dapibus purus eget commodo tincidunt. Duis blandit volutpat sodales. Mauris sed maximus lectus, eget ultricies augue. Nam convallis, neque id ullamcorper ullamcorper, est urna ultrices justo, ut condimentum ipsum metus sit amet urna. Nam congue interdum felis et aliquam. Fusce ut euismod diam, a aliquam ex. Sed eu dignissim nisi, sed vehicula eros. In porttitor accumsan velit et sodales. Etiam dolor tellus, porttitor non eleifend id, gravida id turpis. Etiam aliquam eros sed congue dapibus. Proin non vestibulum augue. Vivamus lobortis ipsum ut molestie pellentesque. Maecenas pharetra ullamcorper lectus, sit amet aliquam felis faucibus non. Donec fermentum nulla a erat ultrices, in blandit libero fringilla.</p>

    <p>Etiam sit amet congue elit, quis vulputate leo. Proin ac nibh consequat sapien aliquam gravida sed sed tortor. Aliquam erat volutpat. Proin malesuada fringilla dolor, et vestibulum massa interdum vel. Pellentesque lacinia nisl vitae interdum tristique. Vivamus orci lacus, interdum et nunc eget, luctus placerat nunc. In convallis neque quis odio porta efficitur. Mauris cursus ut neque nec ullamcorper. Nulla at vehicula lectus. In et iaculis mi, non egestas magna. Quisque sodales, ex eu fermentum tincidunt, diam metus pharetra eros, in rhoncus massa arcu et elit. Vivamus sit amet dolor neque. Vestibulum ut fringilla lectus. Etiam pharetra erat a ex efficitur, nec luctus metus faucibus. Sed vehicula hendrerit quam, et lobortis nisi ultrices ut. Mauris sit amet sollicitudin velit.</p>

    <p>Nullam leo lacus, dapibus nec risus vitae, maximus pharetra neque. Etiam fermentum, sapien quis lacinia venenatis, dui tellus placerat ligula, id feugiat lacus erat sed lectus. Vestibulum sagittis posuere ipsum, in imperdiet orci dignissim quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu mi dignissim, tristique nisl id, aliquam velit. Pellentesque volutpat lorem sed sollicitudin condimentum. Vestibulum finibus justo sed mollis venenatis. Suspendisse luctus velit quis massa varius ultricies. Praesent nunc erat, bibendum sit amet aliquam et, sodales quis elit. Praesent est urna, faucibus ut mi at, laoreet aliquam sem. Vestibulum vel erat vitae erat accumsan consequat ac id elit. Nullam iaculis mi id auctor gravida. Morbi egestas id felis ut volutpat.</p>

    <p>Nunc pharetra ut lectus at pellentesque. Donec egestas ornare feugiat. Aenean et justo ante. Suspendisse sit amet sagittis ante, in bibendum magna. Suspendisse quis tincidunt urna. Donec faucibus neque ut velit dignissim bibendum. Aenean imperdiet aliquam egestas. Curabitur rutrum nisl ligula, sit amet molestie massa volutpat id. Vivamus facilisis leo non purus malesuada efficitur. Praesent orci dolor, aliquet sed nunc vehicula, tincidunt posuere tellus. Nullam commodo quis nunc venenatis aliquam. Fusce blandit a nisi at interdum. Mauris non dui et neque eleifend ultrices nec a sem. Suspendisse euismod tellus sem, sit amet vestibulum nulla dignissim et. Aliquam erat volutpat. Fusce sed maximus velit, eu commodo libero.</p>

    <p>Proin vel tellus convallis, egestas eros in, tempor sapien. Nullam et tortor sit amet ante interdum vestibulum quis eu dolor. Morbi consequat magna in dolor elementum vestibulum. Fusce lacinia pretium sapien ac viverra. Nunc sollicitudin tellus orci, aliquet lobortis justo rutrum id. Nulla sollicitudin cursus est, sit amet malesuada diam interdum eu. Aliquam vel convallis nulla. Ut sed dui leo. Vivamus maximus justo tempor tellus bibendum, ac scelerisque urna malesuada. Aliquam tincidunt convallis est. Etiam non turpis sit amet lacus dapibus hendrerit eu a mi. Aenean scelerisque accumsan lectus, at ornare ante tempor at. Mauris interdum magna et massa tempor consectetur. Nulla eget magna diam. Sed ac metus imperdiet lectus imperdiet iaculis vitae quis lectus. Sed blandit, odio aliquam pretium tincidunt, leo ipsum imperdiet ipsum, nec tristique neque nunc vitae neque.</p>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Test</title>
	<style type="text/css">
	html{
	margin: 20px;
	}
	#stats{
	position: fixed;
	right: 20px;
	border-radius: 18px;
	border: solid 1px #000;
	padding: 18px;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font-weight: bold;
	}
	#stats td{
	text-align: right;
	padding: 6px;
	}
	#element{
	color: blue;
	margin: 0;
	border-top: solid 1px blue;
	border-bottom: solid 1px blue;
	}
	</style>
	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', (e) => {

	var stats = document.querySelector('#stats')
	var element = document.querySelector('#element')

	const check = (e) => {

	var margin = document.body.parentElement.offsetTop
	var viewportTop = window.scrollY - document.body.parentElement.offsetTop
	var viewportHeight = window.innerHeight - document.body.parentElement.offsetTop

	var dims = {
	pageTop: window.scrollY - margin,
	pageBottom: window.scrollY + window.innerHeight - margin,
	elementTop: element.offsetTop,
	elementBottom: element.offsetTop + element.clientHeight
	}

	document
	.querySelectorAll('p')
	.forEach(el => update(el, dims))

	stats.innerHTML = `<table>
	<tr><td>pageTop</td><td>${dims.pageTop}</td></tr>
	<tr><td>pageBottom</td><td>${dims.pageBottom}</td></tr>
	<tr><td>elementTop</td><td>${dims.elementTop}</td></tr>
	<tr><td>elementBottom</td><td>${dims.elementBottom}</td></tr>
	<tr><td>Blue In View?</td><td>${isInView(element, dims)}</td></tr>
	<!-- <tr><td></td><td></td></tr> -->
	</table>`
	}

	const update = (el, dims) => {
	var elementTop = el.offsetTop
	var elementBottom = el.offsetTop + el.clientHeight
	if (dims.pageTop < elementTop && dims.pageBottom > elementBottom) {
	// fully in view
	el.style.color = null
	} else if (elementTop <= dims.pageBottom && elementBottom >= dims.pageTop) {
	// partially in view
	el.style.color = 'red'
	} else {
	// out of view
	}
	}

	const isInView = (el, dims, fully) => {
	var elementTop = el.offsetTop
	var elementBottom = el.offsetTop + el.clientHeight
	return elementTop <= dims.pageBottom && elementBottom >= dims.pageTop
	}

	window.addEventListener('scroll', check)
	check()
	})
	</script>
	</head>
	<body>
	<div id="stats"></div>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor mi, auctor ac felis id, tempor porttitor orci. Duis scelerisque ligula risus. Quisque sollicitudin accumsan turpis eget tempus. Praesent vel iaculis ex. Vestibulum quam odio, mattis vitae risus vel, placerat dignissim arcu. Morbi viverra erat eu leo imperdiet, eget varius lorem aliquet. Morbi nec metus tristique, congue ligula ac, mattis odio. Nam pellentesque lacus turpis, hendrerit dapibus ex scelerisque ac. Vestibulum in molestie neque, at sagittis lorem. Sed a quam malesuada sapien ornare dapibus ut id odio. Vestibulum at felis quis felis ornare tempus at vitae est. Fusce ac diam pharetra, vestibulum est nec, lacinia sem. Nunc consectetur mi quis enim efficitur, vestibulum porttitor turpis imperdiet.</p>

	<p>Sed vulputate vitae metus id commodo. Maecenas viverra neque diam, non aliquet mi blandit et. Nulla vitae magna imperdiet, mollis lacus quis, ornare nunc. Etiam magna ante, fermentum vel neque et, bibendum pellentesque orci. Donec non elit metus. In facilisis dignissim ipsum vel venenatis. Vivamus feugiat ultrices interdum. Sed vel risus sodales, semper eros ut, volutpat lacus.</p>

	<p>Suspendisse id tincidunt erat. Fusce eleifend elementum vulputate. Aenean at tristique tortor, vel tempor metus. Suspendisse enim velit, elementum vel semper at, placerat ut ipsum. Integer velit arcu, scelerisque nec turpis vitae, tristique tempus diam. Sed interdum lectus a tincidunt egestas. Aliquam vehicula, ipsum at euismod convallis, lorem leo tristique ipsum, ac hendrerit risus ligula ullamcorper dolor. Praesent ornare arcu in dui aliquam, id pharetra quam ultricies. Nam auctor placerat nulla, ut fermentum tellus posuere in. Donec quis dui purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed justo lacus.</p>

	<p>In semper quam et orci placerat ultricies. In dignissim rutrum lacinia. Donec et vestibulum quam, sed fringilla nunc. Pellentesque laoreet faucibus risus ut dapibus. Vivamus congue ligula in ante consectetur, non laoreet risus elementum. Quisque dapibus nibh dolor, vel auctor lectus accumsan vel. Nullam scelerisque eros nisl, in semper ex aliquam hendrerit. Vivamus egestas nibh in diam sollicitudin feugiat. Pellentesque venenatis porttitor ante, vel convallis neque lobortis ut. Mauris metus eros, consectetur eu urna eget, dictum malesuada diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean porta dolor urna, nec volutpat turpis euismod viverra. Morbi molestie euismod lectus, id aliquet arcu fermentum nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur quam est, feugiat sit amet tempor sed, consequat eu lacus. Donec vehicula aliquet ex porttitor iaculis. Sed nibh orci, vehicula sit amet ex et, lacinia sollicitudin enim. Nunc volutpat hendrerit est, quis varius tellus varius nec. Nulla placerat hendrerit libero, eget maximus enim convallis nec. Aenean eu magna sagittis, cursus est non, interdum neque. In vitae elementum felis. Vivamus at augue vel turpis pretium hendrerit eu venenatis dolor. Nam vulputate felis vitae arcu finibus vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed efficitur risus nec semper tempor.</p>

	<p>Curabitur nec tortor orci. Morbi ac gravida turpis. Etiam ultrices scelerisque quam. Praesent scelerisque maximus nibh, a cursus orci. Sed a nulla vehicula arcu posuere elementum. Nunc varius massa elit, sed porttitor erat facilisis ut. Duis lectus nisl, volutpat in enim eu, suscipit volutpat lacus. Morbi vitae lorem lorem. Suspendisse potenti. Quisque ornare lacus ut nunc venenatis vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer mollis justo at euismod tincidunt. Nulla tellus eros, interdum vitae nibh in, euismod congue felis.</p>

	<p>Cras ornare ac lorem in tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales, felis sit amet fringilla feugiat, lorem nibh facilisis nulla, vitae interdum mauris felis id eros. Quisque id nibh dui. Cras sodales elementum nisi eget ornare. Proin dignissim iaculis urna, non maximus enim. Donec molestie lacinia ex sed eleifend. Pellentesque porta iaculis malesuada.</p>

	<p>Vivamus enim ipsum, tincidunt a turpis at, lacinia vehicula erat. Nunc mattis hendrerit malesuada. Fusce gravida augue a metus viverra mattis. Mauris nisl orci, maximus sollicitudin odio sit amet, rhoncus hendrerit odio. Vestibulum vitae ullamcorper metus. Etiam egestas, lectus sit amet consectetur vehicula, nibh nisl lobortis lorem, sed eleifend ex magna quis libero. Praesent vitae felis ac libero fermentum faucibus quis nec dui. Nulla ullamcorper rhoncus nibh, at sagittis tellus hendrerit in. Ut eu rutrum massa. Nam nec arcu vulputate, hendrerit arcu et, blandit libero.</p>

	<p>Aenean placerat quis nulla sed placerat. Praesent pretium sem sed nunc lacinia, ac ultrices justo consectetur. Donec non vehicula dolor. Nunc tellus ligula, ullamcorper non laoreet et, consectetur et est. Nunc volutpat lectus eget nibh tincidunt maximus. Curabitur ac pharetra odio. Mauris a blandit nisl. Aliquam erat volutpat. Integer lectus erat, maximus at nisl ut, convallis imperdiet dolor. In elit lorem, ullamcorper ut sapien ac, rutrum cursus ligula. Curabitur dolor magna, sodales eget vulputate quis, dapibus quis nisl. Nulla luctus lacus eget ligula facilisis ultrices. Donec posuere dui id eleifend facilisis. Nullam molestie, justo quis commodo pulvinar, mauris purus tincidunt tortor, in efficitur metus massa varius ex.</p>

	<p>Mauris eget urna sit amet felis posuere finibus. Cras ultricies lorem quis feugiat vehicula. Donec malesuada elementum tempor. Nullam ultricies justo eget est eleifend imperdiet. Suspendisse id magna turpis. Etiam eget auctor leo, elementum iaculis mauris. Aenean eros nulla, efficitur eu felis eu, ullamcorper feugiat risus. Nulla a massa a quam pellentesque mollis ac non magna. Curabitur vehicula nunc commodo mattis auctor. Curabitur volutpat dolor dui, non imperdiet elit finibus nec. Nullam aliquet, est eget auctor porta, neque quam porttitor felis, vitae ultricies ipsum ante sed sapien.</p>

	<p>Mauris ut mollis arcu, vel fringilla elit. Proin mollis, quam ut sagittis egestas, libero lectus suscipit lectus, et efficitur lacus massa a metus. Pellentesque non ultrices mauris. Nam urna est, luctus vel arcu nec, hendrerit euismod libero. Nulla eu justo sed quam accumsan hendrerit vitae congue lectus. Cras tincidunt magna nec justo auctor, non lobortis lorem fringilla. Nunc at venenatis diam. Fusce purus ante, sodales porttitor pharetra et, fringilla sit amet justo. Morbi sagittis sit amet turpis at volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque feugiat erat in dui suscipit eleifend. Maecenas consectetur rhoncus nisi et varius. Praesent aliquam, risus eget ultricies tincidunt, ligula mauris rhoncus turpis, vitae auctor ex sapien sed magna.</p>

	<p>Phasellus ut velit et eros faucibus convallis eu molestie dolor. Fusce et diam egestas, ullamcorper urna sed, pretium neque. Praesent pretium nisi luctus urna posuere, eu elementum ipsum ultricies. Ut quam ipsum, porta quis nisi vitae, tincidunt suscipit ipsum. Vivamus viverra laoreet turpis, id commodo lacus pellentesque et. Aenean ultrices nisi orci, ut sodales metus convallis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

	<p>Suspendisse quis eros condimentum, volutpat dolor vitae, pulvinar eros. Aenean risus dolor, placerat eu dui vitae, maximus blandit dolor. Curabitur sollicitudin enim augue, a aliquam velit mattis et. Cras augue sapien, consequat id venenatis non, sodales eget felis. Nulla facilisi. Mauris varius convallis mauris non faucibus. Sed dui sapien, condimentum a pharetra a, semper in nisi. Fusce aliquet interdum sem vel posuere. Mauris feugiat tincidunt nisl, at tempus urna sodales et. Aliquam vitae dignissim magna. Pellentesque gravida, mi ac convallis lacinia, mi mi laoreet arcu, a vulputate mauris sem at orci. Nunc tincidunt dapibus neque, quis semper metus eleifend vel.</p>

	<p id="element">Duis ullamcorper nulla sit amet lorem dapibus fermentum. Duis elementum, tortor nec pretium lacinia, nisl metus ullamcorper nunc, tempor condimentum ipsum urna vitae nibh. Integer pellentesque tempor vehicula. Etiam elementum egestas lorem, sit amet iaculis lectus tincidunt sit amet. Fusce luctus quam vitae leo faucibus, quis consequat ex aliquam. Sed id purus neque. Cras vestibulum pharetra tortor et consequat. Vivamus id eros semper sem commodo viverra. Nunc vel laoreet arcu. Morbi vitae ligula bibendum, porttitor ex id, bibendum massa. Aenean non justo non dolor scelerisque feugiat.</p>

	<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu auctor est, ut porta ligula. Proin libero ipsum, eleifend et consequat at, congue vel neque. Nam iaculis rutrum nisi, vitae tincidunt diam ullamcorper quis. Duis ut maximus ligula, ac rutrum ipsum. Nunc malesuada et quam sit amet pellentesque. Fusce velit sem, finibus sed efficitur ut, varius vitae ante.</p>

	<p>Vivamus tempus consequat arcu, ac ultricies sem placerat ut. Donec viverra vel diam vel dapibus. Nunc lacinia nisl in posuere tristique. Aenean sagittis dapibus nisi, id consequat libero ultrices et. Proin interdum, nisi in consectetur viverra, neque justo blandit leo, eleifend sodales quam quam nec erat. Aenean sem mauris, pulvinar a erat tincidunt, finibus suscipit erat. Sed eu ullamcorper metus. In hac habitasse platea dictumst. Duis id mi tortor. Pellentesque malesuada ligula id facilisis luctus. Pellentesque at eleifend lacus. Nunc eget tincidunt dui.</p>

	<p>Donec volutpat dui id varius auctor. Curabitur ornare nisi nisi, et lacinia neque lobortis non. Aenean pulvinar, nisl in luctus efficitur, purus lacus mattis massa, et fringilla turpis ante non odio. Nulla rutrum ultrices leo sit amet ultrices. Vestibulum suscipit sit amet nunc quis posuere. Ut a tempus ante. Ut finibus scelerisque tellus, eu gravida lacus vulputate ut. Morbi at pulvinar ipsum, non faucibus risus.</p>

	<p>Nam rutrum gravida nunc at vehicula. Quisque sem lacus, volutpat at convallis id, lacinia vitae libero. Mauris sollicitudin, metus non vehicula ultricies, lacus odio malesuada tellus, vel efficitur sapien dui sed neque. Vestibulum vel vestibulum odio, sed viverra dolor. Proin non pulvinar nunc. Proin ipsum nunc, vulputate a elit vitae, sollicitudin laoreet tortor. Cras lacinia purus in erat congue scelerisque. Maecenas sed tempor orci, vel dignissim diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet sapien turpis. Fusce vel faucibus velit.</p>

	<p>In feugiat rutrum vehicula. Donec justo arcu, vulputate vel placerat ac, eleifend nec est. Suspendisse ipsum nisl, porttitor eu imperdiet eget, porttitor sed magna. Aenean auctor cursus elementum. Nulla ac dui scelerisque, dignissim orci commodo, rutrum nulla. Etiam eu elit gravida, dignissim orci ut, convallis dui. Aenean sed erat sagittis, interdum quam ut, pulvinar libero. Pellentesque quis tortor eros. Donec nec eros porttitor, malesuada odio vel, tincidunt sapien. Curabitur commodo orci at massa mattis, ut sagittis sem tempus. Sed ac feugiat ligula, tempor aliquet ligula. Quisque nibh mauris, pulvinar tincidunt posuere ullamcorper, tempor ac mi. Aenean sit amet risus sit amet magna pellentesque bibendum ac id lorem.</p>

	<p>Morbi varius mattis enim a ullamcorper. Ut enim ipsum, pretium id ullamcorper a, hendrerit id erat. Phasellus pulvinar, erat a ultrices luctus, ex eros fermentum neque, sed mattis lectus massa eu mi. Mauris sed felis at libero aliquam accumsan sit amet id velit. Maecenas rhoncus mauris a nunc ullamcorper dignissim. Etiam tristique ipsum eget dignissim tristique. Praesent tristique sit amet erat nec lobortis. Proin vitae pretium ante, ut sodales turpis. Sed dignissim risus eget porttitor volutpat. Phasellus bibendum pellentesque dolor, nec tristique quam congue eget. Donec tempus nulla ut purus aliquam, eget tristique lacus semper. Donec tincidunt nunc vitae consequat lobortis. Quisque at massa ultrices, venenatis ex eget, faucibus turpis. Praesent et mi mi. Duis ut egestas neque.</p>

	<p>Ut dapibus purus eget commodo tincidunt. Duis blandit volutpat sodales. Mauris sed maximus lectus, eget ultricies augue. Nam convallis, neque id ullamcorper ullamcorper, est urna ultrices justo, ut condimentum ipsum metus sit amet urna. Nam congue interdum felis et aliquam. Fusce ut euismod diam, a aliquam ex. Sed eu dignissim nisi, sed vehicula eros. In porttitor accumsan velit et sodales. Etiam dolor tellus, porttitor non eleifend id, gravida id turpis. Etiam aliquam eros sed congue dapibus. Proin non vestibulum augue. Vivamus lobortis ipsum ut molestie pellentesque. Maecenas pharetra ullamcorper lectus, sit amet aliquam felis faucibus non. Donec fermentum nulla a erat ultrices, in blandit libero fringilla.</p>

	<p>Etiam sit amet congue elit, quis vulputate leo. Proin ac nibh consequat sapien aliquam gravida sed sed tortor. Aliquam erat volutpat. Proin malesuada fringilla dolor, et vestibulum massa interdum vel. Pellentesque lacinia nisl vitae interdum tristique. Vivamus orci lacus, interdum et nunc eget, luctus placerat nunc. In convallis neque quis odio porta efficitur. Mauris cursus ut neque nec ullamcorper. Nulla at vehicula lectus. In et iaculis mi, non egestas magna. Quisque sodales, ex eu fermentum tincidunt, diam metus pharetra eros, in rhoncus massa arcu et elit. Vivamus sit amet dolor neque. Vestibulum ut fringilla lectus. Etiam pharetra erat a ex efficitur, nec luctus metus faucibus. Sed vehicula hendrerit quam, et lobortis nisi ultrices ut. Mauris sit amet sollicitudin velit.</p>

	<p>Nullam leo lacus, dapibus nec risus vitae, maximus pharetra neque. Etiam fermentum, sapien quis lacinia venenatis, dui tellus placerat ligula, id feugiat lacus erat sed lectus. Vestibulum sagittis posuere ipsum, in imperdiet orci dignissim quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu mi dignissim, tristique nisl id, aliquam velit. Pellentesque volutpat lorem sed sollicitudin condimentum. Vestibulum finibus justo sed mollis venenatis. Suspendisse luctus velit quis massa varius ultricies. Praesent nunc erat, bibendum sit amet aliquam et, sodales quis elit. Praesent est urna, faucibus ut mi at, laoreet aliquam sem. Vestibulum vel erat vitae erat accumsan consequat ac id elit. Nullam iaculis mi id auctor gravida. Morbi egestas id felis ut volutpat.</p>

	<p>Nunc pharetra ut lectus at pellentesque. Donec egestas ornare feugiat. Aenean et justo ante. Suspendisse sit amet sagittis ante, in bibendum magna. Suspendisse quis tincidunt urna. Donec faucibus neque ut velit dignissim bibendum. Aenean imperdiet aliquam egestas. Curabitur rutrum nisl ligula, sit amet molestie massa volutpat id. Vivamus facilisis leo non purus malesuada efficitur. Praesent orci dolor, aliquet sed nunc vehicula, tincidunt posuere tellus. Nullam commodo quis nunc venenatis aliquam. Fusce blandit a nisi at interdum. Mauris non dui et neque eleifend ultrices nec a sem. Suspendisse euismod tellus sem, sit amet vestibulum nulla dignissim et. Aliquam erat volutpat. Fusce sed maximus velit, eu commodo libero.</p>

	<p>Proin vel tellus convallis, egestas eros in, tempor sapien. Nullam et tortor sit amet ante interdum vestibulum quis eu dolor. Morbi consequat magna in dolor elementum vestibulum. Fusce lacinia pretium sapien ac viverra. Nunc sollicitudin tellus orci, aliquet lobortis justo rutrum id. Nulla sollicitudin cursus est, sit amet malesuada diam interdum eu. Aliquam vel convallis nulla. Ut sed dui leo. Vivamus maximus justo tempor tellus bibendum, ac scelerisque urna malesuada. Aliquam tincidunt convallis est. Etiam non turpis sit amet lacus dapibus hendrerit eu a mi. Aenean scelerisque accumsan lectus, at ornare ante tempor at. Mauris interdum magna et massa tempor consectetur. Nulla eget magna diam. Sed ac metus imperdiet lectus imperdiet iaculis vitae quis lectus. Sed blandit, odio aliquam pretium tincidunt, leo ipsum imperdiet ipsum, nec tristique neque nunc vitae neque.</p>
	</body>
	</html>