Skip to content

/ Scrolline.js

Permalink
Branch: master
Find file Copy path

Scrolline.js/example/bottom.html

Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (56 sloc) 11.8 KB
Raw Blame History
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrolline | Example | Bottom and callback</title>
<meta name="author" content="Anthony Ly">
<meta name="description" content="Scrolline jQuery plugin">
<link rel="stylesheet" href="example.css">
</head>
<body>
<a class="github-ribbon" href="https://github.com/anthonyly"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="wrap">
<h1>Scrolline : bottom and callback</h1>
<ul>
<li><a href="index.html">Scrolline default</a></li>
<li><a href="reverse.html">Scrolline reverse</a></li>
<li><a href="vertical.html">Scrolline vertical left</a></li>
<li><a href="bottom.html">Scrolline bottom with opacity and callback</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<img src="img/1.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<img src="img/2.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<img src="img/3.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<img src="img/4.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit esse molestiae quis culpa, iure et magni impedit, consectetur odit quidem. Consequatur a sapiente eaque esse, perferendis soluta accusantium itaque expedita.</p>
<p class="copy">&copy; 2014, Lorem ipsum dolor sit amet</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../jquery.scrolline.js"></script>
<script>
$(function() {
$.scrolline({
position : 'bottom',
opacity : 0.6,
backColor : '#2c3e50',
frontColor : '#c0392b',
weight : 16,
scrollEnd : function() {
alert("This is scrolline's callback : scrollEnd :)");
}
});
});
</script>
</body>
</html>
You can’t perform that action at this time.