Design and Jekyll added
This commit is contained in:
Timm Szigat
parent
4ecb1e7cae
commit
b4415b675e
@ -1,7 +1,9 @@
|
||||
# Site settings
|
||||
title: chaospott
|
||||
title: chaospott - your gate to /dev/null
|
||||
email: info@chaospott.de
|
||||
description: Blog des CCC Essen Chaospott
|
||||
description: >
|
||||
Wir sind der örtliche Erfa-Kreis des Chaos Computer Clubs in Essen. Unsere Gesprächsthemen und Projekte reichen von Soft- und Hardware zu Datenschutz und Netzpolitik.
|
||||
Alle Interessierten sind herzlich zu unserem Treff eingeladen.
|
||||
baseurl: ""
|
||||
url: "http://chaospott.de"
|
||||
twitter_username: foobarev
|
||||
|
||||
@ -1,55 +1,36 @@
|
||||
<footer class="site-footer">
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<h2 class="footer-heading">{{ site.title }}</h2>
|
||||
|
||||
<div class="footer-col-wrapper">
|
||||
<div class="footer-col footer-col-1">
|
||||
<ul class="contact-list">
|
||||
<li>{{ site.title }}</li>
|
||||
<li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col footer-col-2">
|
||||
<ul class="social-media-list">
|
||||
{% if site.github_username %}
|
||||
<li>
|
||||
<a href="https://github.com/{{ site.github_username }}">
|
||||
<span class="icon icon--github">
|
||||
<svg viewBox="0 0 16 16">
|
||||
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span class="username">{{ site.github_username }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if site.twitter_username %}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{ site.twitter_username }}">
|
||||
<span class="icon icon--twitter">
|
||||
<svg viewBox="0 0 16 16">
|
||||
<path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span class="username">{{ site.twitter_username }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col footer-col-3">
|
||||
<p class="text">{{ site.description }}</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="container" id="contact">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>
|
||||
<span class="fa fa-map-marker"></span> <a href="http://nominatim.openstreetmap.org/search.php?q=foobar%2C+essen&viewbox=7.02%2C51.44%2C7.03%2C51.43">Sibyllastr. 9 (Hinterhof), 45136 Essen</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="fa fa-phone"></span> <a href="tel:+4912351235544">+49 (0) 1234 / 567 89 0</a>
|
||||
</p>
|
||||
<p>
|
||||
<span class="fa fa-envelope-o"></span> <span id="e701819447">[javascript protected email address]</span><script type="text/javascript">/*<![CDATA[*/eval("var a=\".Pc3y1Lh6oqgCSMluXaN-F0mWOK_ewAvVBdZstj2rpTf85+@iRznY4xI7QJUGkHD9Eb\";var b=a.split(\"\").sort().join(\"\");var c=\"fJE7GI7pJGESfffP5UU5xc85\";var d=\"\";for(var e=0;e<c.length;e++)d+=b.charAt(a.indexOf(c.charAt(e)));document.getElementById(\"e701819447\").innerHTML=\"<a href=\\\"mailto:\"+d+\"\\\">\"+d+\"</a>\"")/*]]>*/</script>
|
||||
<br>
|
||||
<span class="fa fa-lock"></span> <a href="media/ccc-essen.pgp">01CB 5D67 4100 6A17 2492 739D 4592 4F8A 867E D719</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p>
|
||||
<i class="fa fa-twitter"></i> <a href="https://twitter.com/foobarev">@foobarev</a>
|
||||
</p>
|
||||
<p>
|
||||
<span class="fa fa-inbox"></span> <a href="https://lists.cccmz.de/mailman/listinfo/chaostreff-essen"><span id="e699026149">[javascript protected email address]</span><script type="text/javascript">/*<![CDATA[*/eval("var a=\"fnF9IG32pj+g0bLHEk6w-Y_Z4NzqaSTWCeVMxXBoudQJ8cKhO@1sD5t.ilrAPvUyR7m\";var b=a.split(\"\").sort().join(\"\");var c=\"JOd.APrcKKncAActnAvQAJr@QcbD@APAFJJJ5mF8c\";var d=\"\";for(var e=0;e<c.length;e++)d+=b.charAt(a.indexOf(c.charAt(e)));document.getElementById(\"e699026149\").innerHTML=d")/*]]>*/</script></a>
|
||||
<br>
|
||||
<span class="fa fa-comments"></span>
|
||||
<a href="http://hackint.eu">hackint.eu</a>
|
||||
|
||||
( <a href="irc://hackint.eu/chaospott">#chaospott</a> )
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa fa-github"></i> <a href="https://github.com/c3e">c3e</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width initial-scale=1" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
|
||||
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<meta charset="utf-8" />
|
||||
<title>
|
||||
{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
|
||||
</title>
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
<meta name="viewport" content="width=device-width initial-scale=1" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<script src="{{ "/bootstrap/js/jquery-2.1.1.min.js" | prepend: site.baseurl }}" type="text/javascript"></script>
|
||||
<script src="{{ "/bootstrap/js/bootstrap.js" | prepend: site.baseurl }}" type="text/javascript"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ "/bootstrap/css/bootstrap.css" | prepend: site.baseurl }}">
|
||||
<!--<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css">-->
|
||||
<link rel="stylesheet" type="text/css" href="{{ "/css/style.css" | prepend: site.baseurl }}">
|
||||
<link href="http://fonts.googleapis.com/css?family=Share+Tech" rel="stylesheet" type="text/css">
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
@ -1,27 +1,13 @@
|
||||
<header class="site-header">
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
|
||||
|
||||
<nav class="site-nav">
|
||||
<a href="#" class="menu-icon">
|
||||
<svg viewBox="0 0 18 15">
|
||||
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
||||
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
||||
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="trigger">
|
||||
{% for page in site.pages %}
|
||||
{% if page.title %}
|
||||
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-fixed-top" role="navigation">
|
||||
<hr style="margin:0; border-color:green; border-width:4px 0px;">
|
||||
<div class="container">
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/blog.html">Logbuch</a></li>
|
||||
<li><a href="/#about">Über uns</a></li>
|
||||
<li><a href="#contact">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
</nav>
|
||||
|
||||
@ -1,20 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
<div class="page-content">
|
||||
<div class="wrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<div class="container-fluid large-header" id="large-header">
|
||||
<canvas id="demo-canvas" style="position:absolute;"></canvas>
|
||||
<div class="row row-centered">
|
||||
<div class="col-centered">
|
||||
<img src="{{ "/images/logo.png" | prepend: site.baseurl }}" alt="Chaospott Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
{{ content }}
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
<script src="{{ "/js/TweenLite.min.js" | prepend: site.baseurl }}"></script>
|
||||
<script src="{{ "/js/EasePack.min.js" | prepend: site.baseurl }}"></script>
|
||||
<script src="{{ "/js/rAF.js" | prepend: site.baseurl }}"></script>
|
||||
<script src="{{ "/js/eyecandy.js" | prepend: site.baseurl }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{{ page.title }}</h1>
|
||||
<p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
|
||||
</header>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 post">
|
||||
|
||||
<article class="post-content">
|
||||
{{ content }}
|
||||
</article>
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{{ page.title }}</h1>
|
||||
<p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
{{ content }}
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
7
_posts/2014-07-04-cryptoparty.markdown
Normal file
7
_posts/2014-07-04-cryptoparty.markdown
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Cryptoparty"
|
||||
date: 2014-07-04 13:37:42
|
||||
categories: cryptoparty
|
||||
---
|
||||
Am 22. Juli 2014 um 19 Uhr veranstaltet der CCC-Essen in seinen Räumlichkeiten (Sibyllastr. 9, Essen-Süd) eine Cryptoparty und läd dazu alle Interessierten ein. Da unsere Räume nur begrenzt Platz bieten, wird um eine Anmeldung per Email an cryptoparty@ccc-essen.de gebeten. Bei entsprechendem Interesse wird es auch weitere Cryptoparties geben. Weitere Informationen finden sich unter
|
||||
15
_posts/2014-08-02-freifunk-nord-open-air.markdown
Normal file
15
_posts/2014-08-02-freifunk-nord-open-air.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Freifunk versorgt Nord Open Air mit Internet"
|
||||
date: 2014-08-02 13:37:42
|
||||
categories: freifunk
|
||||
---
|
||||
Alles begann mit einer Anfrage des Nord Open Air Veranstalters: “Wir brauchen auf dem Open Air Internet im Backstage. Könnt ihr da was machen?”
|
||||
|
||||
Klar konnten wir. Das Cafe Nord ist bereits mit einem Freifunk-Router ausgestattet und so mussten wir nur das Signal verlängern. Bei der Suche nach der passenden Antenne kam die Idee auf, nicht nur die Bands im Backstage, sondern direkt alle Besucher mit Internetz zu versorgen. Gesagt getan. 8 Router wurden mit aktueller Firmware bespielt und in Bierwagen, auf der Bühne und im angrenzenden Cafe aufgestellt und mit Strom versorgt. Gespannt beobachteten wir den Netzwerkgraphen, um zu sehen, ob das Mesh-Netz auch funktionierte. W00t!
|
||||
|
||||
An den Festivaltagen waren keine grossen Ausfälle zu verzeichnen. Auch wenn einzelne Router versehentlich abgestöpselt wurden, übernahmen die anderen die Weiterleitung der Datenpakete. An einem Router wurden über 40 Clients beobachtet. Das Angebot nutzten bis zu 150 Benutzer gleichzeitig. Ein voller Erfolg.
|
||||
|
||||
Ich möchte gerne Timm und gammlaa für’s Knowhow, Cafe Babel für Upstream und Cafe Nord für die Unterstützung danken.
|
||||
|
||||
Julian
|
||||
15
_posts/2014-08-14-bbq2014_11_jahre_ctdto.mardown
Normal file
15
_posts/2014-08-14-bbq2014_11_jahre_ctdto.mardown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: post
|
||||
title: "BBQ 2014 - 10+1 Jahre Chaostreff Dortmund"
|
||||
date: 2014-08-14 13:37:42
|
||||
categories: essen auf rädern
|
||||
---
|
||||
Der Chaostreff Dortmund lud am 07.06.14 zum BBQ, um das 10+1-jährige Jubiläum zu feiern. Eine gute Gelegenheit, um die erweiterten Räumlichkeiten im Langen August zu besuchen. Der “Langer August” ist ein selbstverwaltendes Initiativenhaus, in dem der CTDo seit 2005 beheimatet ist. Die Clubräume befinden sich in der zweiten Etage und sind mit einer großen Elektronikwerkstatt und zwei weiteren Räumen deutlich größer geworden. Die Elektronikwerkstatt bietet viel Platz und eine gute Ausstattung zum Basteln. Ein Gast sagte, dass sein Kind Erfinder werden möchte und sie/er deshalb zum BBQ gekommen sei, um sich den Hackerspace anzuschauen. Bei der Ausstattung sollte das Erfinden kein Problem sein. In den hinteren Räumen wurden Schneidplotter, Lasercutter, Drehbank, CNC-Fräse und Lagerfläche gesichtet. Der Seminarraum im ausgebauten Dachboden steht allen Initiativen des Hauses zur Verfügung und wird vom CTDo für Vorträge genutzt. Insgesamt ein großartiger Rahmen, um das 10+1-jährige Bestehen zu feiern.
|
||||
|
||||
Bei kühlen Getränken und gestärkt durch ein großes Buffet in der Küche, wurden viele bekannte Gesichter und Gäste gesichtet. In der Elektronikwerkstatt wurde sich ausgiebig über 3D-Druck ausgetauscht und nach Lösungen für bessere Druckergebnisse gesucht. Neben den häufig anzutreffenden Druckern, sei es RepRap oder Makerbot, gingen mehrere “Delta-Drucker” ihrer Arbeit nach und druckten Testfiguren oder Verbindungselemente für weitere Drucker. Den Rahmen bilden Fischer Technik-Profile, die mit ausgedruckten Eckstücken verbunden sind. Beeindruckend ist die Druckqualität dieser Geräte, die von kommerziellen Produkten nicht zu unterscheiden ist.
|
||||
|
||||
An einer anderen Tischecke wurden einige Flipdot-Panele gesichtet, die ihren Weg von muCCC nach Dortmund gefunden hatten. Nachdem die Treiberplatine zusammengelötet war, wurde mit der Hilfe der Dokumentation das passende Image und die richtigen Treiber für den Raspi gesucht. Zu später Stunde erfüllte ein Testprogramm die Clubräume mit dem bekannten Klackern der Anzeigen. Bei der Geräuschkulisse schlugen die Herzen einiger Hacker etwas schneller.
|
||||
|
||||
In der Sofaecke wurde sich über Neuigkeiten aus dem Clubumfeld ausgetauscht. Ewige Diskussionen auf der Mailingliste, Platzmangel und Gäste, die das Darknet suchen, sind auch beim CTDo bekannt. Neben Anekdoten und Geschichten aus Zeiten, in denen die Bandbreite zum Datentransfernetz nur wenige kByte betrug, wurden noch Tipps für den Bau eines Hexacopter, Spaceinvaders aus Holz und Stempel für den Hackerpass eingesammelt.
|
||||
|
||||
Vielen Dank für netten Abend.
|
||||
9
_posts/2014-10-17-chaospott2_0.markdown
Normal file
9
_posts/2014-10-17-chaospott2_0.markdown
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Chaospot 2.0"
|
||||
date: 2014-10-17 12:58:29
|
||||
categories: space update
|
||||
---
|
||||
Zusätzlich zu den Kellerräumen ist seit dem 1. Juni 2014 ein Büro in der ersten Etage angemietet. Die angestiegende Anzahl der aktiven Entitäten und das gewachsene Interesse an der Vortragsreihe “Petitfoo” sorgten vor allem während des Chaostreffs für Platzmangel und stickige Luft.
|
||||
|
||||
Da sich der Chaospott im Hofgebäude der Sibyllastraße 9 wohl fühlt, kam das Angebot für das Büro im 1.OG sehr gelegen. Auf den ca. 130 qm hat sich in den letzten Monaten vieles getan. Die Sofalandschaft ist zusammen mit der Bespaßungtechnik für Auge und Ohr in das OG umgezogen. Der freigewordene Raum im Keller wurde gestrichen und dank einer Spende haben drei Laborschränke den Weg in selbigen gefunden. Das Netzwerk hat auch das Level 2.0 erreicht, dazu wurde ein Rack für Server und Router sowie leistungsstarke Access Points angeschafft und teilweise mit Lichtwellenleitern verbunden. Damit man auch die zweite Tür elektronisch öffnen und schließen kann, wird an einer Erweiterung der foodoor gebastelt. Ein RaspberryPi steuert über die Erweiterungsplatine “PiFaceDigital” diverse Taster, den Summer und die Schließelektronik an. Nach einer lustigen Diskussion auf diversen Kanälen wurde der kleinste Raum Bällebad getauft, welches in naher Zukunft neben der Bibliothek auch einen 3D-Drucker beherbergen wird. Da Bilder mehr als 1216 Zeichen (ohne Leerzeichen inklu. Überschrift) sagen, gibt es an dieser Stelle ein paar Bilder.
|
||||
25
_posts/2014-10-18-welcome-to-jekyll.markdown
Normal file
25
_posts/2014-10-18-welcome-to-jekyll.markdown
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Welcome to Jekyll!"
|
||||
date: 1970-01-01 12:58:29
|
||||
categories: jekyll update
|
||||
---
|
||||
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve --watch`, which launches a web server and auto-regenerates your site when a file is updated.
|
||||
|
||||
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
|
||||
|
||||
Jekyll also offers powerful support for code snippets:
|
||||
|
||||
{% highlight ruby %}
|
||||
def print_hi(name)
|
||||
puts "Hi, #{name}"
|
||||
end
|
||||
print_hi('Tom')
|
||||
#=> prints 'Hi, Tom' to STDOUT.
|
||||
{% endhighlight %}
|
||||
|
||||
Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll’s dedicated Help repository][jekyll-help].
|
||||
|
||||
[jekyll]: http://jekyllrb.com
|
||||
[jekyll-gh]: https://github.com/jekyll/jekyll
|
||||
[jekyll-help]: https://github.com/jekyll/jekyll-help
|
||||
@ -2,7 +2,7 @@
|
||||
* Reset some basic elements
|
||||
*/
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre, hr,
|
||||
p, blockquote, pre,
|
||||
dl, dd, ol, ul, figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
23
blog.html
Normal file
23
blog.html
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% for post in site.posts %}
|
||||
{% if forloop.first == false %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
<div class="container" id="posts">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>{{ post.title }}</h2>
|
||||
<p>
|
||||
{{ post.content | truncatewords:200 }}
|
||||
</p>
|
||||
{% assign wordcount = post.content | number_of_words %}
|
||||
{% if wordcount > 200 %}
|
||||
<p><a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}" role="button">> Weiterlesen</a></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
96
css/style.css
Normal file
96
css/style.css
Normal file
@ -0,0 +1,96 @@
|
||||
* {
|
||||
background-color:transparent;
|
||||
font-family: 'Share Tech', sans-serif;
|
||||
}
|
||||
|
||||
#large-header {
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
body, .jumbotron {
|
||||
background-color:#d2d4bc;
|
||||
}
|
||||
|
||||
.jumbotron h1 {
|
||||
font-size:26px;
|
||||
font-weight:bold;
|
||||
margin-top:50px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
/* background-color:#350505; */
|
||||
background-color:#d2d4bc;
|
||||
border:none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
ul.navbar-nav li {
|
||||
border-right:1px red solid;
|
||||
}
|
||||
|
||||
ul.navbar-nav li:last-child {
|
||||
border-right:0;
|
||||
}
|
||||
|
||||
ul.navbar-nav li a {
|
||||
color:red !important;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border:0;
|
||||
background-color:transparent;
|
||||
color:red;
|
||||
}
|
||||
|
||||
a {
|
||||
color:red;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color:#800032;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding:50px 0px;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
#large-header {
|
||||
background-color:#222;
|
||||
height:500px;
|
||||
margin-bottom:160px;
|
||||
}
|
||||
|
||||
#large-header img {
|
||||
position:relative;
|
||||
top:75px;
|
||||
}
|
||||
|
||||
.row-centered {
|
||||
text-align:center;
|
||||
}
|
||||
.col-centered {
|
||||
display:inline-block;
|
||||
float:none;
|
||||
/* reset the text-align */
|
||||
text-align:left;
|
||||
/* inline-block space fix */
|
||||
margin-right:-4px;
|
||||
}
|
||||
|
||||
ul.nav>li>a {
|
||||
color:red;
|
||||
}
|
||||
|
||||
.jumbotron>hr {
|
||||
background-color:black;
|
||||
height:1px;
|
||||
border: 3px #333 solid;
|
||||
width:300px;
|
||||
}
|
||||
1
external/skrollr/.gitignore
vendored
1
external/skrollr/.gitignore
vendored
@ -1 +0,0 @@
|
||||
node_modules/
|
||||
3
external/skrollr/.travis.yml
vendored
3
external/skrollr/.travis.yml
vendored
@ -1,3 +0,0 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 0.10
|
||||
15
external/skrollr/CONTRIBUTING.md
vendored
15
external/skrollr/CONTRIBUTING.md
vendored
@ -1,15 +0,0 @@
|
||||
Questions belong to StackOverflow
|
||||
=====
|
||||
|
||||
GitHub is for issues and feature requests. Anything else belongs to [StackOverflow](http://stackoverflow.com/questions/ask?tags=skrollr).
|
||||
|
||||
Pull requests
|
||||
=====
|
||||
|
||||
Will be ignored if the Travis build fails. Install grunt and run `grunt jshint qunit` locally before submitting pull requests.
|
||||
|
||||
Do not include build files in your pull request (e.g. `skrollr.min.js`).
|
||||
|
||||
Do not change the version number in your pull request.
|
||||
|
||||
Do not try to fix multiple issues or add multiple features with a single pull request. A pull request should only do one thing.
|
||||
51
external/skrollr/Gruntfile.js
vendored
51
external/skrollr/Gruntfile.js
vendored
@ -1,51 +0,0 @@
|
||||
module.exports = function(grunt) {
|
||||
//Configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json') ,
|
||||
jshint: {
|
||||
options: {
|
||||
smarttabs: false,
|
||||
curly: true,
|
||||
immed: true,
|
||||
latedef: true,
|
||||
noarg: true,
|
||||
quotmark: 'single',
|
||||
undef: true,
|
||||
unused: true,
|
||||
strict: true,
|
||||
trailing: true,
|
||||
globals: {
|
||||
window: true,
|
||||
document: true,
|
||||
navigator: true,
|
||||
define: true,
|
||||
module: true
|
||||
}
|
||||
},
|
||||
all: ['src/**/*.js']
|
||||
},
|
||||
qunit: {
|
||||
all: ['test/index.html', 'test/loading.html']
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '/*! skrollr <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>) | Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr | Free to use under terms of MIT license */\n'
|
||||
},
|
||||
|
||||
all: {
|
||||
files: {
|
||||
'dist/skrollr.min.js': 'src/skrollr.js'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//Dependencies.
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
|
||||
//Tasks.
|
||||
grunt.registerTask('default', ['jshint', 'qunit', 'uglify']);
|
||||
grunt.registerTask('travis', ['jshint', 'qunit']);
|
||||
};
|
||||
313
external/skrollr/HISTORY.md
vendored
313
external/skrollr/HISTORY.md
vendored
@ -1,313 +0,0 @@
|
||||
0.6.26 (2014-06-08)
|
||||
-------------------
|
||||
|
||||
* Fixed easing functions not working when animating attributes (#533)
|
||||
|
||||
0.6.25 (2014-05-22)
|
||||
-------------------
|
||||
|
||||
* CommonJS (#519).
|
||||
|
||||
0.6.24 (2014-04-25)
|
||||
-------------------
|
||||
|
||||
* Fixed some issue with forceHeight (#347).
|
||||
* Fixed a regression caused by #486 breaking IE 8 (#494).
|
||||
* Added support for animating attributes (#204).
|
||||
|
||||
0.6.23 (2014-04-18)
|
||||
-------------------
|
||||
|
||||
**note**: This particular version is broken in IE!
|
||||
|
||||
* Experimental support for emitting events when the scrolling passes a keyframe (check out the docs for `keyframe` option/event).
|
||||
* When using `refresh`, make sure elements which do not longer have keyframes get properly cleaned up (#486).
|
||||
* Fixed `refresh` not accepting `NodeList`s (#435).
|
||||
* Expose the status of mobile mode as `isMobile()` function (#488).
|
||||
|
||||
0.6.22 (2014-02-21)
|
||||
-------------------
|
||||
|
||||
* Experimental AMD support (#409). Please read the documentation about it.
|
||||
|
||||
0.6.21 (2014-01-06)
|
||||
-------------------
|
||||
|
||||
* Disabled mobile mode on Windows Phone, since it's not needed there (#408).
|
||||
|
||||
0.6.20 (2014-01-03)
|
||||
-------------------
|
||||
|
||||
* Fixed broken percentage constants.
|
||||
|
||||
0.6.19 (2014-01-02)
|
||||
-------------------
|
||||
|
||||
* Constants can now be defined as functions or percentage offsets (#148, #404).
|
||||
|
||||
**breaking**: When using a constant of value `100` together with percentage offsets like `data-_foo-75p`,
|
||||
the value was implicitly handled as percentage value `100p`. Starting with this version you need to explcitly use `100p` if you want percentage constants.
|
||||
On the plus side, you can now mix an absolute constant with a percentage keyframe or a percentage constant with an absolute keyframe.
|
||||
|
||||
0.6.18 (2013-12-18)
|
||||
-------------------
|
||||
|
||||
* Fixed scrolling on input elements (#397).
|
||||
|
||||
0.6.17 (2013-10-19)
|
||||
------
|
||||
|
||||
* Fixed keyboard not appearing on some mobile browsers when an input was focused (#349).
|
||||
|
||||
0.6.16 (2013-10-18)
|
||||
------
|
||||
|
||||
* Fixed `z-index:auto;` not working because it was always coerced to an integer (#351).
|
||||
|
||||
0.6.15 (2013-10-03)
|
||||
------
|
||||
|
||||
* Fixed clicking on links (and other elements) on mobile (#263, #303, #338).
|
||||
* Added `getMaxScrollTop` method (#238).
|
||||
|
||||
0.6.14 (2013-10-03)
|
||||
------
|
||||
|
||||
* Fixed the `direction` parameter that's passed to the render events (#339).
|
||||
|
||||
0.6.13 (2013-09-29)
|
||||
-----
|
||||
|
||||
* Added support for percentage offsets (#185).
|
||||
|
||||
0.6.12 (2013-09-17)
|
||||
-----
|
||||
|
||||
* Added `destroy` method (#109).
|
||||
|
||||
0.6.11 (2013-08-13)
|
||||
-----
|
||||
|
||||
* Made the mobile deceleration configurable and lowered the default (#222, #229).
|
||||
|
||||
0.6.10 (2013-07-30)
|
||||
-----
|
||||
|
||||
* Fixed bug which caused IE to perform an endless loop (#271).
|
||||
|
||||
0.6.9 (2013-07-01)
|
||||
-----
|
||||
|
||||
* Improved overall performance for mobile (#249).
|
||||
|
||||
0.6.8 (2013-06-17)
|
||||
-----
|
||||
|
||||
* Added a new option `smoothScrollingDuration`.
|
||||
|
||||
0.6.7 (2013-06-17)
|
||||
-----
|
||||
|
||||
* Changed the default value of `edgeStrategy` from `ease` to `set`. There are too many cases where `ease` was not wanted and unexpected.
|
||||
|
||||
0.6.6 (2013-06-05)
|
||||
-----
|
||||
|
||||
* Fixed IE plugin not working. This was caused by assigning `skrollr.setStyle` to a local variable inside the skrollr core. Since the IE plugin monkey-patches the skrollr.setStyle function, the core didn't notice the change (#199 comment 18986949).
|
||||
|
||||
0.6.5 (2013-05-22)
|
||||
-----
|
||||
|
||||
* Fixed crash in IE < 9 because the detected prefix was `null` (#220).
|
||||
|
||||
0.6.4 (2013-05-21)
|
||||
-----
|
||||
|
||||
* Fixed that some elements got the `skrollable-before` **and** `skrollable-after` class at the same time.
|
||||
|
||||
0.6.3 (2013-05-19)
|
||||
-----
|
||||
|
||||
* When resizing the browser, the scroll position was reset to 0 (#217)
|
||||
|
||||
0.6.2 (2013-05-18)
|
||||
-----
|
||||
|
||||
* When resizing the browser, `forceHeight` was colliding with the already forced height (#216).
|
||||
|
||||
0.6.1 (2013-05-18)
|
||||
-----
|
||||
|
||||
* Allow numbers inside of easing function names (#152).
|
||||
|
||||
0.6.0 (2013-05-18)
|
||||
-----
|
||||
|
||||
**Expect things to break when coming from 0.5! Read through the changelog. Migration is not hard.**
|
||||
|
||||
* **[breaking]** There's no more `skrollr.mobile.js` file. You only need `skrollr.js`. You no longer need to conditionally include `skrollr.mobile.js`.
|
||||
* You can configure how skrollr detects mobile browsers using the `mobileCheck` option (check out the documentation).
|
||||
* **[possibly breaking]** The meaning of the `#skrollr-body` element changed. Put all static elements inside of it and all absolute/fixed elements outside. It doesn't need to be the first child of the body anymore.
|
||||
* **[breaking]** The `rendered` and `unrendered` classes where renamed because they were confusing and wrong. They're now called `skrollable-before` and `skrollable-after`, because that's their meaning (the element with these classes is before/after the first/last keyframe).
|
||||
* Added a new class `skrollable-between`, because symmetry. That's why.
|
||||
* Easing functions are now applied when exactly at a keyframe (#132).
|
||||
* **[possibly breaking]** The behavior changed for the case when the scroll position is before/after the first/last keyframe (I'm just gonna use "before first" from now on, because "after last" is analog). In 0.5 the behavior was not exactly specified and buggy (see item above regarding #132). Skrollr was applying the styles of the first keyframe to the element for all scroll position that were before the first keyframe. E.g. when `data-100="top:200px;"` was the first keyframe, the element had `top:200px;` at all scroll positions before (all from `0` to `99`). From now on you can specify the behavior you want (see `edgeStrategy` option for details, set it to `set` for old behavior). **Note: 0.6.7 and up use `set` as default.**
|
||||
|
||||
|
||||
0.5.14
|
||||
-----
|
||||
|
||||
* Add a `skrollr-mobile` class to the html element when the mobile script is included.
|
||||
|
||||
0.5.13 (2013-02-08)
|
||||
-----
|
||||
|
||||
* #131: Use a cross browser approach for getting the body scroll-height.
|
||||
* #133: Use the maximum of document height or the max keyframe for edge cases where absolute keyframes are used in a relative-mode-like document and `data-end` was calculated wrong.
|
||||
|
||||
0.5.12 (2013-02-08)
|
||||
-----
|
||||
|
||||
* #121: Fixed prefix detection in Safari.
|
||||
|
||||
0.5.11 (2013-01-18)
|
||||
-----
|
||||
|
||||
* #126: When calling refresh(), force rerendering, even if the scrollbar didn't move.
|
||||
|
||||
0.5.10
|
||||
-----
|
||||
|
||||
* #104: Fixed the most annoying bug on mobile. There was a large blank space at the bottom of the page.
|
||||
|
||||
0.5.9
|
||||
-----
|
||||
|
||||
* #118: Fixed broken prefix detection. Was broken all the time, but worked before Firefox 18.
|
||||
|
||||
0.5.8 (2013-01-12)
|
||||
-----
|
||||
|
||||
* #116 + #117: SVG support was broken for relative mode.
|
||||
|
||||
0.5.7
|
||||
-----
|
||||
|
||||
* #103: skrollr no longer depends on being added to the bottom of the document.
|
||||
|
||||
0.5.6
|
||||
-----
|
||||
|
||||
* #105: Fixed inconsistent behaviour for adding `rendered` and `unrendered` class on page load
|
||||
|
||||
0.5.5
|
||||
-----
|
||||
|
||||
* #100: Fixed relative-mode not working correctly in IE < 9 due to crippled getBoundingClientRect
|
||||
|
||||
0.5.4 (2012-11-18)
|
||||
-----
|
||||
|
||||
* #80: When resizing the browser window the calculation of relative mode was wrong when the element's vertical position was changed before.
|
||||
|
||||
0.5.3
|
||||
-----
|
||||
|
||||
* #66: Make IE 7 support a light version of `data-anchor-target` by mapping `querySelector` to `getElementById`.
|
||||
|
||||
0.5.2
|
||||
-----
|
||||
|
||||
* #78: Fixed that new parser didn't allowed omitting the last semicolon in a keyframe property list.
|
||||
|
||||
0.5.1 (2012-10-29)
|
||||
-----
|
||||
|
||||
* Fixed `setScrollTop` and `animateTo` not working because iScroll uses negative offset.
|
||||
|
||||
0.5.0 (2012-10-09)
|
||||
-----
|
||||
|
||||
* *breaking* the `plugin` api has been removed (the IE plugin has been updated to a new, hidden api).
|
||||
* Full mobile support using iscroll.
|
||||
* #73: Fixed parser to not mess up colons inside URLs
|
||||
* #74: Fixed parser to not treat single periods as decimal numbers
|
||||
* #76: Fixed dummy element overlaping the content, even though it should be unobtrusive
|
||||
|
||||
0.4.13
|
||||
-----
|
||||
|
||||
* #58: `forceHeight` now handles relative mode like a boss.
|
||||
* #59: Make `scale` option only affect absolute mode.
|
||||
|
||||
0.4.12
|
||||
-----
|
||||
|
||||
* #64: Setting `float` property using JavaScript didn't work across browser. Now using `styleFloat` and `cssFloat` properties.
|
||||
|
||||
0.4.11 (2012-09-17)
|
||||
-----
|
||||
|
||||
* The `scale` option does not affect `constants`.
|
||||
|
||||
0.4.10
|
||||
-----
|
||||
|
||||
* Allow smooth scrolling on element level using `data-smooth-scrolling`
|
||||
|
||||
0.4.9
|
||||
-----
|
||||
|
||||
* Added experimental smooth scrolling (no more CSS transitions. WORKS IN IE.).
|
||||
|
||||
0.4.8
|
||||
-----
|
||||
|
||||
* Added `stopAnimateTo` method.
|
||||
|
||||
0.4.7
|
||||
-----
|
||||
|
||||
* Updated the requestAnimationFrame polyfill for smoother animations
|
||||
* Updated the way requestAnimationFrame is used for even smoother animations
|
||||
|
||||
0.4.6
|
||||
-----
|
||||
|
||||
* New method `relativeToAbsolute` which was formerly private
|
||||
* New method `isAnimatingTo` to check if an animation caused by `animateTo` is running
|
||||
* Added `sqrt` easing function
|
||||
|
||||
0.4.5
|
||||
-----
|
||||
|
||||
* Experimental mobile support using https://github.com/zynga/scroller
|
||||
|
||||
0.4.4
|
||||
-----
|
||||
|
||||
* A `skrollr` class is added to the HTML element and a `no-skrollr` class is removed when `init` is called. Useful for fallback styling.
|
||||
|
||||
0.4.3 (2012-08-02)
|
||||
-----
|
||||
|
||||
* Added new feature "constants".
|
||||
|
||||
0.4.2 (2012-07-26)
|
||||
-----
|
||||
|
||||
* Added new feature "anchor-target" which allows elements to react to other elements leaving/entering the viewport.
|
||||
|
||||
0.4.1 (2012-07-25)
|
||||
-----
|
||||
|
||||
* Fixed a bug which broke skrollr in IE caused by wrong regular expression behavior
|
||||
|
||||
0.4.0 (2012-07-22)
|
||||
-----
|
||||
|
||||
* *breaking* the `data-end-[offset]` syntax changed. It's now `data-[offset]-end`.
|
||||
* Fixed a bug where white spaces between style declarations were not ignored.
|
||||
* Added support for anchors. Animations can now be specified relative to the elements position within the viewport.
|
||||
* Added support for SVG elements.
|
||||
* Added new method `refresh()`.
|
||||
21
external/skrollr/LICENSE.txt
vendored
21
external/skrollr/LICENSE.txt
vendored
@ -1,21 +0,0 @@
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2012-2014 Alexander Prinzhorn (@Prinzhorn)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
627
external/skrollr/README.md
vendored
627
external/skrollr/README.md
vendored
@ -1,627 +0,0 @@
|
||||
[](http://travis-ci.org/Prinzhorn/skrollr)
|
||||
|
||||
skrollr 0.6.26
|
||||
=====
|
||||
|
||||
Stand-alone **parallax scrolling** JavaScript library for **mobile (Android, iOS, etc.) and desktop** in about 12k minified.
|
||||
|
||||
Designer friendly. No JavaScript skills needed. Just plain CSS and HTML.
|
||||
|
||||
_Actually, skrollr is much more than "just" **parallax scrolling**. It's a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3 ;-)_
|
||||
|
||||
Resources
|
||||
=====
|
||||
|
||||
Plugins
|
||||
-----
|
||||
|
||||
### Official
|
||||
|
||||
* [skrollr-menu](https://github.com/Prinzhorn/skrollr-menu) - Hash navigation
|
||||
* [skrollr-ie](https://github.com/Prinzhorn/skrollr-ie) - IE < 9 CSS fixes
|
||||
* [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets) - Keyframes inside CSS files
|
||||
|
||||
### Third party
|
||||
|
||||
* [skrollr-colors](https://github.com/FezVrasta/skrollr-colors) - Mix and match hex, rgb and hsl colors.
|
||||
|
||||
In the wild
|
||||
-----
|
||||
|
||||
Check out the [wiki page](https://github.com/Prinzhorn/skrollr/wiki/In-the-wild) for websites using skrollr and feel free to add your own website :). You can also shamelessly add yourself to the list [here](https://github.com/Prinzhorn/skrollr/wiki/Agencies-and-freelancers) if you are offering paid skrollr support.
|
||||
|
||||
Further resources (tutorials etc.)
|
||||
-----
|
||||
|
||||
Moved to the [wiki](https://github.com/Prinzhorn/skrollr/wiki/Resources).
|
||||
|
||||
|
||||
Documentation
|
||||
=====
|
||||
|
||||
First of all: look at the [examples and read the source ;-)](https://github.com/Prinzhorn/skrollr/tree/master/examples). This might give you a feeling of how stuff works and you can see how some patterns can be implemented.
|
||||
|
||||
Abstract
|
||||
------
|
||||
|
||||
skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset.
|
||||
|
||||
Other libraries require you to write JavaScript in order to define your animations. This introduces two main problems:
|
||||
|
||||
* Animation and element are not at one place. In order to find out if any animations are defined for a given element, you have to scroll through many (sometimes thousands) of lines of JavaScript.
|
||||
* You have to learn a new syntax which is often very verbose and limited at the same time.
|
||||
|
||||
With skrollr, you put the definition of your key frames right where they belong (to the element) using a syntax you already know (plain CSS).
|
||||
|
||||
If you would rather have the keyframes inside a separate file, take a look at [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets).
|
||||
|
||||
Let's get serious
|
||||
------
|
||||
|
||||
First of all you want to include the `skrollr.min.js` file at the bottom of your document (right before the closing `</body>`) and then call `skrollr.init()`. Or you can place it inside the `<head>` if you want to, but make sure to call `init()` once the document has been loaded (e.g. jQuery's `ready` event or even `window.onload`).
|
||||
|
||||
```html
|
||||
<script type="text/javascript" src="skrollr.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var s = skrollr.init();
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
If you are using require.js to structure your project, you can use skrollr as a module as well.
|
||||
|
||||
```javascript
|
||||
require(['skrollr'], function(skrollr){
|
||||
var s = skrollr.init();
|
||||
});
|
||||
```
|
||||
|
||||
If you're familiar with CSS, you already know the `style` attribute. In order to create an animation you would need several, at least two, of them. That's what skrollr does. You use the HTML5 `data-` attributes to define multiple sets of styles (we call each of them **keyframe**) and skrollr interpolates between them.
|
||||
|
||||
#### Let's change the background-color of a `div` starting at `#00f` when the scrollbar is at the top and ending with `#f00` when the user scrolled 500 pixels down
|
||||
|
||||
```html
|
||||
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
|
||||
```
|
||||
[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/1.html)
|
||||
|
||||
##### Lessons learned
|
||||
|
||||
* Skrollr ensures that you can actually scroll down 500 pixels or more, even if there's not enough content. You can suppress this by using the `forceHeight` option.
|
||||
* You can't use `#00f` or `#0000ff`. You need to use `rgb` or `hsl` and explicitly decide which color space you want because they result in different animations (HSL is much cooler most of the time). Don't worry, the IE plugin teaches IE < 9 to display `rgb` and `hsl` correctly.
|
||||
|
||||
#### Now let's do a barrel roll at the same time
|
||||
|
||||
```html
|
||||
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>
|
||||
```
|
||||
[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/2.html)
|
||||
|
||||
##### Lessons learned
|
||||
|
||||
* Skrollr handles all these nasty CSS prefixes for you. Just -moz-relax and get yourself a cup of -webkit-coffee.
|
||||
|
||||
#### Now let the rotation bounce like it were a hip-hop video
|
||||
|
||||
```html
|
||||
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
|
||||
```
|
||||
[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/3.html)
|
||||
|
||||
#### Lessons learned
|
||||
|
||||
* Skrollr allows non-linear animations. The so called *easing functions* can be used per-property by putting them in square brackets behind the property. There's a built-in list of easing functions (see below in the [JavaScript](#javascript) section) and you can use your own functions by using the `easings` options.
|
||||
|
||||
Now you may have noticed that using `500` as a keyframe position is kind of random and the look depends on your browser size.
|
||||
|
||||
#### Let's have the animation end when the top of the element reaches the top of the viewport (element leaves the viewport)
|
||||
|
||||
```html
|
||||
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
|
||||
```
|
||||
[View in browser](http://prinzhorn.github.io/skrollr/examples/docu/4.html)
|
||||
|
||||
##### Lessons learned
|
||||
|
||||
* Skrollr keyframes can either be [absolute](#absolute-mode-or-document-mode) or [relative](#relative-mode-or-viewport-mode).
|
||||
|
||||
That's the end of this short intro. The following sections will explain some more things in detail.
|
||||
|
||||
If you're not a fan of `data-attributes` or if you're planning a big website where you want a better and more flexible structure, take a look at [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets).
|
||||
|
||||
Mobile support
|
||||
-----
|
||||
Starting with version 0.5.0 skrollr officially supports mobile browsers including Android and iOS. Furthermore, mobile support has been rewritten from scratch for skrollr 0.6.0.
|
||||
|
||||
### The Problem with mobile and the solution
|
||||
|
||||
(If you're not interested in the details, just scroll down a bit to see what you need to do for mobile support.)
|
||||
|
||||
Some words on why this is an important milestone and why others failed: Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript. In short, that's the reason why many scrolling libraries either don't work on mobile devices or they come with their own scrollbar which is a usability nightmare on desktop. It was an important requirement while I developed skrollr that I don't force you to scroll the way I want it. skrollr on desktop uses a native scrollbar and you can scroll the way you want to (keyboard, mouse, etc.).
|
||||
|
||||
You just told me it doesn't work on mobile, but why does it? The answer is simple. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the `#skrollr-body` element) using CSS transforms.
|
||||
|
||||
### What you need in order to support mobile browsers
|
||||
|
||||
Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id `skrollr-body`. That's the element we move in order to fake scrolling. The only case where you don't need a `#skrollr-body` is when using `position:fixed` exclusively. In fact, the skrollr website doesn't include a `#skrollr-body` element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the `#skrollr-body` element.
|
||||
|
||||
Or to put it differently: On mobile the `skrollr-body` element is moved using CSS transforms. You can't have `position:fixed` or `background-attachment:fixed` inside elements which use CSS transforms as per CSS spec (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). That's why those elements need to be **outside** of the `skrollr-body` element.
|
||||
|
||||
AMD
|
||||
---
|
||||
|
||||
Starting with `0.6.22` there's experimental AMD support. Please note that only skrollr core has AMD support so far. We will update the plugins in the future.
|
||||
|
||||
```js
|
||||
require(['skrollr'], function(skrollr){
|
||||
skrollr.init();
|
||||
});
|
||||
```
|
||||
|
||||
Absolute vs relative mode
|
||||
-----
|
||||
|
||||
Being only able to define key frames in absolute values is simply insufficient for some cases. For example, if you don't know exactly where an element will be in the document. That's why there are two modes for key frames, namely `absolute` and `relative` mode.
|
||||
|
||||
### absolute mode (or document mode)
|
||||
|
||||
The key frames are defined as absolute values describing how much the **document** has been scrolled down.
|
||||
|
||||
The syntax is `data-[offset]-[anchor]`, where `offset` can be any integer (0 is default) and `anchor` can be either `start` (default) or `end`. Either `offset` or `anchor` can be omitted in some situations. Here are some examples of key frames and their meaning.
|
||||
|
||||
* `data-0` = `data-start` = `data-0-start`: When the scroll top is 0.
|
||||
* `data-100` = `data-100-start`: When the scroll top is 100.
|
||||
* `data--100` = `data--100-start`: When the scroll top is -100 (sounds like nonsense, but keep in mind that interpolation will be relative to this point).
|
||||
* `data-end` = `data-0-end`: When offset is 0, but counting from the bottom of the document instead of from the top. In short: when you reach the bottom of the page.
|
||||
* `data-100-end`: 100px before we reach the bottom.
|
||||
* `data--100-end`: 100px after we reach the bottom (again, it's up to you whether you need it).
|
||||
|
||||
### relative mode (or viewport mode)
|
||||
|
||||
Instead of defining key frames relative to the **document** (i.e. absolute), we are able to define them depending on the position of any element in relation to the **viewport**.
|
||||
|
||||
The syntax is `data-[offset]-(viewport-anchor)-[element-anchor]`, where `offset` can again be any integer and defaults to 0. Both `viewport-anchor` (mandatory) and `element-anchor` (optional) can be one of `top`, `center` or `bottom`. If `element-anchor` is omitted, the value of `viewport-anchor` will be taken (just like with background-position). Here are some examples of key frames and their meaning.
|
||||
|
||||
* `data-top` = `data-0-top` = `data-top-top` = `data-0-top-top`: When the element's top is aligned with the top of the viewport.
|
||||
* `data-100-top` = `data-100-top-top`: When the element's top is 100px above the top of the viewport.
|
||||
* `data--100-top` = `data--100-top-top`: When the element's top is 100px below the top of the viewport.
|
||||
* `data-top-bottom `= `data-0-top-bottom`: When the bottom of the element is at the top of the viewport (it's just not visible).
|
||||
* `data-center-center` = `data-0-center-center`: When the element is at the center of the viewport.
|
||||
* `data-bottom-center` = `data-0-bottom-center`: When the element's center is at the bottom of the viewport, thus the upper half of the element is visible.
|
||||
|
||||
By default the element is the element where the key frames are defined on (self), but can be any element on the page. You can optionally specify which element you want by using the `data-anchor-target` and any CSS selector. The first element on the page matching the selector will be used. `data-anchor-target` requires IE 8 or greater.
|
||||
|
||||
Examples: `data-anchor-target="#foo"` or `data-anchor-target=".bar:not(.bacon) ~ span > a[href]"`
|
||||
|
||||
**Note**: If you need to support IE 7, then you may only use IDs as `anchor-target`s, i.e. `#foo`. The IE plugin maps `querySelector` to `getElementById`.
|
||||
|
||||
Here's an infographic for better understanding of anchors (click to open PDF):
|
||||
|
||||
[](https://raw.github.com/Prinzhorn/skrollr/master/guide/anchor-position-guide.pdf)
|
||||
|
||||
**Important**: All those values will be calculated up-front and transformed to `absolute` mode. So if either the element's box height changes (height, padding, border) or the elements position within the document, you probably need to call `refresh()` (see documentation in JavaScript section below). **Window resizing is handled by skrollr.**
|
||||
|
||||
|
||||
Percentage offsets
|
||||
------------------
|
||||
|
||||
All offsets shown above are given in absolute pixel values, e.g. `data-300` for `300px` from the top or `data-13-top-bottom` for a `13px` offset to the `top-bottom` anchor. As of skrollr `0.6.13` you can also have offsets as percentages of the viewport by appending a `p` to the number. For example `data-75p` for when you scrolled down `75%` of the viewport or `data-10p-center` to have a `10%` offset from the `center` anchor.
|
||||
|
||||
|
||||
Hash navigation
|
||||
-----
|
||||
|
||||
Check out the [skrollr-menu](https://github.com/Prinzhorn/skrollr-menu) plugin.
|
||||
|
||||
Working with constants
|
||||
-----
|
||||
|
||||
I was lying to you. The syntax for absolute mode is not `data-[offset]-[anchor]` and for relative mode it's not `data-[offset]-(viewport-anchor)-[element-anchor]`. In both cases, `offset` can be preceded by a constant which can be passed to the `ìnit` method. The name of the constant needs to be preceded with an underscore.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
skrollr.init({
|
||||
constants: {
|
||||
foobar: 1337
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```html
|
||||
<div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div>
|
||||
|
||||
<!--Equal to-->
|
||||
|
||||
<div data-1337="left:0%;" data-1237="left:50%;" data-1437="left:100%;"></div>
|
||||
```
|
||||
|
||||
Valid characters for a constant are `[a-z0-9_]`.
|
||||
|
||||
Dynamic constants
|
||||
-----------------
|
||||
|
||||
Starting with skrollr `0.6.19` the word "constants" doesn't quite fit anymore, but who cares.
|
||||
|
||||
You can now use functions and percentages as constants. They are automatically evaluated when the window is resized or if you call `refresh`.
|
||||
|
||||
```js
|
||||
skrollr.init({
|
||||
constants: {
|
||||
foo: function() {
|
||||
//Note: you can access the skrollr instance with `this` for things like `this.relativeToAbsolute`
|
||||
return Math.random() * 100;//trolololol
|
||||
},
|
||||
vh: '100p'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
CSS classes
|
||||
-----
|
||||
|
||||
skrollr will add a `skrollr` class to the `HTML` element when calling `init` and will remove a `no-skrollr` class if present. Additionally, it will add a `skrollr-desktop` or `skrollr-mobile` class depending on which it detects. This allows fallback CSS rules to create a good user experience on unsupported devices or when JavaScript or skrollr are disabled.
|
||||
|
||||
All elements under skrollr's control (elements with appropriate data-attributes) will get the `skrollable` class. In addition, we add either the `skrollable-before`, `skrollable-between` **or** `skrollable-after` class, depending on whether the current scroll position is before, between or after the first/last (smallest/largest) keyframe of an element.
|
||||
|
||||
Animating attributes
|
||||
--------------------
|
||||
|
||||
Starting with skrollr 0.6.24 you can also animate attribute and not just style properties. This is especially a big thing because in the SVG world many properties are implemented as attributes and not in CSS. Animating an attribute couldn't be simplier, just prefix the property with an `@` symbol!
|
||||
|
||||
```html
|
||||
<polygon
|
||||
points='426,720 -200,720 -200,0 955,0'
|
||||
data-0="@points:426,720 -200,720 -200,0 955,0"
|
||||
data-500="@points:380,720 -200,720 -200,0 1302,0">
|
||||
</polygon>
|
||||
```
|
||||
|
||||
Note: as always, skrollr doesn't do any magic. It doesn't understand what a polygon or points are. It's only interpolating numbers, that's it. So make sure you have the same number of numbers in your keyframes (8 in this case).
|
||||
|
||||
Filling missing values
|
||||
-----
|
||||
|
||||
Imagine the following animation
|
||||
|
||||
```html
|
||||
<div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>
|
||||
```
|
||||
|
||||
One could expect `left` to have a value of `25%` at keyframe `200`. That is **not** the case. By design, skrollr only interpolates values between key frames which are direct **neighbors**. What actually happens is that skrollr internally fills out all holes once from left and then from right. So the above is equivalent to
|
||||
|
||||
```html
|
||||
<div data-100="left:0%;top:0%;" data-200="left:0%;top:0%;" data-300="left:50%;top:0%;" data-400="left:50%;top:50%;"></div>
|
||||
```
|
||||
|
||||
Preventing interpolation
|
||||
-----
|
||||
|
||||
The reason why skrollr is so lightweight and powerful is because it literally interpolates **every** number it can find. If you want to prevent some side effect, you can suppress interpolation for a specific value by prepending an exclamation point.
|
||||
|
||||
Example:
|
||||
```html
|
||||
<!-- This will get your image url f***** up because there's no "kitten1.4561799.jpg" and the like -->
|
||||
<div data-0="background-image:url(kitten1.jpg);" data-100="background-image:url(kitten2.jpg)"></div>
|
||||
|
||||
<!-- Better -->
|
||||
<div data-0="background-image:!url(kitten1.jpg);" data-100="background-image:!url(kitten2.jpg)"></div>
|
||||
```
|
||||
|
||||
**Note:** The values for both keyframes (if they contain a number) need to be prefixed if you want to avoid skrollr throwing an exception at you!
|
||||
|
||||
Limitations
|
||||
-----
|
||||
|
||||
There are some limitations of skrollr you should be aware of.
|
||||
|
||||
* All numeric values have to have the same unit, even `0` needs a unit. It's not possible to animate from `5%` to `100px`. skrollr won't complain, but results are undefined.
|
||||
* Animations between values which are composed of multiple numeric values like `margin:0 0 0 0;` are only possible for the same number of values. `margin:0px 0px 0px 0px;` to `margin:0px 100px 50px 3px;` is fine, but not `margin:10px;` to `margin:5px 10px;`.
|
||||
* Animations between CSS transforms only work when they use the same functions in same order. From `rotate(0deg) scale(1)` to `rotate(1000deg) scale(5)` is fine.
|
||||
* Color animations don't support named values like "red" or hex values like "#ff0000". Instead, you have to use `rgb()`, `rgba()`, `hsl()` and `hsla()`. Don't worry, there's a skrollr plugin for IE < 9 to support `hsl()` (without "a"!) and to fall rgba back to rgb.
|
||||
* Color animations only work for same color functions. `hsl()` to `hsl()` or `hsla()` is fine, but not `rgb()` to `hsl()`. Which makes sense, because animating from the same colors in rgb space and in hsl space results in different animations (hsl gives you the nice rainbow stuff).
|
||||
|
||||
But feel free to send in a pull request to fix any of them. Just keep in mind that keeping skrollr as lightweight as possible has high priority.
|
||||
|
||||
JavaScript
|
||||
====
|
||||
|
||||
On the JavaScript part there's not much to do (you can, if you want to!). So if you only know CSS and HTML, perfect.
|
||||
|
||||
skrollr.init([options])
|
||||
-----
|
||||
|
||||
All there is to do is to call `skrollr.init([options]);` which returns an instance of the singleton skrollr class. Subsequent calls to `init()` will just return the same skrollr instance again.
|
||||
|
||||
Possible options for `init()` are
|
||||
|
||||
### smoothScrolling=true
|
||||
|
||||
Smooth scrolling smoothens your animations. When you scroll down 50 pixels, the animations will transition instead of jumping to the new position.
|
||||
|
||||
The global setting can be overridden per element by setting `data-smooth-scrolling` to `on` or `off`.
|
||||
|
||||
### smoothScrollingDuration=200
|
||||
|
||||
The number of milliseconds the animations run after the scroll position changed the last time.
|
||||
|
||||
### constants={}
|
||||
|
||||
An object containing integers as values. The keys can contain `[a-z0-9_]`. They *do not* need a leading underscore.
|
||||
|
||||
Example: `data-_myconst-200` and `skrollr.init({constants: {myconst: 300}})` result in `data-500`.
|
||||
|
||||
### scale=1
|
||||
|
||||
By default, skrollr uses the largest key frame and makes document height + viewport height this high, thus the max possible scroll top offset. If your animation runs too fast or too slow, just adjust the scale value.
|
||||
|
||||
`scale` only affects keyframes in absolute mode.
|
||||
|
||||
When `forceHeight` is set to false, `scale` is ignored.
|
||||
|
||||
`scale` affects `constants` as well.
|
||||
|
||||
`scale` does only affect key frames in absolute mode, e.g. `data-500` but not `data-top`.
|
||||
|
||||
###forceHeight=true
|
||||
|
||||
`true`: Make sure the document is high enough that all key frames fit inside. Example: You use `data-1000`, but the content only makes the document 500px high. skrollr will ensure that you can scroll down the whole 1000px. Or if you use relative mode, e.g. `data-top-bottom`, skrollr will make sure the bottom of the element can actually reach the top of the viewport.
|
||||
|
||||
`false`: Don't manipulate the document and just keep the natural scrollbar.
|
||||
|
||||
###mobileCheck=function() {...}
|
||||
|
||||
This option allows you to pass a function to skrollr overwriting the check for mobile devices. The function should return `true` when mobile scrolling should be used and `false` if not.
|
||||
|
||||
The default looks like this
|
||||
|
||||
```js
|
||||
function() {
|
||||
return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
|
||||
}
|
||||
```
|
||||
|
||||
### mobileDeceleration=0.004
|
||||
|
||||
The amount of deceleration for momentum scrolling on mobile devices. This options tells skrollr how fast or slow you want the scrolling to stop after the user lifted his finger.
|
||||
|
||||
Set it to `1` to disable momentum scrolling.
|
||||
|
||||
### edgeStrategy='set'
|
||||
|
||||
This option specifies how to handle animations when the scroll position is outside the range on the keyframes (i.e. before the first or after the last keyframe).
|
||||
|
||||
One of three options are possible
|
||||
|
||||
* `set` _(default)_: When before/after the first/last keyframe, apply the styles of the first/last keyframe to the element.
|
||||
* `ease`: Same as set, but the values will be transformed using the given easing function.
|
||||
* `reset`: When before/after the first/last keyframe, apply the styles which the element had before skrollr did anything. This means resetting the class attribute as well as removing all styles which have been applied to the `style` property. This means the element won't have any `skrollable-*` CSS classes.
|
||||
|
||||
Example:
|
||||
|
||||
Given the following element with two keyframes
|
||||
|
||||
```html
|
||||
<div data-1000="left:0%;top:0%;" data-2000="left:50%;top:100%;" style="left:-100%;" class="section"></div>
|
||||
```
|
||||
|
||||
and the following easing function which always returns `0.5` (I know it's pointless, but it's just an example. A real world example would be an easing function that represents a curve and starts somewhere between `0` and `1`, but not at `1`)
|
||||
|
||||
```js
|
||||
function(p) {
|
||||
return 0.5;
|
||||
}
|
||||
```
|
||||
|
||||
and imagine the scrollbar is at `237`, which is below the first keyframe which is at `1000`.
|
||||
|
||||
* `set` will result in `<div style="left:0%;top:0%;" class="section skrollable skrollable-before"></div>` which is plain `data-1000`.
|
||||
* `ease` will result in `<div style="left:25%;top:50%;" class="section skrollable skrollable-before"></div>` which is `0.5 * data-1000`.
|
||||
* `reset` will result in `<div style="left:-100%;" class="section"></div>` which is what the element originally had. Note how `top` is missing.
|
||||
|
||||
|
||||
### beforerender
|
||||
|
||||
A listener function that gets called each time right before we render everything. The function will be passed an object with the following properties:
|
||||
|
||||
```js
|
||||
{
|
||||
curTop: 10, //the current scroll top offset
|
||||
lastTop: 0, //the top value of last time
|
||||
maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.
|
||||
direction: 'down' //either up or down
|
||||
}
|
||||
```
|
||||
|
||||
Returning `false` will prevent rendering.
|
||||
|
||||
### render
|
||||
|
||||
A listener function that gets called right after we finished rendering everything. The function will be passed with the same parameters as `beforerender`.
|
||||
|
||||
Example
|
||||
|
||||
```js
|
||||
skrollr.init({
|
||||
render: function(data) {
|
||||
//Log the current scroll position.
|
||||
console.log(data.curTop);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### keyframe
|
||||
|
||||
**Experimental**
|
||||
|
||||
In order to receive `keyframe` events from an element, add the `data-emit-events` attribute to the element. The keyframe function will be called with three arguments
|
||||
|
||||
1. The `element` that passed the keyframe.
|
||||
2. The `name` of the keyframe, camel-cased (see example).
|
||||
3. The `direction` the user is scrolling.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-500="..."
|
||||
data-top-bottom="..."
|
||||
data-_offset-center="..."
|
||||
data-emit-events
|
||||
>
|
||||
Some content
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
skrollr.init({
|
||||
keyframe: function(element, name, direction) {
|
||||
//name will be one of data500, dataTopBottom, data_offsetCenter
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Note: this is experimental, expect the API to change! Originally I wanted to emit the events right on the element, so you could do this
|
||||
|
||||
```js
|
||||
//Wouldn't this be nice?
|
||||
document.querySelector('#foo').addEventListener('skrollr.dataTopBottom.up', function() {
|
||||
//#foo just passed the data-top-bottom keyframe while scrolling up
|
||||
}, false)
|
||||
```
|
||||
|
||||
but IE.
|
||||
|
||||
### easing
|
||||
|
||||
An object defining new easing functions or overwriting existing ones. Easing functions get just one argument, which is a value between 0 and 1 (the percentage of how much of the animation is done). The function should return a value between 0 and 1 as well, but for some easings a value less than 0 or greater than 1 is just fine.
|
||||
|
||||
An easing function basically transforms the timeline for an animation. When the animation should be 50% done, you can transform it to be 90% done or whatever your function does.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
skrollr.init({
|
||||
easing: {
|
||||
//This easing will sure drive you crazy
|
||||
wtf: Math.random,
|
||||
inverted: function(p) {
|
||||
return 1 - p;
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
You can now use the easing functions like any other.
|
||||
|
||||
skrollr ships with some built in functions:
|
||||
|
||||
* linear: The default. Doesn't need to be specified.
|
||||
* quadratic: To the power of two. So 50% looks like 25%.
|
||||
* cubic: To the power of three. So 50% looks like 12.5%
|
||||
* begin/end: They always return 0 or 1 respectively. No animation.
|
||||
* swing: Slow at the beginning and accelerates at the end. So 25% -> 14.6%, 50% -> 50%, 75% -> 85.3%
|
||||
* sqrt: Square root. Starts fast, slows down at the end.
|
||||
* outCubic
|
||||
* bounce: Bounces like a ball. See https://www.desmos.com/calculator/tbr20s8vd2 for a graphical representation.
|
||||
|
||||
skrollr.get()
|
||||
-----
|
||||
|
||||
Returns the skrollr instance if `init()` has been called before or `undefined`.
|
||||
|
||||
Public API
|
||||
-----
|
||||
|
||||
Calling `init()` returns an instance of skrollr which exposes a public api.
|
||||
|
||||
### refresh([elements])
|
||||
|
||||
Reparses all given `elements`. You can pass a single element or an array-like element (Array, NodeList or jQuery object)
|
||||
|
||||
Useful when
|
||||
|
||||
* Elements in `relative` mode change and need to be updated.
|
||||
* Data-attributes are manipulated dynamically.
|
||||
* New elements are added to the DOM and should be controlled by skrollr.
|
||||
|
||||
When no `elements` are given, all elements in the document will be parsed again. In fact, when calling `skrollr.init()` skrollr uses `refresh()` without parameters internally.
|
||||
|
||||
Time consuming operations, should not be called on every rendering.
|
||||
|
||||
### relativeToAbsolute(element, viewportAnchor, elementAnchor)
|
||||
|
||||
Returns an integer which represents the absolute scroll position which correlates to the relative anchor.
|
||||
|
||||
`element` must be a DOM element.
|
||||
|
||||
`viewportAnchor` and `elementAnchor` must be one of `top`, `center` or `bottom`
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
var offset = s.relativeToAbsolute(document.getElementById('foo'), 'top', 'bottom');
|
||||
|
||||
//offset contains the scroll position at which #foo's bottom is at the top of the viewport.
|
||||
//If you now use setScrollTop(offset) or animateTo(offset) #foo's bottom will be perfectly aligned with the top of the viewport. Yay.
|
||||
```
|
||||
|
||||
### getScrollTop()
|
||||
|
||||
Returns the current scroll offset in pixels. Normalizes different browser quirks and handles mobile scrolling.
|
||||
|
||||
### getMaxScrollTop()
|
||||
|
||||
Returns the number of pixels that can be scrolled down in total. If `forceHeight` is true, that's usually the largest keyframe. Otherwise it's the height of the document minus the viewport height.
|
||||
|
||||
### setScrollTop(top[, force = false])
|
||||
|
||||
Sets the top offset using `window.scrollTo(0, top)` on desktop or updating the internal state in case of mobile scrolling.
|
||||
|
||||
When `force` is set to `true`, skrollr will jump to the new position without any kind of transition. By default, the global `smoothScrolling` setting applies.
|
||||
|
||||
### isMobile()
|
||||
|
||||
Returns if skrollr runs in mobile mode (see also `mobileCheck` option).
|
||||
|
||||
### animateTo(top[, options])
|
||||
|
||||
Animates the scroll position from current position to `top`. Possible `options` are
|
||||
|
||||
#### duration
|
||||
|
||||
How long the animation should run in milliseconds. The default is `1000` or one second.
|
||||
|
||||
#### easing
|
||||
|
||||
The name of an easing function. The same functions can be used as for property animations. Default is `linear` .
|
||||
|
||||
#### done
|
||||
|
||||
A function to be called after the animation finished. When you pass a `top` value, which is the same as the current, then the function will be called immediately. The function gets a boolean argument `interrupted` which indicates if the animation was interrupted by `stopAnimateTo` or finished to the end.
|
||||
|
||||
### stopAnimateTo()
|
||||
|
||||
Stops the animation and calls the `done` callback passing `true` as `interrupted` arguments.
|
||||
|
||||
### isAnimatingTo()
|
||||
|
||||
Returns if an animation caused by animateTo is running.
|
||||
|
||||
### on(name, fn)
|
||||
|
||||
Set a listener function for one of the events described in the options section (beforerender, render, keyframe). Only one listener can be attached at a given time. This method overwrites the current listener, if any.
|
||||
|
||||
### off(name)
|
||||
|
||||
Removes the listener for the given event.
|
||||
|
||||
|
||||
### destroy()
|
||||
|
||||
Destroys skrollr. All `class` and `style` attributes will be set to the values they had before.
|
||||
|
||||
Changelog
|
||||
=====
|
||||
|
||||
See [HISTORY.md](https://github.com/Prinzhorn/skrollr/blob/master/HISTORY.md).
|
||||
28
external/skrollr/bower.json
vendored
28
external/skrollr/bower.json
vendored
@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "skrollr",
|
||||
"homepage": "http://prinzhorn.github.io/skrollr/",
|
||||
"authors": [
|
||||
"Alexander Prinzhorn"
|
||||
],
|
||||
"description": "Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop",
|
||||
"main": "src/skrollr.js",
|
||||
"moduleType": [
|
||||
"globals"
|
||||
],
|
||||
"keywords": [
|
||||
"parallax",
|
||||
"scroll",
|
||||
"animation",
|
||||
"html5",
|
||||
"css3",
|
||||
"transition"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
2
external/skrollr/dist/skrollr.min.js
vendored
2
external/skrollr/dist/skrollr.min.js
vendored
File diff suppressed because one or more lines are too long
14
external/skrollr/examples/README.md
vendored
14
external/skrollr/examples/README.md
vendored
@ -1,14 +0,0 @@
|
||||
Examples
|
||||
------
|
||||
|
||||
Showcasing the awesomeness of skrollr.
|
||||
|
||||
* [The "main" example](http://prinzhorn.github.io/skrollr/)
|
||||
* ["Classic" parallax with different sections and parallax images between the gaps](http://prinzhorn.github.io/skrollr/examples/classic.html)
|
||||
* [Demonstrating different anchors](http://prinzhorn.github.io/skrollr/examples/anchors.html)
|
||||
* [Demonstrating data-anchor-target](http://prinzhorn.github.io/skrollr/examples/anchor_target.html)
|
||||
* [Pausing the scrolling for a moment to do other animations](http://prinzhorn.github.io/skrollr/examples/pausing.html)
|
||||
* [Drawing a SVG path](http://prinzhorn.github.io/skrollr/examples/path.html)
|
||||
* [Using two custom easing functions to create a circular motion](http://prinzhorn.github.io/skrollr/examples/circular_motion.html)
|
||||
* [Parallax background with constant speed](http://prinzhorn.github.io/skrollr/examples/bg_constant_speed_less.html)
|
||||
* [gradientsmotherfucker](http://prinzhorn.github.io/skrollr/examples/gradientsmotherfucker.html)
|
||||
74
external/skrollr/examples/amd.html
vendored
74
external/skrollr/examples/amd.html
vendored
@ -1,74 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<title>skrollr - parallax scrolling for the masses</title>
|
||||
|
||||
<link href="fixed-positioning.css" rel="stylesheet" type="text/css" />
|
||||
<link href="main.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
|
||||
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
|
||||
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
|
||||
|
||||
<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>
|
||||
|
||||
<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
|
||||
<h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1>
|
||||
<h2>parallax scrolling for the masses</h2>
|
||||
<p>let's get scrollin' ;-)</p>
|
||||
<p class="arrows">▼ ▼ ▼</p>
|
||||
</div>
|
||||
|
||||
<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
|
||||
<h2>transform</h2>
|
||||
<p>scale, skew and rotate the sh** out of any element</p>
|
||||
</div>
|
||||
|
||||
<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">
|
||||
<h2>all numeric properties</h2>
|
||||
<p>width, height, padding, font-size, z-index, blah blah blah</p>
|
||||
</div>
|
||||
|
||||
<div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">
|
||||
<div id="easing" data-3900="left:100%" data-4600="left:25%;">
|
||||
<h2>easing?</h2>
|
||||
<p>sure.</p>
|
||||
<p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>
|
||||
<p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>
|
||||
</div>
|
||||
|
||||
<div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div>
|
||||
<div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div>
|
||||
<div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div>
|
||||
<div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div>
|
||||
<div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div>
|
||||
<div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div>
|
||||
<div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div>
|
||||
</div>
|
||||
|
||||
<div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;">
|
||||
<h2>the end</h2>
|
||||
<p>by the way, you can also animate colors (you did notice this, didn't you?)</p>
|
||||
<p><strong>Now get this thing on <a href="https://github.com/Prinzhorn/skrollr">GitHub</a> and spread the word, it's open source!</strong> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://prinzhorn.github.com/skrollr/" data-via="Prinzhorn">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
|
||||
<p>Check out more <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">examples</a>.</p>
|
||||
<p>Handcrafted by <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">Follow @Prinzhorn</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
|
||||
</div>
|
||||
|
||||
<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
|
||||
|
||||
<script data-main="scripts/main" src="scripts/require.js"></script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
|
||||
<![endif]-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
192
external/skrollr/examples/anchor_target.html
vendored
192
external/skrollr/examples/anchor_target.html
vendored
@ -1,192 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>anchor-target</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {font-family:sans-serif;}
|
||||
|
||||
#red, #blue {
|
||||
width:128px;
|
||||
height:128px;
|
||||
background:#f33 url(images/face.png);
|
||||
}
|
||||
|
||||
#red {
|
||||
float:left;
|
||||
margin:1em;
|
||||
}
|
||||
|
||||
#blue {
|
||||
background:#09f url(images/face.png) 0 bottom;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
#blue_wrapper {
|
||||
position:fixed;
|
||||
top:0;
|
||||
right:20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
<h1>anchor-target</h1>
|
||||
|
||||
<p>
|
||||
<strong><em>BLUE</em> on the right is so unhappy. Scroll down so he can see his buddy <em>RED</em>.</strong>
|
||||
</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
|
||||
<!--RED (buddy)-->
|
||||
<div id="red" data-bottom="transform:rotate(0deg);transform-origin:center;" data-top="transform:rotate(360deg);"></div>
|
||||
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
</div>
|
||||
|
||||
<!--BLUE (unhappy)-->
|
||||
<div id="blue_wrapper" data-smooth-scrolling="off">
|
||||
<div id="blue"
|
||||
data-anchor-target="#red"
|
||||
data-0="background-position:!0 bottom;"
|
||||
data-bottom-top="margin-right[vibrate]:0px;background-position:!0 0;"
|
||||
data-top-bottom="margin-right[vibrate]:20px;background-position:!0 bottom;"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
forceHeight: false,
|
||||
easing: {
|
||||
vibrate: function(p) {
|
||||
return Math.sin(p * 10 * Math.PI);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
156
external/skrollr/examples/anchors.html
vendored
156
external/skrollr/examples/anchors.html
vendored
@ -1,156 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Anchors</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {font-family:sans-serif;}
|
||||
|
||||
#content {
|
||||
width:90%;
|
||||
background:#eee;
|
||||
border:1px solid #444;
|
||||
margin:1em auto;
|
||||
}
|
||||
|
||||
#content > div {
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
.box {
|
||||
float:left;
|
||||
padding:6em 1em;
|
||||
margin:2px;
|
||||
}
|
||||
|
||||
p {margin:1em 0;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
|
||||
<div id="content">
|
||||
<div>
|
||||
<h1>Different anchor types</h1>
|
||||
|
||||
<p>
|
||||
<strong>Scroll down to see different anchors in action.</strong>
|
||||
</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<div class="box" data-start="background:hsl(0,50%,75%);" data-end="background:hsl(180,50%,75%);">
|
||||
start<br>end
|
||||
</div>
|
||||
|
||||
<div class="box" data-bottom-top="background:hsl(0,50%,75%);" data-top-bottom="background:hsl(180,50%,75%);">
|
||||
bottom-top<br>top-bottom
|
||||
</div>
|
||||
|
||||
<div class="box" data-top-top="background:hsl(0,50%,75%);" data-bottom-bottom="background:hsl(180,50%,75%);">
|
||||
top-top<br>bottom-bottom
|
||||
</div>
|
||||
|
||||
<div class="box" data-center-top="background:hsl(0,50%,75%);" data-center-bottom="background:hsl(180,50%,75%);">
|
||||
center-top<br>center-bottom
|
||||
</div>
|
||||
|
||||
<div id="bacon" class="box" data-center-center="background:hsl(0,50%,75%);" data-1-center-center="background:hsl(180,50%,75%);">
|
||||
center-center<br>1-center-center
|
||||
</div>
|
||||
|
||||
<div class="box" data-50-bottom-bottom="background:hsl(0,50%,75%);" data--50-top-top="background:hsl(180,50%,75%);">
|
||||
50-bottom-bottom<br>-50-top-top
|
||||
</div>
|
||||
|
||||
<p style="clear:both;">Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<div class="box" data-300-end="background:hsl(0,50%,75%);" data-end="background:hsl(180,50%,75%);">
|
||||
300-end<br>end
|
||||
</div>
|
||||
|
||||
<p style="clear:both;">Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
forceHeight: false
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,90 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Background scroll - less content</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
background:url(images/bubbles.png) repeat fixed;
|
||||
}
|
||||
|
||||
#center {
|
||||
background:#f9f9f9;
|
||||
background:rgba(240,240,240,.7);
|
||||
width:90%;
|
||||
padding:1em;
|
||||
margin:1em auto;
|
||||
border:1px solid #bbb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
|
||||
<div id="skrollr-body">
|
||||
<div id="center">
|
||||
<h1>Parallax background</h1>
|
||||
<p>Demo of background scrolling at constant speed independent of content height.</p>
|
||||
<p>less content - <a href="bg_constant_speed_more.html">more content</a></p>
|
||||
<hr />
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
forceHeight: false
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,255 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Background scroll - more content</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
background:url(images/bubbles.png) repeat fixed;
|
||||
}
|
||||
|
||||
#center {
|
||||
background:#f9f9f9;
|
||||
background:rgba(240,240,240,.7);
|
||||
width:90%;
|
||||
padding:1em;
|
||||
margin:1em auto;
|
||||
border:1px solid #bbb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
|
||||
<div id="skrollr-body">
|
||||
<div id="center">
|
||||
<h1>Parallax background</h1>
|
||||
<p>Demo of background scrolling at constant speed independent of content height.</p>
|
||||
<p><a href="bg_constant_speed_less.html">less content</a> - more content</p>
|
||||
<hr />
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
<p>
|
||||
Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
|
||||
</p>
|
||||
<p>
|
||||
Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
|
||||
</p>
|
||||
<p>
|
||||
Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
|
||||
</p>
|
||||
<p>
|
||||
Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
|
||||
</p>
|
||||
<p>
|
||||
Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
forceHeight: false
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
44
external/skrollr/examples/circular_motion.html
vendored
44
external/skrollr/examples/circular_motion.html
vendored
@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>Creating a circular motion (easing === awesome)</title>
|
||||
|
||||
<link href="fixed-positioning.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#thing {
|
||||
width:32px;
|
||||
height:32px;
|
||||
border-radius:16px;
|
||||
background:#000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="thing" data-0="left[cos]:10%;top[sin]:10%;" data-10000="left:90%;top:90%;"></div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
easing: {
|
||||
sin: function(p) {
|
||||
return (Math.sin(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
|
||||
},
|
||||
cos: function(p) {
|
||||
return (Math.cos(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
|
||||
},
|
||||
},
|
||||
render: function(data) {
|
||||
//Loop
|
||||
if(data.curTop === data.maxTop) {
|
||||
this.setScrollTop(0, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
203
external/skrollr/examples/classic.html
vendored
203
external/skrollr/examples/classic.html
vendored
@ -1,203 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-skrollr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Classic parallax page</title>
|
||||
|
||||
<style type="text/css">
|
||||
* {
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.skrollr-desktop body {
|
||||
height:100% !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
margin:1em 0;
|
||||
}
|
||||
|
||||
.parallax-image-wrapper {
|
||||
position:fixed;
|
||||
left:0;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.parallax-image-wrapper-50 {
|
||||
height:50%;
|
||||
top:-50%;
|
||||
}
|
||||
|
||||
.parallax-image-wrapper-100 {
|
||||
height:100%;
|
||||
top:-100%;
|
||||
}
|
||||
|
||||
.parallax-image {
|
||||
display:none;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
.parallax-image-50 {
|
||||
height:200%;
|
||||
top:-50%;
|
||||
}
|
||||
|
||||
.parallax-image-100 {
|
||||
height:100%;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.parallax-image.skrollable-between {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.no-skrollr .parallax-image-wrapper {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
#skrollr-body {
|
||||
height:100%;
|
||||
overflow:visible;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.gap {
|
||||
background:transparent center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
.skrollr .gap {
|
||||
background:transparent !important;
|
||||
}
|
||||
|
||||
.gap-50 {
|
||||
height:50%;
|
||||
}
|
||||
|
||||
.gap-100 {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.header, .content {
|
||||
background:#fff;
|
||||
padding:1em;
|
||||
|
||||
-webkit-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.content-full {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#done {
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
We position the images fixed and therefore need to place them outside of #skrollr-body.
|
||||
We will then use data-anchor-target to display the correct image matching the current section (.gap element).
|
||||
-->
|
||||
|
||||
<div
|
||||
class="parallax-image-wrapper parallax-image-wrapper-100"
|
||||
data-anchor-target="#dragons + .gap"
|
||||
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
|
||||
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
|
||||
|
||||
<div
|
||||
class="parallax-image parallax-image-100"
|
||||
style="background-image:url(images/kitteh1.jpg)"
|
||||
data-anchor-target="#dragons + .gap"
|
||||
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
|
||||
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
|
||||
></div>
|
||||
<!--the +/-80% translation can be adjusted to control the speed difference of the image-->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="parallax-image-wrapper parallax-image-wrapper-100"
|
||||
data-anchor-target="#bacons + .gap"
|
||||
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
|
||||
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
|
||||
|
||||
<div
|
||||
class="parallax-image parallax-image-100"
|
||||
style="background-image:url(images/kitteh2.jpg)"
|
||||
data-anchor-target="#bacons + .gap"
|
||||
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
|
||||
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="parallax-image-wrapper parallax-image-wrapper-50"
|
||||
data-anchor-target="#kittens + .gap"
|
||||
data-bottom-top="transform:translate3d(0px, 300%, 0px)"
|
||||
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
|
||||
|
||||
<div
|
||||
class="parallax-image parallax-image-50"
|
||||
style="background-image:url(images/kitteh3.jpg)"
|
||||
data-anchor-target="#kittens + .gap"
|
||||
data-bottom-top="transform: translate3d(0px, -60%, 0px);"
|
||||
data-top-bottom="transform: translate3d(0px, 60%, 0px);"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div id="skrollr-body">
|
||||
<div class="header" id="dragons">
|
||||
Skrollr demo of classic parallax sections. Degrades without JavaScript (could be disabled on mobile without breaking everything).
|
||||
</div>
|
||||
<div class="gap gap-100" style="background-image:url(images/kitteh1.jpg);"></div>
|
||||
<div class="content" id="bacons">
|
||||
<p>Landjaeger chicken ham fatback sausage hamburger, tri-tip capicola pastrami pancetta ribeye turducken. Rump shank turkey pig kevin sausage meatloaf tenderloin drumstick short ribs short loin. Prosciutto spare ribs chuck, pork strip steak pork chop swine bacon turkey shoulder andouille. Jowl landjaeger chicken corned beef. Ham hock kielbasa pancetta ground round sausage. Spare ribs porchetta pastrami filet mignon drumstick ball tip. Beef ribs prosciutto kevin, landjaeger shoulder ham hock ham brisket sirloin chuck t-bone drumstick kielbasa pork chop.</p>
|
||||
|
||||
<p>Landjaeger spare ribs chicken ball tip, filet mignon frankfurter ribeye tenderloin corned beef. Strip steak boudin pork loin, chicken turkey ball tip beef ribs ground round shank ham hock. Kevin capicola beef, chuck pork chop shoulder brisket doner meatloaf shank ham hock tenderloin. Chuck ham hock short ribs ground round sausage prosciutto shoulder bacon andouille tri-tip beef biltong filet mignon chicken. Pork belly andouille shank, bacon sausage meatloaf bresaola pork chop short ribs t-bone. Ham hock salami porchetta bacon beef turkey, strip steak kielbasa pancetta brisket meatball t-bone.</p>
|
||||
|
||||
<p>Chicken pancetta capicola chuck, turkey meatball jerky frankfurter kielbasa ball tip bacon ground round. Beef ribs brisket meatloaf short ribs landjaeger shankle spare ribs sausage, pancetta swine sirloin flank. Tail shank chuck pancetta, ham meatloaf short ribs sausage rump turkey kevin pork chop landjaeger. Doner boudin short ribs t-bone, jerky shankle bresaola drumstick. Strip steak shank spare ribs boudin doner short ribs. Boudin prosciutto jowl tenderloin tongue beef ribs, short ribs salami short loin strip steak ham jerky. Shank pancetta beef ribs, corned beef ham hock pork belly drumstick tail bresaola chuck.</p>
|
||||
</div>
|
||||
<div class="gap gap-100" style="background-image:url(images/kitteh2.jpg);"></div>
|
||||
<div class="content content-full" id="kittens">
|
||||
Here be kittens
|
||||
</div>
|
||||
<div class="gap gap-50" style="background-image:url(images/kitteh3.jpg);"></div>
|
||||
<div class="content" id="done">
|
||||
Images from <a href="http://placekitten.com/attribution.html">http://placekitten.com/</a>, thanks!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
smoothScrolling: false,
|
||||
mobileDeceleration: 0.004
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
external/skrollr/examples/docu/1.html
vendored
41
external/skrollr/examples/docu/1.html
vendored
@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head class="no-skrollr">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Demo 1</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>
|
||||
<div id="foo" data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//http://detectmobilebrowsers.com/ + tablets
|
||||
(function(a) {
|
||||
if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
|
||||
||
|
||||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
|
||||
{
|
||||
//Add skrollr mobile on mobile devices.
|
||||
document.write('<script type="text/javascript" src="../../dist/skrollr.mobile.min.js"><\/script>');
|
||||
}
|
||||
})(navigator.userAgent||navigator.vendor||window.opera);
|
||||
</script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../../dist/skrollr.ie.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript">
|
||||
var s = skrollr.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
external/skrollr/examples/docu/2.html
vendored
41
external/skrollr/examples/docu/2.html
vendored
@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head class="no-skrollr">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Demo 2</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>
|
||||
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//http://detectmobilebrowsers.com/ + tablets
|
||||
(function(a) {
|
||||
if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
|
||||
||
|
||||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
|
||||
{
|
||||
//Add skrollr mobile on mobile devices.
|
||||
document.write('<script type="text/javascript" src="../../dist/skrollr.mobile.min.js"><\/script>');
|
||||
}
|
||||
})(navigator.userAgent||navigator.vendor||window.opera);
|
||||
</script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../../dist/skrollr.ie.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript">
|
||||
var s = skrollr.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
external/skrollr/examples/docu/3.html
vendored
41
external/skrollr/examples/docu/3.html
vendored
@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head class="no-skrollr">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Demo 3</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>
|
||||
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//http://detectmobilebrowsers.com/ + tablets
|
||||
(function(a) {
|
||||
if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
|
||||
||
|
||||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
|
||||
{
|
||||
//Add skrollr mobile on mobile devices.
|
||||
document.write('<script type="text/javascript" src="../../dist/skrollr.mobile.min.js"><\/script>');
|
||||
}
|
||||
})(navigator.userAgent||navigator.vendor||window.opera);
|
||||
</script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../../dist/skrollr.ie.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript">
|
||||
var s = skrollr.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
external/skrollr/examples/docu/4.html
vendored
41
external/skrollr/examples/docu/4.html
vendored
@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head class="no-skrollr">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Demo 4</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>
|
||||
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//http://detectmobilebrowsers.com/ + tablets
|
||||
(function(a) {
|
||||
if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
|
||||
||
|
||||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
|
||||
{
|
||||
//Add skrollr mobile on mobile devices.
|
||||
document.write('<script type="text/javascript" src="../../dist/skrollr.mobile.min.js"><\/script>');
|
||||
}
|
||||
})(navigator.userAgent||navigator.vendor||window.opera);
|
||||
</script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../../dist/skrollr.ie.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript">
|
||||
var s = skrollr.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
46
external/skrollr/examples/fixed-positioning.css
vendored
46
external/skrollr/examples/fixed-positioning.css
vendored
@ -1,46 +0,0 @@
|
||||
/*
|
||||
* This file is NOT needed in order to use skrollr.
|
||||
* The demo uses it and it may help you as well.
|
||||
*/
|
||||
|
||||
|
||||
html, body {
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
.skrollable {
|
||||
/*
|
||||
* First-level skrollables are positioned relative to window
|
||||
*/
|
||||
position:fixed;
|
||||
|
||||
/*
|
||||
* Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
|
||||
*/
|
||||
z-index:100;
|
||||
}
|
||||
|
||||
.skrollr-mobile .skrollable {
|
||||
/*
|
||||
May cause issues on Android default browser (see #331 on GitHub).
|
||||
*/
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.skrollable .skrollable {
|
||||
/*
|
||||
* Second-level skrollables are positioned relative their parent skrollable
|
||||
*/
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.skrollable .skrollable .skrollable {
|
||||
/*
|
||||
* Third-level (and below) skrollables are positioned static
|
||||
*/
|
||||
position:static;
|
||||
}
|
||||
129
external/skrollr/examples/fixed_nav.html
vendored
129
external/skrollr/examples/fixed_nav.html
vendored
@ -1,129 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>Fixed nav (desktop only!)</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {font-family:sans-serif;}
|
||||
|
||||
#content {
|
||||
width:960px;
|
||||
background:#eee;
|
||||
border:1px solid #444;
|
||||
margin:1em auto;
|
||||
}
|
||||
|
||||
#nav {
|
||||
display:block;
|
||||
padding:0;
|
||||
margin:0;
|
||||
width:960px;
|
||||
background:#000;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
#nav > li {
|
||||
display:inline-block;
|
||||
padding:1em;
|
||||
margin:0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
<div id="content">
|
||||
<div>
|
||||
<h1>Fixed nav (desktop only!)</h1>
|
||||
|
||||
|
||||
|
||||
<ul id="nav" data-0="position:static;" data-top-top="position:fixed;top:0;" data-edge-strategy="set">
|
||||
<li>foo</li>
|
||||
<li>bar</li>
|
||||
</ul>
|
||||
<!--placeholder div to prevent jumpy content when nav gets pinned-->
|
||||
<div style="padding:1em;" data-0="display:none;" data-top-top="display:block;" data-anchor-target="#nav" data-edge-strategy="set"> </div>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<strong>Scroll down to see the nav getting fixed.</strong>
|
||||
</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
|
||||
<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>
|
||||
|
||||
<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>
|
||||
|
||||
<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>
|
||||
|
||||
<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
skrollr.init({
|
||||
forceHeight: false
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,65 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>What’s the best way to appease Samuel L. Jackson’s design-lust?</title>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
padding:0;
|
||||
margin:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-attachment:fixed;
|
||||
color:#fff;
|
||||
font-family:sans-serif;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
a {color:#eee;}
|
||||
|
||||
#top {padding-top:10em;}
|
||||
|
||||
#bottom {
|
||||
position:fixed;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
#bottom > img {
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.hidden {display:none;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-5000="background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">
|
||||
<div id="skrollr-body">
|
||||
<div id="top">
|
||||
<h1>What’s the best way to appease Samuel L. Jackson’s design-lust?</h1>
|
||||
<p>Scroll to find out</p>
|
||||
<p>↓</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom" data-500-end="opacity:0;" data-end="opacity:1;">
|
||||
<h1>Rotating gradients, motherfucker</h1>
|
||||
<p>Inspired by: <a href="http://gradientsmotherfucker.com/">http://gradientsmotherfucker.com/</a></p>
|
||||
<p>Created with: <a href="https://github.com/Prinzhorn/skrollr">skrollr</a></p>
|
||||
<img src="images/slj.png" />
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
skrollr.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
external/skrollr/examples/images/bubbles.png
vendored
BIN
external/skrollr/examples/images/bubbles.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
BIN
external/skrollr/examples/images/bubbles2.png
vendored
BIN
external/skrollr/examples/images/bubbles2.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
BIN
external/skrollr/examples/images/bubbles3.png
vendored
BIN
external/skrollr/examples/images/bubbles3.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
BIN
external/skrollr/examples/images/bubbles_small.png
vendored
BIN
external/skrollr/examples/images/bubbles_small.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
external/skrollr/examples/images/face.png
vendored
BIN
external/skrollr/examples/images/face.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
BIN
external/skrollr/examples/images/kitteh1.jpg
vendored
BIN
external/skrollr/examples/images/kitteh1.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
BIN
external/skrollr/examples/images/kitteh2.jpg
vendored
BIN
external/skrollr/examples/images/kitteh2.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
BIN
external/skrollr/examples/images/kitteh3.jpg
vendored
BIN
external/skrollr/examples/images/kitteh3.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
63
external/skrollr/examples/images/path.svg
vendored
63
external/skrollr/examples/images/path.svg
vendored
@ -1,63 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="744.09448819"
|
||||
height="1052.3622047"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.3.1 r9886"
|
||||
sodipodi:docname="path.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.49497475"
|
||||
inkscape:cx="403.61004"
|
||||
inkscape:cy="569.90886"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1855"
|
||||
inkscape:window-height="1056"
|
||||
inkscape:window-x="65"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:bbox-paths="true"
|
||||
inkscape:snap-page="true" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#333333;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
d="m 199.16266,227.29566 c 0,0 -35.71429,-184.285714 37.14286,-210.000004 72.85714,-25.7142792 95.40137,3.16127 134.28572,42.85715 C 462.01038,153.47988 433.14019,231.62843 612.01981,188.72422 740.78435,157.8401 648.46996,-124.25341 423.44838,73.009946 397.57737,95.689556 342.01981,227.29566 322.01981,268.72423 c -20,41.42857 -15.71429,142.85714 64.28571,222.85714 80,80 143.73919,-10.78923 207.14286,17.14286 89.11717,39.26002 175.71428,70 214.28571,198.57143 38.57143,128.57142 -224.28571,45.71428 -311.42857,50 -87.14286,4.28571 -174.7636,-13.7114 -273.33504,69.14573 -98.57143,82.85724 -123.427376,147.71354 -133.893126,125.93684 -13.988987,-29.1077 -55.031934,-20.6196 -72.436974,2.587 -35.52138,47.36187 48.898892,49.25187 59.501803,81.06057 11.228801,33.6863 -55.491303,91.6685 -70.7122836,61.2265 -14.3563298,-28.7127 55.6559746,-11.2104 68.9875946,-11.2104 59.313946,0 106.207266,-47.3062 135.388156,-93.99577 9.07249,-14.516 16.34065,-34.5597 6.03641,-50.0161 -24.31744,-36.4761 -61.10674,32.1704 -64.67586,50.0161 -1.78804,8.94027 -18.73345,93.13327 -18.9716,93.13327 -15.39093,0 28.03002,-116.70147 77.61105,-83.6473 22.80402,15.2025 -31.82409,33.8676 -43.11725,31.0443 -2.54514,-0.6362 -14.1213,-7.4374 -16.38456,-5.174 -1.98676,1.9867 9.07416,13.8365 10.34816,16.3845 2.87494,5.7499 10.51739,15.8661 17.24688,18.1092 69.57702,23.1924 68.47583,-63.69675 106.93079,-50.8783 25.47788,8.4926 17.93869,61.2265 13.79751,61.2265 -4.54633,0 1.86112,-32.5889 2.58704,-36.2185 1.63481,-8.1741 -8.336,-25.008 0,-25.008 23.1702,0 56.38131,-4.3117 84.50982,-4.3117 6.92267,0 20.69627,8.6474 20.69627,1.7246 0,-22.13767 -106.83933,7.883 -73.29932,52.6031 15.39517,20.5269 45.97363,7.0247 56.91476,-11.2104 4.27342,-7.1224 5.92963,-41.2859 6.03643,-41.3927 3.30032,-3.3003 25.38957,-5.1906 31.04441,-7.7611 8.17799,-3.71727 116.56888,-61.61957 80.19809,-70.71237 -62.06519,-15.5162 -84.81857,132.80117 -47.42898,132.80117 39.83429,0 168.06934,-127.94377 127.62705,-141.42457 -48.77358,-16.2579 -78.2302,99.41297 -51.74069,125.90247 20.35735,20.3573 58.34681,-22.9907 73.29932,-37.9432 37.20757,-37.20767 16.38455,62.9731 16.38455,52.603 0,-50.488 -2.86125,-72.28997 41.39257,-61.2265 18.42188,4.6055 41.59056,-2.80515 61.22649,0 33.65343,4.8077 18.48038,96.0268 157.85652,147.0903"
|
||||
id="path3811"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cssssssssssssssssssssccssssssssssscssssssssc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.1 KiB |
BIN
external/skrollr/examples/images/slj.png
vendored
BIN
external/skrollr/examples/images/slj.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB |
197
external/skrollr/examples/main.css
vendored
197
external/skrollr/examples/main.css
vendored
@ -1,197 +0,0 @@
|
||||
html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html, body {
|
||||
line-height: 1;
|
||||
min-height:100%;
|
||||
font-family:Artial, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #eeeeee;
|
||||
background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
|
||||
background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
|
||||
background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
|
||||
background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
|
||||
background: linear-gradient(top, #eeeeee, #cccccc 100%);
|
||||
background-attachment:fixed;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin:1em 0;
|
||||
line-height:1.1em;
|
||||
}
|
||||
|
||||
q {
|
||||
font-style:italic;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2.91em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1 > small {
|
||||
text-align:right;
|
||||
display:inline-block;
|
||||
font-size:.71em;
|
||||
text-indent:15em;
|
||||
color:#444;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color:inherit;
|
||||
font-size:1.91em;
|
||||
margin:2em 0 1em 0;
|
||||
}
|
||||
|
||||
h2:first-child {margin-top:0;}
|
||||
|
||||
h3 {
|
||||
color:#333;
|
||||
font-size:1.41em;
|
||||
margin:1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color:#444;
|
||||
font-size:1.11em;
|
||||
margin:1em 0;
|
||||
}
|
||||
|
||||
#progress {
|
||||
height:2%;
|
||||
background:#444;
|
||||
bottom:0;
|
||||
z-index:200;
|
||||
}
|
||||
|
||||
#scrollbar {
|
||||
position:fixed;
|
||||
right:2px;
|
||||
height:50px;
|
||||
width:6px;
|
||||
background:#444;
|
||||
background:rgba(0,0,0,0.6);
|
||||
border:1px solid rgba(255,255,255,0.6);
|
||||
z-index:300;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.skrollr-desktop #scrollbar {display:none;}
|
||||
|
||||
#bg1, #bg2, #bg3 {
|
||||
z-index:50;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:url(images/bubbles.png) repeat 0 0;
|
||||
}
|
||||
|
||||
#bg2 {
|
||||
z-index:49;
|
||||
background-image:url(images/bubbles2.png);
|
||||
}
|
||||
|
||||
#bg3 {
|
||||
z-index:48;
|
||||
background-image:url(images/bubbles3.png);
|
||||
}
|
||||
|
||||
#intro {
|
||||
width:80%;
|
||||
left:50%;
|
||||
top:1em;
|
||||
margin-left:-40%;
|
||||
padding:2em;
|
||||
background:#fff;
|
||||
text-align:center;
|
||||
border-radius:1em;
|
||||
|
||||
-webkit-transform-origin:0 0;
|
||||
-moz-transform-origin:0 0;
|
||||
-ms-transform-origin:0 0;
|
||||
-o-transform-origin:0 0;
|
||||
transform-origin:0 0;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#intro .arrows {
|
||||
font-size:2em;
|
||||
color:#09f;
|
||||
}
|
||||
|
||||
#transform {
|
||||
width:70%;
|
||||
left:50%;
|
||||
top:20%;
|
||||
margin-left:-35%;
|
||||
text-align:center;
|
||||
font-size:150%;
|
||||
|
||||
.transform-origin(50%, 50%);
|
||||
}
|
||||
|
||||
#properties {
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding-top:10%;
|
||||
text-align:center;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#easing_wrapper {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#easing {
|
||||
top:10%;
|
||||
width:50%;
|
||||
z-index:101;
|
||||
}
|
||||
|
||||
.drop {
|
||||
background:#09f;
|
||||
font-weight:bold;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#download {
|
||||
width:80%;
|
||||
left:10%;
|
||||
height:80%;
|
||||
padding:3em;
|
||||
border:0 solid #222;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.twitter-share-button, .twitter-follow-button {
|
||||
vertical-align:middle;
|
||||
}
|
||||
40
external/skrollr/examples/path.html
vendored
40
external/skrollr/examples/path.html
vendored
@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>Drawing a path</title>
|
||||
</head>
|
||||
|
||||
<body style="text-align:center;">
|
||||
<div id="skrollr-body">
|
||||
<h1>SVG IS AWESOME (so is skrollr)</h1>
|
||||
<p>Scroll down for details</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900px" height="1200px">
|
||||
<path
|
||||
style="fill:none;stroke:#333333;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
|
||||
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
|
||||
|
||||
d="m 199.16266,227.29566 c 0,0 -35.71429,-184.285714 37.14286,-210.000004 72.85714,-25.7142792 95.40137,3.16127 134.28572,42.85715 C 462.01038,153.47988 433.14019,231.62843 612.01981,188.72422 740.78435,157.8401 648.46996,-124.25341 423.44838,73.009946 397.57737,95.689556 342.01981,227.29566 322.01981,268.72423 c -20,41.42857 -15.71429,142.85714 64.28571,222.85714 80,80 143.73919,-10.78923 207.14286,17.14286 89.11717,39.26002 175.71428,70 214.28571,198.57143 38.57143,128.57142 -224.28571,45.71428 -311.42857,50 -87.14286,4.28571 -174.7636,-13.7114 -273.33504,69.14573 -98.57143,82.85724 -123.427376,147.71354 -133.893126,125.93684 -13.988987,-29.1077 -55.031934,-20.6196 -72.436974,2.587 -35.52138,47.36187 48.898892,49.25187 59.501803,81.06057 11.228801,33.6863 -55.491303,91.6685 -70.7122836,61.2265 -14.3563298,-28.7127 55.6559746,-11.2104 68.9875946,-11.2104 59.313946,0 106.207266,-47.3062 135.388156,-93.99577 9.07249,-14.516 16.34065,-34.5597 6.03641,-50.0161 -24.31744,-36.4761 -61.10674,32.1704 -64.67586,50.0161 -1.78804,8.94027 -18.73345,93.13327 -18.9716,93.13327 -15.39093,0 28.03002,-116.70147 77.61105,-83.6473 22.80402,15.2025 -31.82409,33.8676 -43.11725,31.0443 -2.54514,-0.6362 -14.1213,-7.4374 -16.38456,-5.174 -1.98676,1.9867 9.07416,13.8365 10.34816,16.3845 2.87494,5.7499 10.51739,15.8661 17.24688,18.1092 69.57702,23.1924 68.47583,-63.69675 106.93079,-50.8783 25.47788,8.4926 17.93869,61.2265 13.79751,61.2265 -4.54633,0 1.86112,-32.5889 2.58704,-36.2185 1.63481,-8.1741 -8.336,-25.008 0,-25.008 23.1702,0 56.38131,-4.3117 84.50982,-4.3117 6.92267,0 20.69627,8.6474 20.69627,1.7246 0,-22.13767 -106.83933,7.883 -73.29932,52.6031 15.39517,20.5269 45.97363,7.0247 56.91476,-11.2104 4.27342,-7.1224 5.92963,-41.2859 6.03643,-41.3927 3.30032,-3.3003 25.38957,-5.1906 31.04441,-7.7611 8.17799,-3.71727 116.56888,-61.61957 80.19809,-70.71237 -62.06519,-15.5162 -84.81857,132.80117 -47.42898,132.80117 39.83429,0 168.06934,-127.94377 127.62705,-141.42457 -48.77358,-16.2579 -78.2302,99.41297 -51.74069,125.90247 20.35735,20.3573 58.34681,-22.9907 73.29932,-37.9432 37.20757,-37.20767 16.38455,62.9731 16.38455,52.603 0,-50.488 -2.86125,-72.28997 41.39257,-61.2265 18.42188,4.6055 41.59056,-2.80515 61.22649,0 33.65343,4.8077 18.48038,96.0268 157.85652,147.0903"
|
||||
/>
|
||||
</svg>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
<p>WOOOT!</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
forceHeight: false
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
79
external/skrollr/examples/pausing.html
vendored
79
external/skrollr/examples/pausing.html
vendored
@ -1,79 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Pausing</title>
|
||||
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
body {font-family:sans-serif;}
|
||||
|
||||
body > div {
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:transparent center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
body > div:nth-child(1) {
|
||||
background-image:url(http://placekitten.com/800/600?image=1);
|
||||
}
|
||||
|
||||
body > div:nth-child(2) {
|
||||
background:#f0f0f0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
body > div:nth-child(3) {
|
||||
background-image:url(http://placekitten.com/800/600?image=3);
|
||||
}
|
||||
|
||||
.box {
|
||||
position:absolute;
|
||||
left:0;
|
||||
height:100%;
|
||||
background:#09f;
|
||||
}
|
||||
|
||||
p {margin:1em 0;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div data-0="transform:translate(0,0%);" data-100p="transform:translate(0,-100%);"></div>
|
||||
|
||||
<div data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%)" data-_box-100p="" data-_box-200p="transform:translate(0,-100%)">
|
||||
<div class="box" data-100p="width:0%;" data-_box-100p="width:100%"></div>
|
||||
</div>
|
||||
|
||||
<div data-_box-100p="transform:translate(0,100%);" data-_box-200p="transform:translate(0,0%);"></div>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
skrollr.init({
|
||||
constants: {
|
||||
//fill the box for a "duration" of 150% of the viewport (pause for 150%)
|
||||
//adjust for shorter/longer pause
|
||||
box: '150p'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
19
external/skrollr/examples/scripts/main.js
vendored
19
external/skrollr/examples/scripts/main.js
vendored
@ -1,19 +0,0 @@
|
||||
require.config({
|
||||
baseUrl: "../dist",
|
||||
paths: {
|
||||
'skrollr' : "skrollr.min"
|
||||
},
|
||||
waitSeconds: 15
|
||||
});
|
||||
|
||||
require(['skrollr'], function(skrollr){
|
||||
var s = skrollr.init({
|
||||
edgeStrategy: 'set',
|
||||
easing: {
|
||||
WTF: Math.random,
|
||||
inverted: function(p) {
|
||||
return 1-p;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
36
external/skrollr/examples/scripts/require.js
vendored
36
external/skrollr/examples/scripts/require.js
vendored
@ -1,36 +0,0 @@
|
||||
/*
|
||||
RequireJS 2.1.9 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
|
||||
Available via the MIT or new BSD license.
|
||||
see: http://github.com/jrburke/requirejs for details
|
||||
*/
|
||||
var requirejs,require,define;
|
||||
(function(Z){function H(b){return"[object Function]"===L.call(b)}function I(b){return"[object Array]"===L.call(b)}function y(b,c){if(b){var e;for(e=0;e<b.length&&(!b[e]||!c(b[e],e,b));e+=1);}}function M(b,c){if(b){var e;for(e=b.length-1;-1<e&&(!b[e]||!c(b[e],e,b));e-=1);}}function t(b,c){return ga.call(b,c)}function l(b,c){return t(b,c)&&b[c]}function F(b,c){for(var e in b)if(t(b,e)&&c(b[e],e))break}function Q(b,c,e,h){c&&F(c,function(c,j){if(e||!t(b,j))h&&"string"!==typeof c?(b[j]||(b[j]={}),Q(b[j],
|
||||
c,e,h)):b[j]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function aa(b){throw b;}function ba(b){if(!b)return b;var c=Z;y(b.split("."),function(b){c=c[b]});return c}function A(b,c,e,h){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=h;e&&(c.originalError=e);return c}function ha(b){function c(a,f,b){var d,m,c,g,e,h,j,i=f&&f.split("/");d=i;var n=k.map,p=n&&n["*"];if(a&&"."===a.charAt(0))if(f){d=l(k.pkgs,f)?i=[f]:i.slice(0,i.length-
|
||||
1);f=a=d.concat(a.split("/"));for(d=0;f[d];d+=1)if(m=f[d],"."===m)f.splice(d,1),d-=1;else if(".."===m)if(1===d&&(".."===f[2]||".."===f[0]))break;else 0<d&&(f.splice(d-1,2),d-=2);d=l(k.pkgs,f=a[0]);a=a.join("/");d&&a===f+"/"+d.main&&(a=f)}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&n&&(i||p)){f=a.split("/");for(d=f.length;0<d;d-=1){c=f.slice(0,d).join("/");if(i)for(m=i.length;0<m;m-=1)if(b=l(n,i.slice(0,m).join("/")))if(b=l(b,c)){g=b;e=d;break}if(g)break;!h&&(p&&l(p,c))&&(h=l(p,c),j=d)}!g&&
|
||||
h&&(g=h,e=j);g&&(f.splice(0,e,g),a=f.join("/"))}return a}function e(a){z&&y(document.getElementsByTagName("script"),function(f){if(f.getAttribute("data-requiremodule")===a&&f.getAttribute("data-requirecontext")===i.contextName)return f.parentNode.removeChild(f),!0})}function h(a){var f=l(k.paths,a);if(f&&I(f)&&1<f.length)return f.shift(),i.require.undef(a),i.require([a]),!0}function $(a){var f,b=a?a.indexOf("!"):-1;-1<b&&(f=a.substring(0,b),a=a.substring(b+1,a.length));return[f,a]}function n(a,f,
|
||||
b,d){var m,B,g=null,e=f?f.name:null,h=a,j=!0,k="";a||(j=!1,a="_@r"+(L+=1));a=$(a);g=a[0];a=a[1];g&&(g=c(g,e,d),B=l(r,g));a&&(g?k=B&&B.normalize?B.normalize(a,function(a){return c(a,e,d)}):c(a,e,d):(k=c(a,e,d),a=$(k),g=a[0],k=a[1],b=!0,m=i.nameToUrl(k)));b=g&&!B&&!b?"_unnormalized"+(M+=1):"";return{prefix:g,name:k,parentMap:f,unnormalized:!!b,url:m,originalName:h,isDefine:j,id:(g?g+"!"+k:k)+b}}function q(a){var f=a.id,b=l(p,f);b||(b=p[f]=new i.Module(a));return b}function s(a,f,b){var d=a.id,m=l(p,
|
||||
d);if(t(r,d)&&(!m||m.defineEmitComplete))"defined"===f&&b(r[d]);else if(m=q(a),m.error&&"error"===f)b(m.error);else m.on(f,b)}function v(a,f){var b=a.requireModules,d=!1;if(f)f(a);else if(y(b,function(f){if(f=l(p,f))f.error=a,f.events.error&&(d=!0,f.emit("error",a))}),!d)j.onError(a)}function w(){R.length&&(ia.apply(G,[G.length-1,0].concat(R)),R=[])}function x(a){delete p[a];delete T[a]}function E(a,f,b){var d=a.map.id;a.error?a.emit("error",a.error):(f[d]=!0,y(a.depMaps,function(d,c){var g=d.id,
|
||||
e=l(p,g);e&&(!a.depMatched[c]&&!b[g])&&(l(f,g)?(a.defineDep(c,r[g]),a.check()):E(e,f,b))}),b[d]=!0)}function C(){var a,f,b,d,m=(b=1E3*k.waitSeconds)&&i.startTime+b<(new Date).getTime(),c=[],g=[],j=!1,l=!0;if(!U){U=!0;F(T,function(b){a=b.map;f=a.id;if(b.enabled&&(a.isDefine||g.push(b),!b.error))if(!b.inited&&m)h(f)?j=d=!0:(c.push(f),e(f));else if(!b.inited&&(b.fetched&&a.isDefine)&&(j=!0,!a.prefix))return l=!1});if(m&&c.length)return b=A("timeout","Load timeout for modules: "+c,null,c),b.contextName=
|
||||
i.contextName,v(b);l&&y(g,function(a){E(a,{},{})});if((!m||d)&&j)if((z||da)&&!V)V=setTimeout(function(){V=0;C()},50);U=!1}}function D(a){t(r,a[0])||q(n(a[0],null,!0)).init(a[1],a[2])}function J(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!W?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||W)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function K(){var a;for(w();G.length;){a=
|
||||
G.shift();if(null===a[0])return v(A("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));D(a)}}var U,X,i,N,V,k={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},shim:{},config:{}},p={},T={},Y={},G=[],r={},S={},L=1,M=1;N={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){var b=
|
||||
l(k.pkgs,a.map.id);return(b?l(k.config,a.map.id+"/"+b.main):l(k.config,a.map.id))||{}},exports:r[a.map.id]}}};X=function(a){this.events=l(Y,a.id)||{};this.map=a;this.shim=l(k.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};X.prototype={init:function(a,b,c,d){d=d||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;
|
||||
this.ignore=d.ignore;d.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
|
||||
this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var d=this.exports,m=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(H(m)){if(this.events.error&&this.map.isDefine||j.onError!==aa)try{d=i.execCb(c,m,b,d)}catch(e){a=e}else d=i.execCb(c,m,b,d);this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==
|
||||
this.exports?d=b.exports:void 0===d&&this.usingExports&&(d=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",v(this.error=a)}else d=m;this.exports=d;if(this.map.isDefine&&!this.ignore&&(r[c]=d,j.onResourceLoad))j.onResourceLoad(i,this.map,this.depMaps);x(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=
|
||||
!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,e=n(a.prefix);this.depMaps.push(e);s(e,"defined",u(this,function(d){var m,e;e=this.map.name;var g=this.map.parentMap?this.map.parentMap.name:null,h=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(d.normalize&&(e=d.normalize(e,function(a){return c(a,g,!0)})||""),d=n(a.prefix+"!"+e,this.map.parentMap),s(d,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),
|
||||
e=l(p,d.id)){this.depMaps.push(d);if(this.events.error)e.on("error",u(this,function(a){this.emit("error",a)}));e.enable()}}else m=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),m.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];F(p,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&x(a.map.id)});v(a)}),m.fromText=u(this,function(d,c){var e=a.name,g=n(e),B=O;c&&(d=c);B&&(O=!1);q(g);t(k.config,b)&&(k.config[e]=k.config[b]);try{j.exec(d)}catch(ca){return v(A("fromtexteval",
|
||||
"fromText eval for "+b+" failed: "+ca,ca,[b]))}B&&(O=!0);this.depMaps.push(g);i.completeLoad(e);h([e],m)}),d.load(a.name,h,m,k)}));i.enable(e,this);this.pluginMaps[e.id]=e},enable:function(){T[this.map.id]=this;this.enabling=this.enabled=!0;y(this.depMaps,u(this,function(a,b){var c,d;if("string"===typeof a){a=n(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=l(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",u(this,function(a){this.defineDep(b,
|
||||
a);this.check()}));this.errback&&s(a,"error",u(this,this.errback))}c=a.id;d=p[c];!t(N,c)&&(d&&!d.enabled)&&i.enable(a,this)}));F(this.pluginMaps,u(this,function(a){var b=l(p,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){y(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:k,contextName:b,registry:p,defined:r,urlFetched:S,defQueue:G,Module:X,makeModuleMap:n,
|
||||
nextTick:j.nextTick,onError:v,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=k.pkgs,c=k.shim,d={paths:!0,config:!0,map:!0};F(a,function(a,b){d[b]?"map"===b?(k.map||(k.map={}),Q(k[b],a,!0,!0)):Q(k[b],a,!0):k[b]=a});a.shim&&(F(a.shim,function(a,b){I(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);c[b]=a}),k.shim=c);a.packages&&(y(a.packages,function(a){a="string"===typeof a?{name:a}:a;b[a.name]={name:a.name,
|
||||
location:a.location||a.name,main:(a.main||"main").replace(ja,"").replace(ea,"")}}),k.pkgs=b);F(p,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=n(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(Z,arguments));return b||a.exports&&ba(a.exports)}},makeRequire:function(a,f){function h(d,c,e){var g,k;f.enableBuildCallback&&(c&&H(c))&&(c.__requireJsBuild=!0);if("string"===typeof d){if(H(c))return v(A("requireargs",
|
||||
"Invalid require call"),e);if(a&&t(N,d))return N[d](p[a.id]);if(j.get)return j.get(i,d,a,h);g=n(d,a,!1,!0);g=g.id;return!t(r,g)?v(A("notloaded",'Module name "'+g+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[g]}K();i.nextTick(function(){K();k=q(n(null,a));k.skipMap=f.skipMap;k.init(d,c,e,{enabled:!0});C()});return h}f=f||{};Q(h,{isBrowser:z,toUrl:function(b){var f,e=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==e&&(!("."===g||".."===g)||1<e))f=b.substring(e,b.length),b=
|
||||
b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),f,!0)},defined:function(b){return t(r,n(b,a,!1,!0).id)},specified:function(b){b=n(b,a,!1,!0).id;return t(r,b)||t(p,b)}});a||(h.undef=function(b){w();var c=n(b,a,!0),f=l(p,b);e(b);delete r[b];delete S[c.url];delete Y[b];f&&(f.events.defined&&(Y[b]=f.events),x(b))});return h},enable:function(a){l(p,a.id)&&q(a).enable()},completeLoad:function(a){var b,c,d=l(k.shim,a)||{},e=d.exports;for(w();G.length;){c=G.shift();if(null===c[0]){c[0]=a;if(b)break;b=
|
||||
!0}else c[0]===a&&(b=!0);D(c)}c=l(p,a);if(!b&&!t(r,a)&&c&&!c.inited){if(k.enforceDefine&&(!e||!ba(e)))return h(a)?void 0:v(A("nodefine","No define call for "+a,null,[a]));D([a,d.deps||[],d.exportsFn])}C()},nameToUrl:function(a,b,c){var d,e,h,g,i,n;if(j.jsExtRegExp.test(a))g=a+(b||"");else{d=k.paths;e=k.pkgs;g=a.split("/");for(i=g.length;0<i;i-=1)if(n=g.slice(0,i).join("/"),h=l(e,n),n=l(d,n)){I(n)&&(n=n[0]);g.splice(0,i,n);break}else if(h){a=a===h.name?h.location+"/"+h.main:h.location;g.splice(0,i,
|
||||
a);break}g=g.join("/");g+=b||(/^data\:|\?/.test(g)||c?"":".js");g=("/"===g.charAt(0)||g.match(/^[\w\+\.\-]+:/)?"":k.baseUrl)+g}return k.urlArgs?g+((-1===g.indexOf("?")?"?":"&")+k.urlArgs):g},load:function(a,b){j.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=J(a),i.completeLoad(a.id)},onScriptError:function(a){var b=J(a);if(!h(b.id))return v(A("scripterror","Script error for: "+b.id,
|
||||
a,[b.id]))}};i.require=i.makeRequire();return i}var j,w,x,C,J,D,P,K,q,fa,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,ea=/\.js$/,ja=/^\.\//;w=Object.prototype;var L=w.toString,ga=w.hasOwnProperty,ia=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),da=!z&&"undefined"!==typeof importScripts,ka=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,W="undefined"!==typeof opera&&
|
||||
"[object Opera]"===opera.toString(),E={},s={},R=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(H(requirejs))return;s=requirejs;requirejs=void 0}"undefined"!==typeof require&&!H(require)&&(s=require,require=void 0);j=requirejs=function(b,c,e,h){var q,n="_";!I(b)&&"string"!==typeof b&&(q=b,I(c)?(b=c,c=e,e=h):b=[]);q&&q.context&&(n=q.context);(h=l(E,n))||(h=E[n]=j.s.newContext(n));q&&h.configure(q);return h.require(b,c,e)};j.config=function(b){return j(b)};j.nextTick="undefined"!==
|
||||
typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=j);j.version="2.1.9";j.jsExtRegExp=/^\/|:|\?|\.js$/;j.isBrowser=z;w=j.s={contexts:E,newContext:ha};j({});y(["toUrl","undef","defined","specified"],function(b){j[b]=function(){var c=E._;return c.require[b].apply(c,arguments)}});if(z&&(x=w.head=document.getElementsByTagName("head")[0],C=document.getElementsByTagName("base")[0]))x=w.head=C.parentNode;j.onError=aa;j.createNode=function(b){var c=b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml",
|
||||
"html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};j.load=function(b,c,e){var h=b&&b.config||{};if(z)return h=j.createNode(h,c,e),h.setAttribute("data-requirecontext",b.contextName),h.setAttribute("data-requiremodule",c),h.attachEvent&&!(h.attachEvent.toString&&0>h.attachEvent.toString().indexOf("[native code"))&&!W?(O=!0,h.attachEvent("onreadystatechange",b.onScriptLoad)):(h.addEventListener("load",b.onScriptLoad,!1),h.addEventListener("error",
|
||||
b.onScriptError,!1)),h.src=e,K=h,C?x.insertBefore(h,C):x.appendChild(h),K=null,h;if(da)try{importScripts(e),b.completeLoad(c)}catch(l){b.onError(A("importscripts","importScripts failed for "+c+" at "+e,l,[c]))}};z&&!s.skipDataMain&&M(document.getElementsByTagName("script"),function(b){x||(x=b.parentNode);if(J=b.getAttribute("data-main"))return q=J,s.baseUrl||(D=q.split("/"),q=D.pop(),fa=D.length?D.join("/")+"/":"./",s.baseUrl=fa),q=q.replace(ea,""),j.jsExtRegExp.test(q)&&(q=J),s.deps=s.deps?s.deps.concat(q):
|
||||
[q],!0});define=function(b,c,e){var h,j;"string"!==typeof b&&(e=c,c=b,b=null);I(c)||(e=c,c=null);!c&&H(e)&&(c=[],e.length&&(e.toString().replace(la,"").replace(ma,function(b,e){c.push(e)}),c=(1===e.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(h=K))P&&"interactive"===P.readyState||M(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),h=P;h&&(b||(b=h.getAttribute("data-requiremodule")),j=E[h.getAttribute("data-requirecontext")])}(j?
|
||||
j.defQueue:R).push([b,c,e])};define.amd={jQuery:!0};j.exec=function(b){return eval(b)};j(s)}})(this);
|
||||
21
external/skrollr/examples/svg.html
vendored
21
external/skrollr/examples/svg.html
vendored
@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>SVG</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000px" height="1000px">
|
||||
<rect x="0" y="0" width="100%" height="100%" stroke="black" data-0="fill:rgb(255,0,0);" data-500="fill:rgb(0,0,255);" />
|
||||
<circle cx="50%" cy="50%" r="25%" style="stroke: black;" data-0="fill:rgb(0,0,255);" data-500="fill:rgb(0,255,0);" />
|
||||
</svg>
|
||||
|
||||
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
skrollr.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
external/skrollr/guide/anchor-position-guide.pdf
vendored
BIN
external/skrollr/guide/anchor-position-guide.pdf
vendored
Binary file not shown.
BIN
external/skrollr/guide/anchor-position-guide.png
vendored
BIN
external/skrollr/guide/anchor-position-guide.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
86
external/skrollr/index.html
vendored
86
external/skrollr/index.html
vendored
@ -1,86 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<title>skrollr - parallax scrolling for the masses</title>
|
||||
|
||||
<link href="examples/fixed-positioning.css" rel="stylesheet" type="text/css" />
|
||||
<link href="examples/main.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
|
||||
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
|
||||
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
|
||||
|
||||
<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>
|
||||
|
||||
<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
|
||||
<h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1>
|
||||
<h2>parallax scrolling for the masses</h2>
|
||||
<p>let's get scrollin' ;-)</p>
|
||||
<p class="arrows">▼ ▼ ▼</p>
|
||||
</div>
|
||||
|
||||
<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
|
||||
<h2>transform</h2>
|
||||
<p>scale, skew and rotate the sh** out of any element</p>
|
||||
</div>
|
||||
|
||||
<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">
|
||||
<h2>all numeric properties</h2>
|
||||
<p>width, height, padding, font-size, z-index, blah blah blah</p>
|
||||
</div>
|
||||
|
||||
<div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">
|
||||
<div id="easing" data-3900="left:100%" data-4600="left:25%;">
|
||||
<h2>easing?</h2>
|
||||
<p>sure.</p>
|
||||
<p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>
|
||||
<p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>
|
||||
</div>
|
||||
|
||||
<div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div>
|
||||
<div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div>
|
||||
<div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div>
|
||||
<div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div>
|
||||
<div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div>
|
||||
<div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div>
|
||||
<div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div>
|
||||
</div>
|
||||
|
||||
<div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;">
|
||||
<h2>the end</h2>
|
||||
<p>by the way, you can also animate colors (you did notice this, didn't you?)</p>
|
||||
<p><strong>Now get this thing on <a href="https://github.com/Prinzhorn/skrollr">GitHub</a> and spread the word, it's open source!</strong> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://prinzhorn.github.com/skrollr/" data-via="Prinzhorn">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
|
||||
<p>Check out more <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">examples</a>.</p>
|
||||
<p>Handcrafted by <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">Follow @Prinzhorn</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
|
||||
</div>
|
||||
|
||||
<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
|
||||
|
||||
<script type="text/javascript" src="dist/skrollr.min.js"></script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../skrollr-ie/dist/skrollr.ie.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript">
|
||||
var s = skrollr.init({
|
||||
edgeStrategy: 'set',
|
||||
easing: {
|
||||
WTF: Math.random,
|
||||
inverted: function(p) {
|
||||
return 1-p;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
40
external/skrollr/package.json
vendored
40
external/skrollr/package.json
vendored
@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "skrollr",
|
||||
"title": "skrollr",
|
||||
"description": "Stand-alone parallax scrolling library with zero dependencies.",
|
||||
"version": "0.6.26",
|
||||
"homepage": "https://github.com/Prinzhorn/skrollr",
|
||||
"author": {
|
||||
"name": "Alexander Prinzhorn",
|
||||
"email": "alexander@prinzhorn.it",
|
||||
"url": "http://www.prinzhorn.it/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/Prinzhorn/skrollr.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/Prinzhorn/skrollr/issues"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/Prinzhorn/skrollr/blob/master/LICENSE.txt"
|
||||
}
|
||||
],
|
||||
"main": "dist/skrollr.min.js",
|
||||
"engines": {
|
||||
"node": "0.10.x"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "grunt travis --verbose"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt-cli": "~0.1.7",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-uglify": "~0.2.0",
|
||||
"grunt-contrib-jshint": "~0.3.0",
|
||||
"grunt-contrib-qunit": "~0.2.0"
|
||||
},
|
||||
"keywords": []
|
||||
}
|
||||
37
external/skrollr/shim.html
vendored
37
external/skrollr/shim.html
vendored
@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head class="no-skrollr">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<title>Your title</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="skrollr-body">
|
||||
<!--
|
||||
Put all your elements here.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="dist/skrollr.min.js"></script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript">
|
||||
var s = skrollr.init();
|
||||
|
||||
//Or you may call the init-function at some other point. You could for example use an image preloader.
|
||||
/*
|
||||
window.onload = function() {
|
||||
//Calling it twice doesn't hurt.
|
||||
skrollr.init();
|
||||
};
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1771
external/skrollr/src/skrollr.js
vendored
1771
external/skrollr/src/skrollr.js
vendored
File diff suppressed because it is too large
Load Diff
95
external/skrollr/test/index.html
vendored
95
external/skrollr/test/index.html
vendored
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-skrollr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>skrollr test suite</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="qunit.css" />
|
||||
|
||||
<style type="text/css">
|
||||
#qunit {
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
height:50%;
|
||||
overflow:auto;
|
||||
z-index:101;
|
||||
}
|
||||
|
||||
#anchor-1, #anchor-2 {
|
||||
height:1000px;
|
||||
background:#ccc;
|
||||
position:absolute;
|
||||
top:0;
|
||||
}
|
||||
|
||||
#foreign-anchor {
|
||||
margin:100px;
|
||||
padding:100px;
|
||||
background:#ff0;
|
||||
position:fixed;
|
||||
}
|
||||
|
||||
#relative-percentage-offset {
|
||||
top:100%;
|
||||
}
|
||||
|
||||
#float {
|
||||
position:static !important;
|
||||
}
|
||||
|
||||
div {position:absolute;}
|
||||
</style>
|
||||
|
||||
<script src="../src/skrollr.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="notransition">
|
||||
<div id="end" data-start="font-size:10px;" data-end="font-size:90px;">TEST</div>
|
||||
<div id="simple-numeric" data-_myconst--300=" left:-100px; top:0px " data-_myconst-200-start=" top:50px; left:100px; ">TEST</div>
|
||||
<div id="compound-numeric" data-_my500--500="margin:0px 10px 20px 30px;" data-_my500="margin:30px 20px 10px 0px;">TEST</div>
|
||||
<div id="rgb-color" data-0="color:rgb(0,0,0);" data-500="color:rgb(50,100,150);">TEST</div>
|
||||
<div id="rgba-color" data-0="color:rgba(0,0,0,.2);" data-500="color:rgba(50,100,150,.5);">TEST</div>
|
||||
<div id="hsl-color" data-0="color:hsl(0,0%,0%);" data-500="color:hsl(3600,50%,50%);">TEST</div>
|
||||
<div id="hsla-color" data-0="color:hsla(0,0%,0%,.0);" data-500="color:hsla(3600,50%,50%,.5);">TEST</div>
|
||||
<div id="no-interpolation" data-0="right:!0px;" data-499="right:!100px;">TEST</div>
|
||||
<div id="anchor-1" data-top-bottom="right:100px;" data-top="right:0px;">TEST</div>
|
||||
<div id="anchor-2" data-top="right:0px;" data-top-center="right:200px;">TEST</div>
|
||||
<div id="foreign-anchor" data-top="padding:200px;" data-top-center="padding:100px;" data-anchor-target="#anchor-2"></div>
|
||||
<div id="float" data-start="float:none;" data-499="float:left;" style="background:red;">TEST</div>
|
||||
|
||||
<svg version="1.1" width="200px" height="200px">
|
||||
<rect
|
||||
width="200" height="200" style="fill:#0000ff;fill-rule:evenodd;stroke:none"
|
||||
id="svg-relative-mode"
|
||||
data-top="margin:100px;" data-top-bottom="margin:200px;" />
|
||||
</svg>
|
||||
|
||||
<div id="colon-url" data-250="background-image:!none;" data-499='background-image:!url("https://secure.travis-ci.org/Prinzhorn/skrollr.png");'>TEST</div>
|
||||
<div id="period-number" data-250="background-image:!none;" data-499='background-image:!url("https://secure.travis-ci.org/Prinzhorn/skrollr.png?1337");'>TEST</div>
|
||||
|
||||
<div id="easing" data-0="left[half1]:0px;" data-500="left[half1]:50px;">TEST</div>
|
||||
<div id="easing_with_easing_strategy" data-0="left[half1]:0px;" data-500="left[half1]:50px;" data-edge-strategy="ease">TEST</div>
|
||||
|
||||
<div id="reset-strategy" data-0="left:0px;" data-500="left:50px;" data-edge-strategy="reset" style="left:1337px;">TEST</div>
|
||||
|
||||
<div id="percentage-offset" data-0="left:0px;" data-200p="left:500px;">TEST</div>
|
||||
|
||||
<div id="relative-percentage-offset" data-0="left:0px;" data--100p-bottom-top="left:500px;">TEST</div>
|
||||
|
||||
<div id="auto-z-index" data-0="z-index:!1;" data-250="z-index:auto;">TEST</div>
|
||||
|
||||
<div id="attr" data-0="@title:500;@data-test:skrollr" data-250="@title:250" data-500="@title:0;@data-test:skrollr-test">TEST</div>
|
||||
|
||||
<div id="qunit"></div>
|
||||
|
||||
<script src="qunit.js" type="text/javascript"></script>
|
||||
<script src="qunit-numeric-css-property-equals.js" type="text/javascript"></script>
|
||||
<script src="jquery.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../src/plugins/skrollr.ie.js"></script>
|
||||
<![endif]-->
|
||||
<script src="tests.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
4
external/skrollr/test/jquery.js
vendored
4
external/skrollr/test/jquery.js
vendored
File diff suppressed because one or more lines are too long
57
external/skrollr/test/loading-tests.js
vendored
57
external/skrollr/test/loading-tests.js
vendored
@ -1,57 +0,0 @@
|
||||
/*
|
||||
* Test to see if skrollr is loaded properly
|
||||
* - module support with require
|
||||
* - global variable exposure without module
|
||||
*/
|
||||
|
||||
/*global $:false, require:false, start:false, ok:false, QUnit:false, asyncTest:false */
|
||||
|
||||
$(function(){
|
||||
|
||||
'use strict';
|
||||
|
||||
// a helper to load a script specified by the path argument
|
||||
// onLoaded is called once the script is loaded
|
||||
function loadScript(path, onLoaded){
|
||||
$.getScript( path, function() {
|
||||
if(typeof onLoaded === 'function'){
|
||||
onLoaded.call();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove skrollr from the global scope after each test is run
|
||||
QUnit.testDone(function() {
|
||||
if(typeof window.skrollr !== 'undefined'){
|
||||
delete window.skrollr;
|
||||
}
|
||||
});
|
||||
|
||||
//tests
|
||||
|
||||
asyncTest('skrollr is available through global scope without require', function(){
|
||||
ok(typeof skrollr === 'undefined', 'skrollr is not available before the script is loaded');
|
||||
|
||||
loadScript('../src/skrollr.js', function() {
|
||||
ok(typeof skrollr !== 'undefined', 'skrollr is available through global scope');
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('skrollr is available as a module when require.js is present', function(){
|
||||
ok(typeof skrollr === 'undefined', 'skrollr is not available before the script is loaded');
|
||||
|
||||
loadScript('require.js', function(){
|
||||
require.config({
|
||||
baseUrl: '../src',
|
||||
waitSeconds: 15
|
||||
});
|
||||
|
||||
require(['skrollr'], function(skrollr){
|
||||
ok(typeof skrollr !== 'undefined', 'skrollr is available as a module');
|
||||
start();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
17
external/skrollr/test/loading.html
vendored
17
external/skrollr/test/loading.html
vendored
@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-skrollr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>skrollr test suite</title>
|
||||
<link rel="stylesheet" type="text/css" href="qunit.css" />
|
||||
</head>
|
||||
<body class="notransition">
|
||||
<div id="qunit"></div>
|
||||
<script src="qunit.js" type="text/javascript"></script>
|
||||
<script src="jquery.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../src/plugins/skrollr.ie.js"></script>
|
||||
<![endif]-->
|
||||
<script src="loading-tests.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,36 +0,0 @@
|
||||
QUnit.extend(QUnit, {
|
||||
rxNumericCSSProperty: /[0-9.]+/g,
|
||||
numericCSSPropertyEquals: function(actual, expected, message) {
|
||||
//Simple case, both strings already match.
|
||||
if(actual === expected) {
|
||||
QUnit.push(true, actual, expected, message);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Now extract all numbers from the property string.
|
||||
//e.g. "0.5px 100px" will result in ["0.5", "100"]
|
||||
var actualArray = actual.match(QUnit.rxNumericCSSProperty);
|
||||
var expectedArray = expected.match(QUnit.rxNumericCSSProperty);
|
||||
|
||||
var passes = actualArray !== null && expectedArray !== null && actualArray.length === expectedArray.length;
|
||||
|
||||
for(var i = 0; passes && i < actualArray.length; i++) {
|
||||
var curActual = actualArray[i];
|
||||
var curExpected = expectedArray[i];
|
||||
var delta = 0.01;
|
||||
|
||||
//Use 0.01 for floats and 1 for ints.
|
||||
if(curActual.indexOf('.') === -1 && curExpected.indexOf('.') === -1) {
|
||||
delta = 1;
|
||||
}
|
||||
|
||||
curActual = parseFloat(curActual);
|
||||
curExpected = parseFloat(curExpected);
|
||||
|
||||
passes = (curActual === curExpected) || Math.abs(curActual - curExpected) <= delta;
|
||||
}
|
||||
|
||||
QUnit.push(passes, actual, expected, message);
|
||||
}
|
||||
});
|
||||
235
external/skrollr/test/qunit.css
vendored
235
external/skrollr/test/qunit.css
vendored
@ -1,235 +0,0 @@
|
||||
/**
|
||||
* QUnit v1.5.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://docs.jquery.com/QUnit
|
||||
*
|
||||
* Copyright (c) 2012 John Resig, Jörn Zaefferer
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* or GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 15px 15px 0 0;
|
||||
-moz-border-radius: 15px 15px 0 0;
|
||||
-webkit-border-top-right-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-header label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests ol {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
|
||||
box-shadow: inset 0px 2px 13px #999;
|
||||
-moz-box-shadow: inset 0px 2px 13px #999;
|
||||
-webkit-box-shadow: inset 0px 2px 13px #999;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
margin: 0.5em;
|
||||
padding: 0.4em 0.5em 0.4em 0.5em;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #5E740B;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 15px 15px;
|
||||
-moz-border-radius: 0 0 15px 15px;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
1669
external/skrollr/test/qunit.js
vendored
1669
external/skrollr/test/qunit.js
vendored
File diff suppressed because it is too large
Load Diff
36
external/skrollr/test/require.js
vendored
36
external/skrollr/test/require.js
vendored
@ -1,36 +0,0 @@
|
||||
/*
|
||||
RequireJS 2.1.9 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
|
||||
Available via the MIT or new BSD license.
|
||||
see: http://github.com/jrburke/requirejs for details
|
||||
*/
|
||||
var requirejs,require,define;
|
||||
(function(Z){function H(b){return"[object Function]"===L.call(b)}function I(b){return"[object Array]"===L.call(b)}function y(b,c){if(b){var e;for(e=0;e<b.length&&(!b[e]||!c(b[e],e,b));e+=1);}}function M(b,c){if(b){var e;for(e=b.length-1;-1<e&&(!b[e]||!c(b[e],e,b));e-=1);}}function t(b,c){return ga.call(b,c)}function l(b,c){return t(b,c)&&b[c]}function F(b,c){for(var e in b)if(t(b,e)&&c(b[e],e))break}function Q(b,c,e,h){c&&F(c,function(c,j){if(e||!t(b,j))h&&"string"!==typeof c?(b[j]||(b[j]={}),Q(b[j],
|
||||
c,e,h)):b[j]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function aa(b){throw b;}function ba(b){if(!b)return b;var c=Z;y(b.split("."),function(b){c=c[b]});return c}function A(b,c,e,h){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=h;e&&(c.originalError=e);return c}function ha(b){function c(a,f,b){var d,m,c,g,e,h,j,i=f&&f.split("/");d=i;var n=k.map,p=n&&n["*"];if(a&&"."===a.charAt(0))if(f){d=l(k.pkgs,f)?i=[f]:i.slice(0,i.length-
|
||||
1);f=a=d.concat(a.split("/"));for(d=0;f[d];d+=1)if(m=f[d],"."===m)f.splice(d,1),d-=1;else if(".."===m)if(1===d&&(".."===f[2]||".."===f[0]))break;else 0<d&&(f.splice(d-1,2),d-=2);d=l(k.pkgs,f=a[0]);a=a.join("/");d&&a===f+"/"+d.main&&(a=f)}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&n&&(i||p)){f=a.split("/");for(d=f.length;0<d;d-=1){c=f.slice(0,d).join("/");if(i)for(m=i.length;0<m;m-=1)if(b=l(n,i.slice(0,m).join("/")))if(b=l(b,c)){g=b;e=d;break}if(g)break;!h&&(p&&l(p,c))&&(h=l(p,c),j=d)}!g&&
|
||||
h&&(g=h,e=j);g&&(f.splice(0,e,g),a=f.join("/"))}return a}function e(a){z&&y(document.getElementsByTagName("script"),function(f){if(f.getAttribute("data-requiremodule")===a&&f.getAttribute("data-requirecontext")===i.contextName)return f.parentNode.removeChild(f),!0})}function h(a){var f=l(k.paths,a);if(f&&I(f)&&1<f.length)return f.shift(),i.require.undef(a),i.require([a]),!0}function $(a){var f,b=a?a.indexOf("!"):-1;-1<b&&(f=a.substring(0,b),a=a.substring(b+1,a.length));return[f,a]}function n(a,f,
|
||||
b,d){var m,B,g=null,e=f?f.name:null,h=a,j=!0,k="";a||(j=!1,a="_@r"+(L+=1));a=$(a);g=a[0];a=a[1];g&&(g=c(g,e,d),B=l(r,g));a&&(g?k=B&&B.normalize?B.normalize(a,function(a){return c(a,e,d)}):c(a,e,d):(k=c(a,e,d),a=$(k),g=a[0],k=a[1],b=!0,m=i.nameToUrl(k)));b=g&&!B&&!b?"_unnormalized"+(M+=1):"";return{prefix:g,name:k,parentMap:f,unnormalized:!!b,url:m,originalName:h,isDefine:j,id:(g?g+"!"+k:k)+b}}function q(a){var f=a.id,b=l(p,f);b||(b=p[f]=new i.Module(a));return b}function s(a,f,b){var d=a.id,m=l(p,
|
||||
d);if(t(r,d)&&(!m||m.defineEmitComplete))"defined"===f&&b(r[d]);else if(m=q(a),m.error&&"error"===f)b(m.error);else m.on(f,b)}function v(a,f){var b=a.requireModules,d=!1;if(f)f(a);else if(y(b,function(f){if(f=l(p,f))f.error=a,f.events.error&&(d=!0,f.emit("error",a))}),!d)j.onError(a)}function w(){R.length&&(ia.apply(G,[G.length-1,0].concat(R)),R=[])}function x(a){delete p[a];delete T[a]}function E(a,f,b){var d=a.map.id;a.error?a.emit("error",a.error):(f[d]=!0,y(a.depMaps,function(d,c){var g=d.id,
|
||||
e=l(p,g);e&&(!a.depMatched[c]&&!b[g])&&(l(f,g)?(a.defineDep(c,r[g]),a.check()):E(e,f,b))}),b[d]=!0)}function C(){var a,f,b,d,m=(b=1E3*k.waitSeconds)&&i.startTime+b<(new Date).getTime(),c=[],g=[],j=!1,l=!0;if(!U){U=!0;F(T,function(b){a=b.map;f=a.id;if(b.enabled&&(a.isDefine||g.push(b),!b.error))if(!b.inited&&m)h(f)?j=d=!0:(c.push(f),e(f));else if(!b.inited&&(b.fetched&&a.isDefine)&&(j=!0,!a.prefix))return l=!1});if(m&&c.length)return b=A("timeout","Load timeout for modules: "+c,null,c),b.contextName=
|
||||
i.contextName,v(b);l&&y(g,function(a){E(a,{},{})});if((!m||d)&&j)if((z||da)&&!V)V=setTimeout(function(){V=0;C()},50);U=!1}}function D(a){t(r,a[0])||q(n(a[0],null,!0)).init(a[1],a[2])}function J(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!W?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||W)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function K(){var a;for(w();G.length;){a=
|
||||
G.shift();if(null===a[0])return v(A("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));D(a)}}var U,X,i,N,V,k={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},shim:{},config:{}},p={},T={},Y={},G=[],r={},S={},L=1,M=1;N={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){var b=
|
||||
l(k.pkgs,a.map.id);return(b?l(k.config,a.map.id+"/"+b.main):l(k.config,a.map.id))||{}},exports:r[a.map.id]}}};X=function(a){this.events=l(Y,a.id)||{};this.map=a;this.shim=l(k.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};X.prototype={init:function(a,b,c,d){d=d||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;
|
||||
this.ignore=d.ignore;d.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
|
||||
this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var d=this.exports,m=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(H(m)){if(this.events.error&&this.map.isDefine||j.onError!==aa)try{d=i.execCb(c,m,b,d)}catch(e){a=e}else d=i.execCb(c,m,b,d);this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==
|
||||
this.exports?d=b.exports:void 0===d&&this.usingExports&&(d=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",v(this.error=a)}else d=m;this.exports=d;if(this.map.isDefine&&!this.ignore&&(r[c]=d,j.onResourceLoad))j.onResourceLoad(i,this.map,this.depMaps);x(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=
|
||||
!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,e=n(a.prefix);this.depMaps.push(e);s(e,"defined",u(this,function(d){var m,e;e=this.map.name;var g=this.map.parentMap?this.map.parentMap.name:null,h=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(d.normalize&&(e=d.normalize(e,function(a){return c(a,g,!0)})||""),d=n(a.prefix+"!"+e,this.map.parentMap),s(d,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),
|
||||
e=l(p,d.id)){this.depMaps.push(d);if(this.events.error)e.on("error",u(this,function(a){this.emit("error",a)}));e.enable()}}else m=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),m.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];F(p,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&x(a.map.id)});v(a)}),m.fromText=u(this,function(d,c){var e=a.name,g=n(e),B=O;c&&(d=c);B&&(O=!1);q(g);t(k.config,b)&&(k.config[e]=k.config[b]);try{j.exec(d)}catch(ca){return v(A("fromtexteval",
|
||||
"fromText eval for "+b+" failed: "+ca,ca,[b]))}B&&(O=!0);this.depMaps.push(g);i.completeLoad(e);h([e],m)}),d.load(a.name,h,m,k)}));i.enable(e,this);this.pluginMaps[e.id]=e},enable:function(){T[this.map.id]=this;this.enabling=this.enabled=!0;y(this.depMaps,u(this,function(a,b){var c,d;if("string"===typeof a){a=n(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=l(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",u(this,function(a){this.defineDep(b,
|
||||
a);this.check()}));this.errback&&s(a,"error",u(this,this.errback))}c=a.id;d=p[c];!t(N,c)&&(d&&!d.enabled)&&i.enable(a,this)}));F(this.pluginMaps,u(this,function(a){var b=l(p,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){y(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:k,contextName:b,registry:p,defined:r,urlFetched:S,defQueue:G,Module:X,makeModuleMap:n,
|
||||
nextTick:j.nextTick,onError:v,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=k.pkgs,c=k.shim,d={paths:!0,config:!0,map:!0};F(a,function(a,b){d[b]?"map"===b?(k.map||(k.map={}),Q(k[b],a,!0,!0)):Q(k[b],a,!0):k[b]=a});a.shim&&(F(a.shim,function(a,b){I(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);c[b]=a}),k.shim=c);a.packages&&(y(a.packages,function(a){a="string"===typeof a?{name:a}:a;b[a.name]={name:a.name,
|
||||
location:a.location||a.name,main:(a.main||"main").replace(ja,"").replace(ea,"")}}),k.pkgs=b);F(p,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=n(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(Z,arguments));return b||a.exports&&ba(a.exports)}},makeRequire:function(a,f){function h(d,c,e){var g,k;f.enableBuildCallback&&(c&&H(c))&&(c.__requireJsBuild=!0);if("string"===typeof d){if(H(c))return v(A("requireargs",
|
||||
"Invalid require call"),e);if(a&&t(N,d))return N[d](p[a.id]);if(j.get)return j.get(i,d,a,h);g=n(d,a,!1,!0);g=g.id;return!t(r,g)?v(A("notloaded",'Module name "'+g+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[g]}K();i.nextTick(function(){K();k=q(n(null,a));k.skipMap=f.skipMap;k.init(d,c,e,{enabled:!0});C()});return h}f=f||{};Q(h,{isBrowser:z,toUrl:function(b){var f,e=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==e&&(!("."===g||".."===g)||1<e))f=b.substring(e,b.length),b=
|
||||
b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),f,!0)},defined:function(b){return t(r,n(b,a,!1,!0).id)},specified:function(b){b=n(b,a,!1,!0).id;return t(r,b)||t(p,b)}});a||(h.undef=function(b){w();var c=n(b,a,!0),f=l(p,b);e(b);delete r[b];delete S[c.url];delete Y[b];f&&(f.events.defined&&(Y[b]=f.events),x(b))});return h},enable:function(a){l(p,a.id)&&q(a).enable()},completeLoad:function(a){var b,c,d=l(k.shim,a)||{},e=d.exports;for(w();G.length;){c=G.shift();if(null===c[0]){c[0]=a;if(b)break;b=
|
||||
!0}else c[0]===a&&(b=!0);D(c)}c=l(p,a);if(!b&&!t(r,a)&&c&&!c.inited){if(k.enforceDefine&&(!e||!ba(e)))return h(a)?void 0:v(A("nodefine","No define call for "+a,null,[a]));D([a,d.deps||[],d.exportsFn])}C()},nameToUrl:function(a,b,c){var d,e,h,g,i,n;if(j.jsExtRegExp.test(a))g=a+(b||"");else{d=k.paths;e=k.pkgs;g=a.split("/");for(i=g.length;0<i;i-=1)if(n=g.slice(0,i).join("/"),h=l(e,n),n=l(d,n)){I(n)&&(n=n[0]);g.splice(0,i,n);break}else if(h){a=a===h.name?h.location+"/"+h.main:h.location;g.splice(0,i,
|
||||
a);break}g=g.join("/");g+=b||(/^data\:|\?/.test(g)||c?"":".js");g=("/"===g.charAt(0)||g.match(/^[\w\+\.\-]+:/)?"":k.baseUrl)+g}return k.urlArgs?g+((-1===g.indexOf("?")?"?":"&")+k.urlArgs):g},load:function(a,b){j.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=J(a),i.completeLoad(a.id)},onScriptError:function(a){var b=J(a);if(!h(b.id))return v(A("scripterror","Script error for: "+b.id,
|
||||
a,[b.id]))}};i.require=i.makeRequire();return i}var j,w,x,C,J,D,P,K,q,fa,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,ea=/\.js$/,ja=/^\.\//;w=Object.prototype;var L=w.toString,ga=w.hasOwnProperty,ia=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),da=!z&&"undefined"!==typeof importScripts,ka=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,W="undefined"!==typeof opera&&
|
||||
"[object Opera]"===opera.toString(),E={},s={},R=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(H(requirejs))return;s=requirejs;requirejs=void 0}"undefined"!==typeof require&&!H(require)&&(s=require,require=void 0);j=requirejs=function(b,c,e,h){var q,n="_";!I(b)&&"string"!==typeof b&&(q=b,I(c)?(b=c,c=e,e=h):b=[]);q&&q.context&&(n=q.context);(h=l(E,n))||(h=E[n]=j.s.newContext(n));q&&h.configure(q);return h.require(b,c,e)};j.config=function(b){return j(b)};j.nextTick="undefined"!==
|
||||
typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=j);j.version="2.1.9";j.jsExtRegExp=/^\/|:|\?|\.js$/;j.isBrowser=z;w=j.s={contexts:E,newContext:ha};j({});y(["toUrl","undef","defined","specified"],function(b){j[b]=function(){var c=E._;return c.require[b].apply(c,arguments)}});if(z&&(x=w.head=document.getElementsByTagName("head")[0],C=document.getElementsByTagName("base")[0]))x=w.head=C.parentNode;j.onError=aa;j.createNode=function(b){var c=b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml",
|
||||
"html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};j.load=function(b,c,e){var h=b&&b.config||{};if(z)return h=j.createNode(h,c,e),h.setAttribute("data-requirecontext",b.contextName),h.setAttribute("data-requiremodule",c),h.attachEvent&&!(h.attachEvent.toString&&0>h.attachEvent.toString().indexOf("[native code"))&&!W?(O=!0,h.attachEvent("onreadystatechange",b.onScriptLoad)):(h.addEventListener("load",b.onScriptLoad,!1),h.addEventListener("error",
|
||||
b.onScriptError,!1)),h.src=e,K=h,C?x.insertBefore(h,C):x.appendChild(h),K=null,h;if(da)try{importScripts(e),b.completeLoad(c)}catch(l){b.onError(A("importscripts","importScripts failed for "+c+" at "+e,l,[c]))}};z&&!s.skipDataMain&&M(document.getElementsByTagName("script"),function(b){x||(x=b.parentNode);if(J=b.getAttribute("data-main"))return q=J,s.baseUrl||(D=q.split("/"),q=D.pop(),fa=D.length?D.join("/")+"/":"./",s.baseUrl=fa),q=q.replace(ea,""),j.jsExtRegExp.test(q)&&(q=J),s.deps=s.deps?s.deps.concat(q):
|
||||
[q],!0});define=function(b,c,e){var h,j;"string"!==typeof b&&(e=c,c=b,b=null);I(c)||(e=c,c=null);!c&&H(e)&&(c=[],e.length&&(e.toString().replace(la,"").replace(ma,function(b,e){c.push(e)}),c=(1===e.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(h=K))P&&"interactive"===P.readyState||M(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),h=P;h&&(b||(b=h.getAttribute("data-requiremodule")),j=E[h.getAttribute("data-requirecontext")])}(j?
|
||||
j.defQueue:R).push([b,c,e])};define.amd={jQuery:!0};j.exec=function(b){return eval(b)};j(s)}})(this);
|
||||
438
external/skrollr/test/tests.js
vendored
438
external/skrollr/test/tests.js
vendored
@ -1,438 +0,0 @@
|
||||
$(window).on('load', function() {
|
||||
|
||||
//Initialize skrollr and save the instance.
|
||||
var s = skrollr.init({
|
||||
edgeStrategy: 'set',
|
||||
constants: {
|
||||
myconst: 300,
|
||||
my500: function() {
|
||||
return 500;
|
||||
}
|
||||
},
|
||||
easing: {
|
||||
half1: function() {
|
||||
return 0.5
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//Counts how many assertions will be needed for the tests.
|
||||
var countAssertions = function(tests) {
|
||||
var counter = 0;
|
||||
|
||||
for(var i = 0; i < tests.length; i++) {
|
||||
var curTest = tests[i];
|
||||
|
||||
if(curTest.styles) {
|
||||
$.each(curTest.styles, function() {
|
||||
counter++;
|
||||
});
|
||||
}
|
||||
|
||||
if(curTest.attributes) {
|
||||
$.each(curTest.attributes, function() {
|
||||
counter++;
|
||||
});
|
||||
}
|
||||
|
||||
counter += !!curTest.selector;
|
||||
}
|
||||
|
||||
return counter;
|
||||
};
|
||||
|
||||
//A meta-test which runs common tests
|
||||
//which need synchronization of scrolling and rendering.
|
||||
var scrollTests = function(offset, tests) {
|
||||
module('at scroll position ' + offset);
|
||||
|
||||
asyncTest('rendering', function() {
|
||||
//We can't run them in parallel,
|
||||
//because they would interfere with each others scroll top offset.
|
||||
stop();
|
||||
|
||||
expect(countAssertions(tests));
|
||||
|
||||
//Scroll to offset, which will cause rendering (sooner or later)
|
||||
s.setScrollTop(offset, true);
|
||||
|
||||
s.on('render', function(info) {
|
||||
//Prevent another render event. Only need one for test.
|
||||
s.off('render');
|
||||
|
||||
for(var i = 0; i < tests.length; i++) {
|
||||
var curTest = tests[i];
|
||||
|
||||
if(curTest.styles) {
|
||||
$.each(curTest.styles, function(k) {
|
||||
QUnit.numericCSSPropertyEquals(curTest.element.css(k), curTest.styles[k], curTest.message || 'element\'s (#' + curTest.element[0].id + ') "' + k + '" CSS property is correct');
|
||||
});
|
||||
}
|
||||
|
||||
if(curTest.attributes) {
|
||||
$.each(curTest.attributes, function(k, value) {
|
||||
console.log(curTest.element.prop(k));
|
||||
QUnit.numericCSSPropertyEquals(curTest.element.attr(k), curTest.attributes[k], curTest.message || 'element\'s (#' + curTest.element[0].id + ') "' + k + '" attribute is correct');
|
||||
});
|
||||
}
|
||||
|
||||
if(curTest.selector) {
|
||||
ok(curTest.element.is(curTest.selector), 'element matches "' + curTest.selector + '"');
|
||||
}
|
||||
}
|
||||
|
||||
start(2);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//
|
||||
// Now the actual tests.
|
||||
//
|
||||
|
||||
//Add one element dynamically
|
||||
var newElement = $('<div id="dynamic" data-0="bottom:0px;" data-250="bottom:100px;">TEST</div>').appendTo('body');
|
||||
s.refresh(newElement[0]);
|
||||
|
||||
module('basic stuff');
|
||||
|
||||
test('CSS classes present', function() {
|
||||
strictEqual($('.skrollable').length, 23, 'All elements have the .skrollable class');
|
||||
|
||||
ok($('html').is('.skrollr'), 'HTML element has skrollr class');
|
||||
ok($('html').is(':not(.no-skrollr)'), 'HTML element does not have no-skrollr class');
|
||||
});
|
||||
|
||||
scrollTests(500, [
|
||||
{
|
||||
message: 'colons inside urls are preserved (#73)',
|
||||
element: $('#colon-url'),
|
||||
styles: {
|
||||
backgroundImage: 'url(https://secure.travis-ci.org/Prinzhorn/skrollr.png)'
|
||||
}
|
||||
},
|
||||
{
|
||||
message: 'a single period is no number (#74)',
|
||||
element: $('#period-number'),
|
||||
styles: {
|
||||
backgroundImage: 'url(https://secure.travis-ci.org/Prinzhorn/skrollr.png?1337)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#simple-numeric'),
|
||||
styles: {
|
||||
left: '100px',
|
||||
top: '50px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#easing'),
|
||||
styles: {
|
||||
left: '25px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#compound-numeric'),
|
||||
styles: {
|
||||
marginTop: '30px',
|
||||
marginRight: '20px',
|
||||
marginBottom: '10px',
|
||||
marginLeft: '0px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#rgb-color'),
|
||||
styles: {
|
||||
color: 'rgb(50, 100, 150)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#rgba-color'),
|
||||
styles: {
|
||||
color: 'rgba(50, 100, 150, 0.5)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#hsl-color'),
|
||||
styles: {
|
||||
color: 'rgb(191, 63, 63)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#no-interpolation'),
|
||||
styles: {
|
||||
right: '100px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#anchor-2'),
|
||||
styles: {
|
||||
right: '200px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#foreign-anchor'),
|
||||
styles: {
|
||||
paddingTop: '100px',
|
||||
paddingRight: '100px',
|
||||
paddingBottom: '100px',
|
||||
paddingLeft: '100px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#float'),
|
||||
styles: {
|
||||
float: 'left'
|
||||
}
|
||||
},
|
||||
{
|
||||
message: 'z-index "auto" is no converted to a number (#351)',
|
||||
element: $('#auto-z-index'),
|
||||
styles: {
|
||||
zIndex: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
message: 'attribute interpolation',
|
||||
element: $('#attr'),
|
||||
attributes: {
|
||||
title: '0'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
scrollTests(0, [
|
||||
{
|
||||
element: $('#simple-numeric'),
|
||||
styles: {
|
||||
left: '-100px',
|
||||
top: '0px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#easing'),
|
||||
styles: {
|
||||
left: '25px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#compound-numeric'),
|
||||
styles: {
|
||||
marginTop: '0px',
|
||||
marginRight: '10px',
|
||||
marginBottom: '20px',
|
||||
marginLeft: '30px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#rgb-color'),
|
||||
styles: {
|
||||
color: 'rgb(0, 0, 0)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#rgba-color'),
|
||||
styles: {
|
||||
color: 'rgba(0, 0, 0, 0.2)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#hsl-color'),
|
||||
styles: {
|
||||
color: 'rgb(0, 0, 0)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#no-interpolation'),
|
||||
styles: {
|
||||
right: '0px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#end'),
|
||||
styles: {
|
||||
fontSize: '10px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: newElement,
|
||||
styles: {
|
||||
bottom: '0px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#float'),
|
||||
styles: {
|
||||
float: 'none'
|
||||
}
|
||||
},
|
||||
{
|
||||
message: 'z-index "auto" is no converted to a number (#351)',
|
||||
element: $('#auto-z-index'),
|
||||
styles: {
|
||||
zIndex: '1'
|
||||
}
|
||||
},
|
||||
{
|
||||
message: 'attribute interpolation',
|
||||
element: $('#attr'),
|
||||
attributes: {
|
||||
title: '500',
|
||||
'data-test': 'skrollr'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
scrollTests(250, [
|
||||
{
|
||||
element: $('#simple-numeric'),
|
||||
styles: {
|
||||
left: '0px',
|
||||
top: '25px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#easing'),
|
||||
styles: {
|
||||
left: '25px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#compound-numeric'),
|
||||
styles: {
|
||||
marginTop: '15px',
|
||||
marginRight: '15px',
|
||||
marginBottom: '15px',
|
||||
marginLeft: '15px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#rgb-color'),
|
||||
styles: {
|
||||
color: 'rgb(25, 50, 75)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#rgba-color'),
|
||||
styles: {
|
||||
color: 'rgba(25, 50, 75, 0.35)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#hsl-color'),
|
||||
styles: {
|
||||
color: 'rgb(79, 47, 47)'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#no-interpolation'),
|
||||
styles: {
|
||||
right: '0px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#anchor-2'),
|
||||
styles: {
|
||||
right: '100px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: newElement,
|
||||
styles: {
|
||||
bottom: '100px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#foreign-anchor'),
|
||||
styles: {
|
||||
paddingTop: '150px',
|
||||
paddingRight: '150px',
|
||||
paddingBottom: '150px',
|
||||
paddingLeft: '150px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#float'),
|
||||
styles: {
|
||||
float: 'none'
|
||||
}
|
||||
},
|
||||
{
|
||||
message: 'attribute interpolation',
|
||||
element: $('#attr'),
|
||||
attributes: {
|
||||
title: '250',
|
||||
'data-test': 'skrollr'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
//bottom-top + 50%
|
||||
scrollTests(150, [
|
||||
{
|
||||
element: $('#relative-percentage-offset'),
|
||||
styles: {
|
||||
left: '250px'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
//200%
|
||||
scrollTests(600, [
|
||||
{
|
||||
element: $('#percentage-offset'),
|
||||
styles: {
|
||||
left: '500px'
|
||||
}
|
||||
},
|
||||
{
|
||||
message: 'attribute interpolation',
|
||||
element: $('#attr'),
|
||||
attributes: {
|
||||
'data-test': 'skrollr-test'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
//100%
|
||||
scrollTests(300, [
|
||||
{
|
||||
element: $('#percentage-offset'),
|
||||
styles: {
|
||||
left: '250px'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
//We scroll to a ridiculous large position so that the browser cuts it at the actual position.
|
||||
var maxScrollHeight = s.setScrollTop(1e5) && s.getScrollTop();
|
||||
|
||||
scrollTests(maxScrollHeight, [
|
||||
{
|
||||
element: $('#anchor-1'),
|
||||
styles: {
|
||||
right: '100px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#easing'),
|
||||
styles: {
|
||||
left: '50px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#easing_with_easing_strategy'),
|
||||
styles: {
|
||||
left: '25px'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: $('#reset-strategy'),
|
||||
styles: {
|
||||
left: '1337px'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
});//DOM ready
|
||||
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
42
index.html
42
index.html
@ -2,22 +2,30 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="home">
|
||||
|
||||
<h1 class="page-heading">Posts</h1>
|
||||
|
||||
<ul class="post-list">
|
||||
{% for post in site.posts %}
|
||||
<li>
|
||||
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
|
||||
|
||||
<h2>
|
||||
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
</li>
|
||||
<div class="container" id="posts">
|
||||
<div class="row">
|
||||
{% for post in site.posts limit:4 %}
|
||||
<div class="col-md-3">
|
||||
<h2>{{ post.title }}</h2>
|
||||
<p>
|
||||
{{ post.content | truncatewords:20 }}
|
||||
</p>
|
||||
{% assign wordcount = post.content | number_of_words %}
|
||||
{% if wordcount > 20 %}
|
||||
<p><a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}" role="button">> Weiterlesen</a></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="container" id="about">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
Wir sind der örtliche Erfa-Kreis des Chaos Computer Clubs in Essen. Unsere Gesprächsthemen und Projekte reichen von Soft- und Hardware zu Datenschutz und Netzpolitik. <br><br>
|
||||
Alle Interessierten sind herzlich zu unserem Treff, <a href="https://wiki.die-foobar.de/wiki/Termine/2012">Mittwochs ab 19 Uhr</a>, eingeladen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
12
js/EasePack.min.js
vendored
Executable file
12
js/EasePack.min.js
vendored
Executable file
@ -0,0 +1,12 @@
|
||||
/*!
|
||||
* VERSION: beta 1.9.4
|
||||
* DATE: 2014-07-17
|
||||
* UPDATES AND DOCS AT: http://www.greensock.com
|
||||
*
|
||||
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
|
||||
* This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
|
||||
* Club GreenSock members, the software agreement that was issued with your membership.
|
||||
*
|
||||
* @author: Jack Doyle, jack@greensock.com
|
||||
**/
|
||||
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
|
||||
12
js/TweenLite.min.js
vendored
Executable file
12
js/TweenLite.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
100
js/eyecandy.js
Normal file
100
js/eyecandy.js
Normal file
@ -0,0 +1,100 @@
|
||||
(function() {
|
||||
|
||||
var width, height, largeHeader, canvas, ctx, lines, target, size, animateHeader = true;
|
||||
|
||||
// Main
|
||||
initHeader();
|
||||
addListeners();
|
||||
initAnimation();
|
||||
|
||||
function initHeader() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
size = width > height ? height : width;
|
||||
target = {x: 0, y: height};
|
||||
|
||||
largeHeader = document.getElementById('large-header');
|
||||
largeHeader.style.height = height+'px';
|
||||
|
||||
canvas = document.getElementById('demo-canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// create particles
|
||||
lines = [];
|
||||
for(var i = 0; i < 90; i++) {
|
||||
var l = new Line(Math.random()*360);
|
||||
lines.push(l);
|
||||
}
|
||||
}
|
||||
|
||||
function initAnimation() {
|
||||
animate();
|
||||
}
|
||||
|
||||
// Event handling
|
||||
function addListeners() {
|
||||
window.addEventListener('scroll', scrollCheck);
|
||||
window.addEventListener('resize', resize);
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
if(document.body.scrollTop > height) animateHeader = false;
|
||||
else animateHeader = true;
|
||||
}
|
||||
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
size = width > height ? height : width;
|
||||
largeHeader.style.height = height+'px';
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if(animateHeader) {
|
||||
ctx.clearRect(0,0,width,height);
|
||||
for(var i in lines) {
|
||||
lines[i].draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// Canvas manipulation
|
||||
function Line(angle) {
|
||||
var _this = this;
|
||||
|
||||
// constructor
|
||||
(function() {
|
||||
_this.angle = angle;
|
||||
|
||||
})();
|
||||
|
||||
this.draw = function() {
|
||||
|
||||
var r1 = Math.random()*(size < 400 ? 400 : size)*0.4;
|
||||
var r2 = Math.random()*(size < 400 ? 400 : size)*0.4;
|
||||
var x1 = r1*Math.cos(_this.angle*(Math.PI/180)) + width*0.5;
|
||||
var y1 = r1*Math.sin(_this.angle*(Math.PI/180)) + height*0.48;
|
||||
var x2 = r2*Math.cos(_this.angle*(Math.PI/180)) + width*0.5;
|
||||
var y2 = r2*Math.sin(_this.angle*(Math.PI/180)) + height*0.48;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.strokeStyle = 'rgba(255,193,127,'+(0.5+Math.random()*0.5)+')';
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1, y1, 2, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = 'rgba(255,165,70,'+(0.5+Math.random()*0.5)+')';
|
||||
ctx.fill();
|
||||
|
||||
_this.angle += Math.random();
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
31
js/rAF.js
Normal file
31
js/rAF.js
Normal file
@ -0,0 +1,31 @@
|
||||
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
||||
|
||||
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
|
||||
|
||||
// MIT license
|
||||
|
||||
(function() {
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|
||||
|| window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame)
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
||||
timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
|
||||
if (!window.cancelAnimationFrame)
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}());
|
||||
Loading…
Reference in New Issue
Block a user