aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorluciferreeves <[email protected]>2017-07-31 16:03:13 +0530
committerGitHub <[email protected]>2017-07-31 16:03:13 +0530
commit83557d593d1a8e5cf1a9fd49cc0b747969fe1158 (patch)
tree77020359d336bf1494dd980aa0d78cd29944a817
parentec38d27848db6b79fde8e2d9b167978f94f7bbf1 (diff)
downloadscrollr-83557d593d1a8e5cf1a9fd49cc0b747969fe1158.tar.xz
scrollr-83557d593d1a8e5cf1a9fd49cc0b747969fe1158.zip
index
Diffstat
-rw-r--r--index.html216
1 files changed, 216 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..34c1ba1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ <title>ScrollR</title>
+ <link rel="stylesheet" href="css/styles.min.css" type="text/css">
+ <link rel="shortcut icon" href="favicon3860.ico?v=1" type="image/x-icon">
+ <script src="js/scrollreveal.min.js"></script>
+ <script>
+ (function(){
+
+ var config = {
+ viewFactor : 0.15,
+ duration : 800,
+ distance : "0px",
+ scale : 0.8,
+ }
+
+ window.sr = new ScrollReveal(config)
+ })()
+
+ </script>
+ <style>
+ .sr .hero,
+ .sr .intro,
+ .sr .demo .block {
+ visibility: hidden;
+ }
+
+ </style>
+ </head>
+ <body>
+ <div class="crown">
+ <svg viewbox="0 0 48 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="logo">
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <rect fill="#FFCB36" x="3" y="0" width="6" height="18" rx="1.5"></rect>
+ <rect fill="#008597" x="27" y="0" width="6" height="32" rx="1.5"></rect>
+ <rect fill="#2EAD6D" x="15" y="0" width="6" height="8" rx="1.5"></rect>
+ <rect fill="#E31D65" x="15" y="14" width="6" height="18" rx="1.5"></rect>
+ <rect fill="#E31D65" x="39" y="0" width="6" height="18" rx="1.5"></rect>
+ <rect fill="#FF7C35" x="3" y="24" width="6" height="8" rx="1.5"></rect>
+ <rect fill="#5943AA" x="39" y="24" width="6" height="8" rx="1.5"></rect>
+ </g>
+ </svg>
+ <div class="title">ScrollR</div>
+
+ </div>
+ <div class="hero">
+ <svg width="96px" height="64px" viewbox="0 0 48 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="logo">
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <rect fill="#FFCB36" x="3" y="0" width="6" height="18" rx="1.5"></rect>
+ <rect fill="#008597" x="27" y="0" width="6" height="32" rx="1.5"></rect>
+ <rect fill="#2EAD6D" x="15" y="0" width="6" height="8" rx="1.5"></rect>
+ <rect fill="#E31D65" x="15" y="14" width="6" height="18" rx="1.5"></rect>
+ <rect fill="#E31D65" x="39" y="0" width="6" height="18" rx="1.5"></rect>
+ <rect fill="#FF7C35" x="3" y="24" width="6" height="8" rx="1.5"></rect>
+ <rect fill="#5943AA" x="39" y="24" width="6" height="8" rx="1.5"></rect>
+ </g>
+ </svg>
+ <h1 class="title"> ScrollR</h1>
+ <p class="intro">Easy scroll animations.</p>
+
+ </div>
+ <div class="demo">
+ <div class="column">
+ <div class="block red seq-1"></div>
+ <div class="block orange"></div>
+ <div class="block purple"></div>
+ <div class="block blue"></div>
+ </div>
+ <div class="column">
+ <div class="block orange seq-1"></div>
+ <div class="block purple"></div>
+ <div class="block red"></div>
+ <div class="block green"></div>
+ </div>
+ <div class="column">
+ <div class="block yellow seq-1"></div>
+ <div class="block blue"></div>
+ <div class="block green"></div>
+ <div class="block yellow"></div>
+ </div>
+ <div class="column">
+ <div class="block green seq-1"></div>
+ <div class="block yellow"></div>
+ <div class="block orange"></div>
+ </div>
+ <div class="column">
+ <div class="block blue seq-1"></div>
+ <div class="block red"></div>
+ <div class="block purple"></div>
+ <div class="block red"></div>
+ </div>
+ <div class="column">
+ <div class="block purple seq-1"></div>
+ <div class="block yellow"></div>
+ <div class="block orange"></div>
+ <div class="block purple"></div>
+ </div>
+ </div>
+ <div class="withLove"><span class="alpha">Made with</span>
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="92px" height="72px" viewBox="0 0 92 72" enable-background="new 0 0 92 72" xml:space="preserve" class="heart">
+ <g>
+ <path fill="#010101" d="M82.32,7.888c-8.359-7.671-21.91-7.671-30.271,0l-5.676,5.21l-5.678-5.21c-8.357-7.671-21.91-7.671-30.27,0 c-9.404,8.631-9.404,22.624,0,31.255l35.947,32.991L82.32,39.144C91.724,30.512,91.724,16.52,82.32,7.888z"></path>
+ </g>
+ </svg><span class="omega">by <a href="https://twitter.com/LuciferCReeves">@lucifer</a></span>
+ </div>
+
+ <script>
+ var stars
+ var data
+ var url
+ var xhr = new XMLHttpRequest()
+
+ url = "https://api.github.com/repositories/15975439"
+
+ xhr.open( "GET.html", url, true )
+
+ xhr.onreadystatechange = function(){
+ if ( xhr.readyState == 4 ) {
+ if ( xhr.status >= 200 && xhr.status < 400 ){
+ data = JSON.parse( xhr.responseText )
+ stars = document.querySelectorAll(".github .stars .count")
+ stars[0].innerHTML = stars[1].innerHTML = addCommasToNum( data.stargazers_count )
+ } else {
+ console.warn("Failed to resolve GitHub API.\n")
+ }
+ }
+ }
+
+ xhr.send()
+
+ </script>
+ <script>
+
+ var hero = {
+ origin : "top",
+ distance : "24px",
+ duration : 1500,
+ scale : 1.05,
+ }
+
+ var intro = {
+ origin : "bottom",
+ distance : "64px",
+ duration : 900,
+ delay : 1500,
+ scale : 1,
+ }
+
+ var github = {
+ origin : "top",
+ distance : "32px",
+ duration : 600,
+ delay : 1800,
+ scale : 0,
+ }
+
+ var block = {
+ reset: true,
+ viewOffset: { top: 64 }
+ }
+
+ sr.reveal(".demo .block", block)
+ sr.reveal(".hero", hero)
+ sr.reveal(".intro", intro)
+ sr.reveal(".hero .github", github)
+ sr.reveal(".seq-1", block, 200)
+
+ function addCommasToNum( num ){
+ return num.toString().replace( /\B(?=(\d{3})+(?!\d))/g, "," )
+ }
+
+ </script>
+ <script>
+ var crown = document.querySelector(".crown")
+ var demo = document.querySelector(".demo")
+
+ window.addEventListener( "scroll", scrollBrain, false )
+
+ var body = document.body,
+ html = document.documentElement;
+
+ var height = Math.max( body.scrollHeight, body.offsetHeight,
+ html.clientHeight, html.scrollHeight, html.offsetHeight )
+
+ function scrollBrain(){
+
+ if ( window.pageYOffset >= demo.offsetTop + 64 ){
+ return crown.classList.add("visible")
+ }
+ if ( crown.classList.contains("visible") ){
+ return crown.classList.remove("visible")
+ }
+ if ( window.pageYOffset >= 0.85 * ( height - window.clientHeight ) ) {
+ _gaq.push([ '_trackEvent', 'Behavior', 'Scroll', 'Viewed the entire page.'])
+ }
+ }
+
+ </script>
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','../www.google-analytics.com/analytics.js','ga')
+
+ ga("create", "UA-55186174-1", "auto")
+ ga("send", "pageview")
+ </script>
+ <!-- <script src="js/redpill.min.js"></script> -->
+ </body>
+
+<!-- Mirrored from scrollrevealjs.org/ by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 31 Jul 2017 06:54:03 GMT -->
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-05 22:21:59 +0000