Permalink
Showing
with
522 additions
and 0 deletions.
- +56 −0 example/bottom.html
- +85 −0 example/example.css
- BIN example/img/1.jpg
- BIN example/img/2.jpg
- BIN example/img/3.jpg
- BIN example/img/4.jpg
- +47 −0 example/index.html
- +52 −0 example/reverse.html
- +53 −0 example/vertical.html
- +151 −0 jquery.scrolline.js
- +78 −0 readme.md
| @@ -0,0 +1,56 @@ | ||
| <!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">© 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> |
| @@ -0,0 +1,85 @@ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| html, body, div, span, applet, object, iframe, | ||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| b, u, i, center, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td, | ||
| article, aside, canvas, details, embed, | ||
| figure, figcaption, footer, header, hgroup, | ||
| menu, nav, output, ruby, section, summary, | ||
| time, mark, audio, video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, aside, details, figcaption, figure, | ||
| footer, header, hgroup, menu, nav, section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, blockquote:after, | ||
| q:before, q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
|
|
||
| /* Example style */ | ||
| .wrap { | ||
| font-size: 14px; | ||
| line-height: 1.8; | ||
| font-family: Helvetica, Arial, Sans-Serif; | ||
| width: 100%; | ||
| max-width: 600px; | ||
| padding: 100px 0 0; | ||
| margin: 0 auto; | ||
| color: #202020; | ||
| min-width: 200px; | ||
| } | ||
| a { | ||
| color: #2ecc71; | ||
| } | ||
| h1, p, img, ul { | ||
| display: block; | ||
| margin-bottom: 40px; | ||
| } | ||
| h1 { | ||
| text-align: center; | ||
| font-size: 32px; | ||
| } | ||
| p { | ||
| text-align: justify; | ||
| padding: 0 20px; | ||
| } | ||
| img { | ||
| width: 100%; | ||
| } | ||
| .copy, ul { | ||
| text-align: center; | ||
| } | ||
| .github-ribbon img { | ||
| width: auto; | ||
| } |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.