Visi.js

javascript library to add event when dom element is partially in a viewport

by Hellfrom

HTML

<script src="https://cdn.rawgit.com/hellfrom/visi/master/visi.min.js"></script>
<div class = "p1"
	 id = "id1">


	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus aliquet vulputate. Cras feugiat laoreet magna,
	nec accumsan massa sollicitudin laoreet. Curabitur tincidunt, lacus at pellentesque ullamcorper, mauris leo porta
	est, et fringilla nisl lectus at quam. Proin et ornare massa. Aliquam iaculis, orci nec tincidunt consequat, mauris
	lectus dapibus erat, at convallis erat metus sit amet dolor. Duis ac faucibus turpis. Nulla ultricies metus non orci
	posuere sit amet ullamcorper nunc tincidunt. Curabitur eu velit sit amet leo volutpat lobortis. In quis libero nisl.
	Vivamus blandit eleifend nisi in sollicitudin. Morbi eget cursus dui. Vivamus massa odio, vehicula non euismod in,
	suscipit et urna. Cras nunc tellus, aliquam eu rutrum laoreet, pellentesque a neque. Vivamus imperdiet, diam sed
	vulputate pharetra, nisl turpis ullamcorper diam, quis aliquam ipsum justo vitae sem.

	Curabitur iaculis, mauris nec feugiat bibendum, tellus turpis auctor velit, id gravida ante arcu a leo. Vivamus
	tempus varius dignissim. Vestibulum ac lorem lorem, ut pharetra risus. Curabitur fringilla fringilla nulla a
	commodo. Donec quis eros non metus pharetra ullamcorper. Vivamus venenatis elit in augue tempor ac varius ligula
	porta. In egestas tortor non turpis congue tristique. Quisque vel fringilla mauris. Curabitur viverra scelerisque
	malesuada. Aenean faucibus viverra magna, ac eleifend urna vestibulum vehicula. Maecenas porttitor vestibulum
	tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id est
	et metus mattis fermentum pharetra sed purus. Ut tincidunt varius ultricies.

	Proin rutrum ultricies ante, vel cursus est consectetur quis. Vivamus id iaculis dui. Integer ultricies augue orci.
	Sed porta placerat lacinia. Sed quis felis libero. Ut ligula est, ullamcorper quis hendrerit eget,...

JavaScript

// var off = Visi.add(document.getElementById('id1'))
// 	.on('visible',function(){
// 		console.log('visible id1');
// 	})
// 	.getOff();
//
// off();

var visi = Visi.add(document.getElementById('id1'))
	.on('visible',function(){
		console.log('visible id1');
	});

visi.off();

visi.on('visible',function(){
	console.log('visible again');
});

// Visi.add(document.getElementById('id1')).once('hidden',function(){
Visi.add(document.querySelectorAll('.p1'))
	.on('hidden',function(element,off){
		console.log('hidden id1',element);
		console.log(arguments);
		off();
	});