removing old shit
This commit is contained in:
Set Sakrecoer
parent
2b5bd4fa0e
commit
dcb26f14ce
|
|
@ -1,23 +0,0 @@
|
||||||
html{
|
|
||||||
height: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.curtains{
|
|
||||||
width: 100%;
|
|
||||||
z-index:1;
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.curtains>li{
|
|
||||||
background: white;
|
|
||||||
display:block;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index:1;
|
|
||||||
}
|
|
||||||
.curtains>li.hidden{display:none;}
|
|
||||||
.curtains>li:first-child{z-index:2;}
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
|
|
||||||
#nav {
|
|
||||||
position: fixed;
|
|
||||||
bottom: -10px; left: 7px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: futura;
|
|
||||||
padding: 0 0 0 0;
|
|
||||||
z-index: 10000;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#nav li {
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
list-style: none;
|
|
||||||
z-index: 10000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* main level link */
|
|
||||||
#nav a {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
width:250px;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
#nav a:hover {
|
|
||||||
color: #0ff;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* main level link hover */
|
|
||||||
#nav .current a, #nav li:hover > a {
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* sub levels link hover */
|
|
||||||
#nav ul li:hover a, #nav li:hover li a {
|
|
||||||
background: rgba(255,0,0,1);
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0px 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
text-shadow: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
#nav ul a:hover {
|
|
||||||
color: #0ff !important;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* dropdown */
|
|
||||||
#nav li:hover > ul {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* level 2 list */
|
|
||||||
#nav ul {
|
|
||||||
display: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 25px;
|
|
||||||
left: 0;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
#nav ul li {
|
|
||||||
float: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav ul a {
|
|
||||||
font-weight: normal;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* level 3+ list */
|
|
||||||
#nav ul ul {
|
|
||||||
left: 250px;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* clearfix */
|
|
||||||
#nav:after {
|
|
||||||
content: ".";
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
visibility: hidden;
|
|
||||||
line-height: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
#nav {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
}
|
|
||||||
html[xmlns] #nav {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
* html #nav {
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
#music_nav:hover{
|
|
||||||
background-color: rgba(255, 0, 24, 0.3);
|
|
||||||
|
|
||||||
}
|
|
||||||
#music_nav_sub:hover{
|
|
||||||
background-color: rgba(255, 0, 24, 0.3);
|
|
||||||
|
|
||||||
}
|
|
||||||
#about_nav:hover{
|
|
||||||
|
|
||||||
background-color: rgba(153, 255, 0, 0.3);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#log_nav:hover{
|
|
||||||
background-color: rgba(0, 255, 229, 0.3);
|
|
||||||
|
|
||||||
}
|
|
||||||
#log_nav_sub:hover{
|
|
||||||
background-color: rgba(0, 255, 229, 0.3);
|
|
||||||
|
|
||||||
}
|
|
||||||
#discog_nav:hover{
|
|
||||||
background-color: rgba(102, 0, 255, 0.3);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#links_nav:hover{
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
<ul id="nav">
|
|
||||||
<li><a href="/"><img src="/assets/img/sakrecoerLOGO.png" width="125px" height="125px" title="SAKRECOER" /></a>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<li><a href="/sakrecoer-discography/">Discog</a></li>
|
|
||||||
<li><a href="/about/">About</a></li>
|
|
||||||
<li><a href="/links/">Links</a></li>
|
|
||||||
<li><a href="/blog/">Log</a>
|
|
||||||
<ul>
|
|
||||||
{% for post in site.categories.blog limit: 17 %}
|
|
||||||
|
|
||||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
<li><a href="/blog/">...Read Moar Articles</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="/music/">Music Index</a>
|
|
||||||
<ul>
|
|
||||||
{% for post in site.categories.music %}
|
|
||||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
{% for post in site.categories.music %}
|
|
||||||
{% if post.url == page.url %}
|
|
||||||
{% assign post_index0 = forloop.index0 %}
|
|
||||||
{% assign post_index1 = forloop.index %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% for post in site.categories.music %}
|
|
||||||
{% if post_index0 == forloop.index %}
|
|
||||||
{% assign next_post = post.url %}
|
|
||||||
{% endif %}
|
|
||||||
{% if post_index1 == forloop.index0 %}
|
|
||||||
{% assign prev_post = post.url %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
@ -1,133 +0,0 @@
|
||||||
/*! sakrecoer sheet */
|
|
||||||
@font-face {
|
|
||||||
font-family: futura;
|
|
||||||
src: url('{{ site.baseurl }}/assets/fonts/free_avantgarde.woff');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: futurabold;
|
|
||||||
src: url('{{ site.baseurl }}/assets/fonts/free_avantgardeBOLD.woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
html{
|
|
||||||
-webkit-transition:.5s background;
|
|
||||||
transition:.5s background;
|
|
||||||
font-family: futura,sans-serif;
|
|
||||||
}
|
|
||||||
body{
|
|
||||||
background:url({{ site.baseurl }}/assets/img/bg/frontpage.jpg) #fff no-repeat; background-size:cover; background-attachment: fixed;
|
|
||||||
margin:0;
|
|
||||||
font-family: futura,sans-serif;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4 {
|
|
||||||
font-family: futurabold; text-transform: uppercase;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-family: futura;
|
|
||||||
}
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-family: futurabold;
|
|
||||||
}
|
|
||||||
a:link,
|
|
||||||
a:visited,
|
|
||||||
a:hover,
|
|
||||||
a:active,
|
|
||||||
a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
-webkit-transition:.6s background;
|
|
||||||
transition:.6s background
|
|
||||||
}
|
|
||||||
a,
|
|
||||||
a:link,
|
|
||||||
a:visited {
|
|
||||||
color: #fff;
|
|
||||||
-webkit-transition-property: hover;
|
|
||||||
-webkit-transition: color 0.15s ease-in-out;
|
|
||||||
-moz-transition: color 0.15s linear 0s; /* firefox 4 */
|
|
||||||
-o-transition-property: color; /* opera 10.5 */
|
|
||||||
-o-transition-duration: 0.15s;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #0ff;
|
|
||||||
}
|
|
||||||
a:active {
|
|
||||||
color: #f00;
|
|
||||||
}
|
|
||||||
#navigation {
|
|
||||||
position: fixed; bottom: 0; left: 0; z-index: 1000;
|
|
||||||
width: 250px; height: 85%; padding: 10px;
|
|
||||||
background-color: rgba(0,0,0,.4);
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 0 100% 0 0;
|
|
||||||
opacity: .33;
|
|
||||||
-webkit-transition-property: hover;
|
|
||||||
-webkit-transition: opacity 0.7s ease-in-out;
|
|
||||||
-moz-transition: opacity 0.7s linear 0s; /* firefox 4 */
|
|
||||||
-o-transition-property: opacity; /* opera 10.5 */
|
|
||||||
-o-transition-duration: 0.7s;
|
|
||||||
}
|
|
||||||
#navigation:hover {
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* content */
|
|
||||||
#content{
|
|
||||||
position: absolute; top: 140px; left: 20px;
|
|
||||||
width: 66%; margin: 0 0 0 300px; padding: 10px;
|
|
||||||
box-shadow:2px 2px 10px #000;
|
|
||||||
background: rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
/* blog */
|
|
||||||
#blogcontent{
|
|
||||||
position: absolute; top: 25px;
|
|
||||||
left: 20px; width: 66%; margin: 400px 0 0 300px; padding: 15px;
|
|
||||||
box-shadow:2px 2px 10px #000;
|
|
||||||
background: url({{ site.baseurl }}/assets/img/bg/paper_background_lined.jpg) rgba(255, 255, 255, 0.25);
|
|
||||||
border-radius: 4px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
#blogcontent h1,
|
|
||||||
#blogcontent p{
|
|
||||||
color:#000;
|
|
||||||
}
|
|
||||||
#blogcontent h1{
|
|
||||||
position: relative;
|
|
||||||
margin: 8px 10px 0 0;
|
|
||||||
}
|
|
||||||
#blogcontent a {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
#blogcontent a:hover {
|
|
||||||
color: #0ff;
|
|
||||||
}
|
|
||||||
.date {
|
|
||||||
font-size: 18px;
|
|
||||||
height: 5px; padding: 0; margin: 0;
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
border: 1px solid #000;
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fullscreen Background image */
|
|
||||||
.image-fullscreen,
|
|
||||||
.image-fullscreen .mask {
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
position:fixed;
|
|
||||||
left:0px;
|
|
||||||
top:0px;
|
|
||||||
right:0px;
|
|
||||||
bottom:0px;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,267 +0,0 @@
|
||||||
/*! sakrecoer sheet */
|
|
||||||
@font-face {
|
|
||||||
font-family: futura;
|
|
||||||
src: url('free_avantgarde.woff');
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background: #fff url(/assets/img/bg/micro_logo.png);
|
|
||||||
font-size: 1em;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
padding: 40px 20px 40px 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4 {
|
|
||||||
font-family: futura;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
a:link,
|
|
||||||
a:visited,
|
|
||||||
a:hover,
|
|
||||||
a:active,
|
|
||||||
a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a,
|
|
||||||
a:link,
|
|
||||||
a:visited {
|
|
||||||
color: #fff;
|
|
||||||
-webkit-transition-property: hover;
|
|
||||||
-webkit-transition: color 0.15s ease-in-out;
|
|
||||||
-moz-transition: color 0.15s linear 0s; /* firefox 4 */
|
|
||||||
-o-transition-property: color; /* opera 10.5 */
|
|
||||||
-o-transition-duration: 0.15s;
|
|
||||||
text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
-1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px -1px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px 1px 4px rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #f00;
|
|
||||||
text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
-1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px -1px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px 1px 4px rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
a:active {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
#header {
|
|
||||||
text-align: left;
|
|
||||||
position: fixed;
|
|
||||||
top:20px;
|
|
||||||
left: 20px;
|
|
||||||
line-height: 24px;
|
|
||||||
z-index: 1000;
|
|
||||||
text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
-1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px -1px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px 1px 4px rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
#miniheader {
|
|
||||||
position: fixed;
|
|
||||||
top:20px;
|
|
||||||
left: 20px;
|
|
||||||
line-height: 24px;
|
|
||||||
z-index: 999999;
|
|
||||||
text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
-1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px -1px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px 1px 4px rgba(255, 0, 0, 0.5);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.tagline {
|
|
||||||
text-align: left;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-top: -5px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.minitagline {
|
|
||||||
text-align: left;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-top: -5px;
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
#main-menu-links {
|
|
||||||
font-family: BAnkrutt;
|
|
||||||
font-size: 48px;
|
|
||||||
margin-left: 5px;
|
|
||||||
line-height: 36px
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-menu-links a {
|
|
||||||
color: #fff;
|
|
||||||
float: left; /* LTR */
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#main-menu-links a:hover,
|
|
||||||
#main-menu-links a:focus {
|
|
||||||
color: #f00;
|
|
||||||
}
|
|
||||||
#main-menu-links a:active {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#minimain-menu-links {
|
|
||||||
font-family: BAnkrutt;
|
|
||||||
font-size: 24px;
|
|
||||||
margin-left: 5px;
|
|
||||||
line-height: 24px
|
|
||||||
}
|
|
||||||
|
|
||||||
#minimain-menu-links a {
|
|
||||||
color: #fff;
|
|
||||||
float: left; /* LTR */
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#minimain-menu-links a:hover,
|
|
||||||
#minimain-menu-links a:focus {
|
|
||||||
color: #f00;
|
|
||||||
}
|
|
||||||
#minimain-menu-links a:active {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content{
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
left: 20px;
|
|
||||||
width: 66%;
|
|
||||||
margin: 0 0 0 300px;
|
|
||||||
padding: 10px;
|
|
||||||
box-shadow:2px 2px 10px #000;
|
|
||||||
background: rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
#blogcontent{
|
|
||||||
line-height: 32px;
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
left: 20px;
|
|
||||||
width: 66%;
|
|
||||||
margin: 400px 0 0 300px;
|
|
||||||
padding: 17px;
|
|
||||||
box-shadow:2px 2px 10px #000;
|
|
||||||
background: url(/assets/img/bg/paper_background_lined.jpg) rgba(255, 255, 255, 0.25);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
#blogcontent h1{
|
|
||||||
margin: 46px 10px 0 0;
|
|
||||||
}
|
|
||||||
#About .about,
|
|
||||||
#Blog .blog,
|
|
||||||
#Discography .discog,
|
|
||||||
#Music .music,
|
|
||||||
#Video .video,
|
|
||||||
#Links .links,
|
|
||||||
#Pictures .pictures {
|
|
||||||
color: #f00;
|
|
||||||
text-shadow: 1px 0px 4px rgba(255, 255, 255, 0.25),
|
|
||||||
-1px 0px 4px rgba(255, 255, 255, 0.25),
|
|
||||||
0px -1px 4px rgba(255, 255, 255, 0.25),
|
|
||||||
0px 1px 4px rgba(255, 255, 255, 0.25);
|
|
||||||
}
|
|
||||||
.date {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
#footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom:20px;
|
|
||||||
right: 25px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: right;
|
|
||||||
z-index: 1000;
|
|
||||||
text-shadow: 1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
-1px 0px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px -1px 4px rgba(255, 0, 0, 0.5),
|
|
||||||
0px 1px 4px rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
/* Fullscreen Background image */
|
|
||||||
.image-fullscreen,
|
|
||||||
.image-fullscreen .mask {
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
position:fixed;
|
|
||||||
left:0px;
|
|
||||||
top:0px;
|
|
||||||
right:0px;
|
|
||||||
bottom:0px;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
#musictable{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.playercell {
|
|
||||||
padding-top: 15px;
|
|
||||||
width: 420px;
|
|
||||||
}
|
|
||||||
.lyricell {
|
|
||||||
width: 550px;
|
|
||||||
}
|
|
||||||
img.floatleft {
|
|
||||||
float: left;
|
|
||||||
margin: 8px;
|
|
||||||
}
|
|
||||||
/* Gallery */
|
|
||||||
|
|
||||||
.gallerytitle {
|
|
||||||
font-size: 4em;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
h1.gallerytitle:hover {
|
|
||||||
font-size: 4em;
|
|
||||||
opacity: 0.75;
|
|
||||||
color: #0ff;
|
|
||||||
}
|
|
||||||
.gindex-title {
|
|
||||||
font-size:2em;
|
|
||||||
color:#fff;
|
|
||||||
opacity:0.75;
|
|
||||||
text-shadow:0 0 10px #007572;
|
|
||||||
background:rgba(255, 0, 0, 0.5);
|
|
||||||
padding:5px;
|
|
||||||
height: 75px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.gindex-img {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.gindex-img:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
#Pictures {
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
/* Jukebox Pager */
|
|
||||||
#jukepager{
|
|
||||||
background: url(/assets/img/bg/micro_logo.png);
|
|
||||||
}
|
|
||||||
#jukepager div{
|
|
||||||
text-align: center;
|
|
||||||
padding: 300px;
|
|
||||||
}
|
|
||||||
#jukepager h1 {
|
|
||||||
font-size: 3em;
|
|
||||||
}
|
|
||||||
#headline h1 {
|
|
||||||
font-size: 8em;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 0 0 300px;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 0.7em;
|
|
||||||
letter-spacing: -0.1em;
|
|
||||||
}
|
|
||||||
#headline p {
|
|
||||||
font-size: 2em;
|
|
||||||
padding: 0 5px 0 300px;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 0.8em;
|
|
||||||
letter-spacing: -0.05em;
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
|
|
||||||
<button id="video_pause">Pause<br />Video</button>
|
|
||||||
|
|
||||||
|
|
||||||
<video autoplay loop poster="{{ site.baseurl }}/assets/img/bg/frontpage.jpg" id="bgvid">
|
|
||||||
<source src="{{ site.baseurl }}/assets/vi/0001-0076.webm" type="video/webm">
|
|
||||||
<source src="{{ site.baseurl }}/assets/vi/0001-0076.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
|
|
||||||
var vid = document.getElementsByTagName("video")[0];vid.playbackRate = 0.1;
|
|
||||||
|
|
||||||
var pauseButton = document.getElementById("video_pause");
|
|
||||||
|
|
||||||
function vidFade() {
|
|
||||||
|
|
||||||
vid.classList.add("stopfade");
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
vid.addEventListener('ended', function() {
|
|
||||||
|
|
||||||
// only functional if "loop" is removed
|
|
||||||
|
|
||||||
vid.pause();
|
|
||||||
|
|
||||||
// to capture IE10
|
|
||||||
|
|
||||||
vidFade();
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
pauseButton.addEventListener("click", function() {
|
|
||||||
|
|
||||||
vid.classList.toggle("stopfade");
|
|
||||||
|
|
||||||
if (vid.paused) {
|
|
||||||
|
|
||||||
vid.play();
|
|
||||||
|
|
||||||
pauseButton.innerHTML = "Pause Video";
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
vid.pause();
|
|
||||||
|
|
||||||
pauseButton.innerHTML = "Resume Video";
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -1,540 +0,0 @@
|
||||||
/*
|
|
||||||
* Curtain.js - Create an unique page transitioning system
|
|
||||||
* ---
|
|
||||||
* Version: 1.4.1
|
|
||||||
* Copyright 2011, Victor Coulon (http://victorcoulon.fr)
|
|
||||||
* Released under the MIT Licence
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function ( $, window, document, undefined ) {
|
|
||||||
|
|
||||||
var pluginName = 'curtain',
|
|
||||||
defaults = {
|
|
||||||
scrollSpeed: 400,
|
|
||||||
bodyHeight: 0,
|
|
||||||
linksArray: [],
|
|
||||||
mobile: false,
|
|
||||||
scrollButtons: {},
|
|
||||||
controls: null,
|
|
||||||
curtainLinks: '.curtain-links',
|
|
||||||
enableKeys: true,
|
|
||||||
easing: 'swing',
|
|
||||||
nextSlide: null,
|
|
||||||
prevSlide: null
|
|
||||||
};
|
|
||||||
|
|
||||||
// The actual plugin constructor
|
|
||||||
function Plugin( element, options ) {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
// Public attributes
|
|
||||||
this.element = element;
|
|
||||||
this.options = $.extend( {}, defaults, options) ;
|
|
||||||
|
|
||||||
this._defaults = defaults;
|
|
||||||
this._name = pluginName;
|
|
||||||
this._ignoreHashChange = false;
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
|
|
||||||
// Public Functions
|
|
||||||
this.insert = function(content){
|
|
||||||
if(Object.prototype.toString.call(content) !== '[object Object]') {
|
|
||||||
throw new TypeError('Content must be an object');
|
|
||||||
}
|
|
||||||
content.goTo = (content.goTo === true) ? true : false;
|
|
||||||
|
|
||||||
// append the content to list
|
|
||||||
var newEl = $(document.createElement('li')).attr('id', (content.htmlId) ? content.htmlId : null)
|
|
||||||
.attr('class', (content.htmlClass) ? content.htmlClass : null)
|
|
||||||
.html( (content.html) ? content.html : null );
|
|
||||||
$(self.element).append(newEl);
|
|
||||||
|
|
||||||
|
|
||||||
// Append Content after an element OR at the end
|
|
||||||
if(content.insertAfter && $(content.insertAfter).length) {
|
|
||||||
$(self.element).find(content.insertAfter).after(newEl);
|
|
||||||
} else {
|
|
||||||
$(self.element).append(newEl);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// When the element is ready
|
|
||||||
self.readyElement($(newEl), function(){
|
|
||||||
// re(init) cache elements
|
|
||||||
self.$element = $(self.element);
|
|
||||||
self.$li = $(self.element).find('>li');
|
|
||||||
|
|
||||||
// Mobile Fix
|
|
||||||
if(self.options.mobile){
|
|
||||||
self.$li.css({position:'relative'});
|
|
||||||
self.$element.find('.fixed').css({position:'absolute'});
|
|
||||||
}
|
|
||||||
|
|
||||||
self.setLinks();
|
|
||||||
|
|
||||||
// Set dimensions after loading images (or not)
|
|
||||||
if($(newEl).find('img').length){
|
|
||||||
$(newEl).find('img').load(function(){
|
|
||||||
self.setDimensions();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
self.setDimensions();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scroll to the new element
|
|
||||||
if(content.goTo === true){
|
|
||||||
var position = $(newEl).attr('data-position') || null;
|
|
||||||
self.scrollEl.animate({
|
|
||||||
scrollTop:position
|
|
||||||
}, self.options.scrollSpeed, self.options.easing);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
Plugin.prototype = {
|
|
||||||
init: function () {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
// Cache element
|
|
||||||
this.$element = $(this.element);
|
|
||||||
this.$li = $(this.element).find('>li');
|
|
||||||
|
|
||||||
|
|
||||||
$.Android = (navigator.userAgent.match(/Android/i));
|
|
||||||
$.iPhone = ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)));
|
|
||||||
$.iPad = ((navigator.userAgent.match(/iPad/i)));
|
|
||||||
$.iOs4 = (/OS [1-4]_[0-9_]+ like Mac OS X/i.test(navigator.userAgent));
|
|
||||||
|
|
||||||
|
|
||||||
if($.iPhone || $.iPad || $.Android){
|
|
||||||
this.options.mobile = true;
|
|
||||||
this.$li.css({position:'relative'});
|
|
||||||
this.$element.find('.fixed').css({position:'absolute'});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if(this.options.mobile){
|
|
||||||
this.scrollEl = this.$element;
|
|
||||||
} else if($.browser.mozilla || $.browser.msie) {
|
|
||||||
this.scrollEl = $('html');
|
|
||||||
} else {
|
|
||||||
this.scrollEl = $('body');
|
|
||||||
}
|
|
||||||
|
|
||||||
if(self.options.controls){
|
|
||||||
self.options.scrollButtons['up'] = $(self.options.controls).find('[href="#up"]');
|
|
||||||
self.options.scrollButtons['down'] = $(self.options.controls).find('[href="#down"]');
|
|
||||||
|
|
||||||
if(!$.iOs4 && ($.iPhone || $.iPad)){
|
|
||||||
self.$element.css({
|
|
||||||
position:'fixed',
|
|
||||||
top:0,
|
|
||||||
left:0,
|
|
||||||
right:0,
|
|
||||||
bottom:0,
|
|
||||||
'-webkit-overflow-scrolling':'touch',
|
|
||||||
overflow:'auto'
|
|
||||||
});
|
|
||||||
$(self.options.controls).css({position:'absolute'});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// We'll check if our images are loaded
|
|
||||||
var images = [],
|
|
||||||
imagesLoaded = 0,
|
|
||||||
loadAllImages = function loadAllImages(callback){
|
|
||||||
if(images.length === 0){
|
|
||||||
callback();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
var img = new Image();
|
|
||||||
$(img).attr('src',images[imagesLoaded]).load(function(){
|
|
||||||
imagesLoaded++;
|
|
||||||
if(imagesLoaded == images.length)
|
|
||||||
callback();
|
|
||||||
else
|
|
||||||
loadAllImages(callback);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
self.$element.find('img').each(function(i,el){
|
|
||||||
images.push(el.src);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// When all image is loaded
|
|
||||||
loadAllImages(function(){
|
|
||||||
self.setDimensions();
|
|
||||||
self.$li.eq(0).addClass('current');
|
|
||||||
|
|
||||||
// Cache
|
|
||||||
self.$current = self.$element.find('.current');
|
|
||||||
self.$fixed = self.$current.find('.fixed');
|
|
||||||
self.$step = self.$current.find('.step');
|
|
||||||
self.currentP = parseInt(self.$current.attr('data-position'), 10);
|
|
||||||
self.currentHeight = parseInt(self.$current.attr('data-height'), 10);
|
|
||||||
|
|
||||||
if(!self.options.mobile){
|
|
||||||
if(self.$li.eq(1).length)
|
|
||||||
self.$li.eq(1).nextAll().css({display:'none'});
|
|
||||||
}
|
|
||||||
|
|
||||||
self.setEvents();
|
|
||||||
self.setLinks();
|
|
||||||
self.isHashIsOnList(location.hash.substring(1));
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
// Events
|
|
||||||
scrollToPosition: function (direction){
|
|
||||||
var position = null,
|
|
||||||
self = this;
|
|
||||||
|
|
||||||
if($('html, body').is(':animated')){
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(direction === 'up' || direction == 'down'){
|
|
||||||
|
|
||||||
// Keyboard event
|
|
||||||
var $current = this.$element.find('.current'),
|
|
||||||
$next = (direction === 'up') ? $current.prev() : $current.next();
|
|
||||||
|
|
||||||
position = $next.attr('data-position') || null;
|
|
||||||
|
|
||||||
// Step in the current panel ?
|
|
||||||
if($current.find('.step').length){
|
|
||||||
if(!$current.find('.current-step').length)
|
|
||||||
$current.find('.step').eq(0).addClass('current-step');
|
|
||||||
var $nextStep = (direction === 'up') ? $current.find('.current-step').prev('.step') : $current.find('.current-step').next('.step');
|
|
||||||
if($nextStep.length) {
|
|
||||||
position = (this.options.mobile) ? $nextStep.position().top + parseInt($current.attr('data-position'), 10) : $nextStep.offset().top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(position){
|
|
||||||
self.scrollEl.animate({
|
|
||||||
scrollTop:position
|
|
||||||
}, this.options.scrollSpeed, this.options.easing);
|
|
||||||
}
|
|
||||||
|
|
||||||
} else if(direction === 'top'){
|
|
||||||
self.scrollEl.animate({
|
|
||||||
scrollTop:0
|
|
||||||
}, self.options.scrollSpeed, self.options.easing);
|
|
||||||
} else if(direction === 'bottom'){
|
|
||||||
self.scrollEl.animate({
|
|
||||||
scrollTop:self.options.bodyHeight
|
|
||||||
}, self.options.scrollSpeed, self.options.easing);
|
|
||||||
} else {
|
|
||||||
position = $("#"+direction).attr('data-position') || null;
|
|
||||||
if(position){
|
|
||||||
self.scrollEl.animate({
|
|
||||||
scrollTop:position
|
|
||||||
}, this.options.scrollSpeed, this.options.easing);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
scrollEvent: function() {
|
|
||||||
var self = this,
|
|
||||||
docTop = $(document).scrollTop(),
|
|
||||||
windowHeight = $(window).height();
|
|
||||||
|
|
||||||
|
|
||||||
if(docTop < self.currentP && self.$current.index() > 0){
|
|
||||||
if (self.options.prevSlide) {
|
|
||||||
self.options.prevSlide();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Scroll top
|
|
||||||
self._ignoreHashChange = true;
|
|
||||||
if(self.$current.prev().attr('id'))
|
|
||||||
self.setHash(self.$current.prev().attr('id'));
|
|
||||||
|
|
||||||
|
|
||||||
self.$current.removeClass('current').css({marginTop: 0})
|
|
||||||
.nextAll().css({display:'none'}).end()
|
|
||||||
.prev().addClass('current').css({display:'block'});
|
|
||||||
|
|
||||||
// Cache
|
|
||||||
self.$current = self.$element.find('.current');
|
|
||||||
self.$fixed = self.$current.find('.fixed');
|
|
||||||
self.$step = self.$current.find('.step');
|
|
||||||
self.currentP = parseInt(self.$current.attr('data-position'), 10);
|
|
||||||
self.currentHeight = parseInt(self.$current.attr('data-height'), 10);
|
|
||||||
|
|
||||||
} else if(docTop < (self.currentP + self.$current.height())){
|
|
||||||
// Animate the current pannel during the scroll
|
|
||||||
var position = -(docTop-self.currentP);
|
|
||||||
self.$current.css({marginTop:position});
|
|
||||||
|
|
||||||
// If there is a fixed element in the current panel
|
|
||||||
if(self.$fixed.length){
|
|
||||||
var dataTop = parseInt(self.$fixed.attr('data-top'), 10);
|
|
||||||
|
|
||||||
if((docTop-self.currentP+windowHeight) >= self.currentHeight && self.$fixed.css('position') === 'fixed'){
|
|
||||||
|
|
||||||
self.$fixed.css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: Math.abs(docTop-self.currentP + dataTop)
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
} else if((docTop-self.currentP+windowHeight) <= self.currentHeight && self.$fixed.css('position') === 'absolute'){
|
|
||||||
self.$fixed.css({
|
|
||||||
position: 'fixed',
|
|
||||||
top: dataTop
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// If there is a step element in the current panel
|
|
||||||
if(self.$step.length){
|
|
||||||
$.each(self.$step, function(i,el){
|
|
||||||
if($(el).offset().top <= docTop+5 && ($(el).offset().top + $(el).outerHeight()) >= docTop+5){
|
|
||||||
if(!$(el).hasClass('current-step')){
|
|
||||||
self.$step.removeClass('current-step');
|
|
||||||
$(el).addClass('current-step');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
if (self.options.nextSlide) {
|
|
||||||
self.options.nextSlide();
|
|
||||||
}
|
|
||||||
// Scroll bottom
|
|
||||||
self._ignoreHashChange = true;
|
|
||||||
if(self.$current.next().attr('id'))
|
|
||||||
self.setHash(self.$current.next().attr('id'));
|
|
||||||
|
|
||||||
self.$current.removeClass('current')
|
|
||||||
.css({display:'none'})
|
|
||||||
.next().addClass('current').nextAll().css({display:'block'});
|
|
||||||
|
|
||||||
// Cache
|
|
||||||
self.$current = self.$element.find('.current');
|
|
||||||
self.$fixed = self.$current.find('.fixed');
|
|
||||||
self.$step = self.$current.find('.step');
|
|
||||||
self.currentP = parseInt(self.$current.attr('data-position'), 10);
|
|
||||||
self.currentHeight = parseInt(self.$current.attr('data-height'), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
scrollMobileEvent: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
var docTop = self.$element.scrollTop(),
|
|
||||||
$current = self.$element.find('.current'),
|
|
||||||
$step = $current.find('.step'),
|
|
||||||
currentP = parseInt($current.attr('data-position'), 10),
|
|
||||||
currentHeight = parseInt($current.attr('data-height'), 10),
|
|
||||||
windowHeight = $(window).height();
|
|
||||||
|
|
||||||
if(docTop+10 < currentP && $current.index() > 0){
|
|
||||||
$current.removeClass('current').prev().addClass('current');
|
|
||||||
} else if(docTop+10 < (currentP + $current.height())){
|
|
||||||
|
|
||||||
// If there is a step element in the current panel
|
|
||||||
if($step.length){
|
|
||||||
$.each($step, function(i,el){
|
|
||||||
if(($(el).position().top+currentP) <= docTop && (($(el).position().top+currentP) + $(el).outerHeight()) >= docTop){
|
|
||||||
if(!$(el).hasClass('current-step')){
|
|
||||||
$step.removeClass('current-step');
|
|
||||||
$(el).addClass('current-step');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$current.removeClass('current').next().addClass('current');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
// Setters
|
|
||||||
setDimensions: function(){
|
|
||||||
var windowHeight = $(window).height(),
|
|
||||||
levelHeight = 0,
|
|
||||||
cover = false,
|
|
||||||
height = null;
|
|
||||||
|
|
||||||
this.$li.each(function(index) {
|
|
||||||
var $self = $(this);
|
|
||||||
cover = $self.hasClass('cover');
|
|
||||||
|
|
||||||
if(cover){
|
|
||||||
$self.css({height: windowHeight, zIndex: 999-index})
|
|
||||||
.attr('data-height',windowHeight)
|
|
||||||
.attr('data-position',levelHeight);
|
|
||||||
levelHeight += windowHeight;
|
|
||||||
} else{
|
|
||||||
height = ($self.outerHeight() <= windowHeight) ? windowHeight : $self.outerHeight();
|
|
||||||
$self.css({minHeight: height, zIndex: 999-index})
|
|
||||||
.attr('data-height',height)
|
|
||||||
.attr('data-position',levelHeight);
|
|
||||||
levelHeight += height;
|
|
||||||
}
|
|
||||||
|
|
||||||
if($self.find('.fixed').length){
|
|
||||||
var top = $self.find('.fixed').css('top');
|
|
||||||
$self.find('.fixed').attr('data-top', top);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if(!this.options.mobile)
|
|
||||||
this.setBodyHeight();
|
|
||||||
},
|
|
||||||
setEvents: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
$(window).on('resize', function(){
|
|
||||||
self.setDimensions();
|
|
||||||
});
|
|
||||||
|
|
||||||
if(self.options.mobile) {
|
|
||||||
self.$element.on('scroll', function(){
|
|
||||||
self.scrollMobileEvent();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$(window).on('scroll', function(){
|
|
||||||
self.scrollEvent();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if(self.options.enableKeys) {
|
|
||||||
$(document).on('keydown', function(e){
|
|
||||||
if(e.keyCode === 38 || e.keyCode === 37) {
|
|
||||||
self.scrollToPosition('up');
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if(e.keyCode === 40 || e.keyCode === 39){
|
|
||||||
self.scrollToPosition('down');
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
// Home button
|
|
||||||
if(e.keyCode === 36){
|
|
||||||
self.scrollToPosition('top');
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
// End button
|
|
||||||
if(e.keyCode === 35){
|
|
||||||
self.scrollToPosition('bottom');
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if(self.options.scrollButtons){
|
|
||||||
if(self.options.scrollButtons.up){
|
|
||||||
self.options.scrollButtons.up.on('click', function(e){
|
|
||||||
e.preventDefault();
|
|
||||||
self.scrollToPosition('up');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if(self.options.scrollButtons.down){
|
|
||||||
self.options.scrollButtons.down.on('click', function(e){
|
|
||||||
e.preventDefault();
|
|
||||||
self.scrollToPosition('down');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(self.options.curtainLinks){
|
|
||||||
$(self.options.curtainLinks).on('click', function(e){
|
|
||||||
e.preventDefault();
|
|
||||||
var href = $(this).attr('href');
|
|
||||||
|
|
||||||
if(!self.isHashIsOnList(href.substring(1)) && position)
|
|
||||||
return false;
|
|
||||||
|
|
||||||
var position = $(href).attr('data-position') || null;
|
|
||||||
if(position){
|
|
||||||
self.scrollEl.animate({
|
|
||||||
scrollTop:position
|
|
||||||
}, self.options.scrollSpeed, self.options.easing);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if ("onhashchange" in window) {
|
|
||||||
window.addEventListener("hashchange", function(){
|
|
||||||
if(self._ignoreHashChange === false){
|
|
||||||
self.isHashIsOnList(location.hash.substring(1));
|
|
||||||
}
|
|
||||||
self._ignoreHashChange = false;
|
|
||||||
}, false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setBodyHeight: function(){
|
|
||||||
var h = 0;
|
|
||||||
this.$li.each(function() {
|
|
||||||
h += $(this).height();
|
|
||||||
});
|
|
||||||
this.options.bodyHeight = h;
|
|
||||||
$('body').height(h);
|
|
||||||
},
|
|
||||||
setLinks: function(){
|
|
||||||
var self = this;
|
|
||||||
this.$li.each(function() {
|
|
||||||
var id = $(this).attr('id') || 0;
|
|
||||||
self.options.linksArray.push(id);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setHash: function(hash){
|
|
||||||
if(history.pushState) {
|
|
||||||
history.pushState(null, null, '#'+hash);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
location.hash = hash;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Utils
|
|
||||||
isHashIsOnList: function(hash){
|
|
||||||
var self = this;
|
|
||||||
$.each(self.options.linksArray, function(i,val){
|
|
||||||
if(val === hash){
|
|
||||||
self.scrollToPosition(hash);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
readyElement: function(el,callback){
|
|
||||||
var interval = setInterval(function(){
|
|
||||||
if(el.length){
|
|
||||||
callback(el.length);
|
|
||||||
clearInterval(interval);
|
|
||||||
}
|
|
||||||
},60);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$.fn[pluginName] = function ( options ) {
|
|
||||||
return this.each(function () {
|
|
||||||
if (!$.data(this, 'plugin_' + pluginName)) {
|
|
||||||
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
2
about/js/jquery-1.8.2.min.js
vendored
2
about/js/jquery-1.8.2.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,519 +0,0 @@
|
||||||
/*
|
|
||||||
scrollorama - The jQuery plugin for doing cool scrolly stuff
|
|
||||||
by John Polacek (@johnpolacek)
|
|
||||||
|
|
||||||
Dual licensed under MIT and GPL.
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
$.scrollorama = function(options) {
|
|
||||||
var scrollorama = this,
|
|
||||||
blocks = [],
|
|
||||||
browserPrefix = '',
|
|
||||||
onBlockChange = function() {},
|
|
||||||
latestKnownScrollY = 0,
|
|
||||||
ticking = false,
|
|
||||||
requestAnimFrame = window.requestAnimationFrame ||
|
|
||||||
window.webkitRequestAnimationFrame ||
|
|
||||||
window.mozRequestAnimationFrame ||
|
|
||||||
window.oRequestAnimationFrame ||
|
|
||||||
window.msRequestAnimationFrame ||
|
|
||||||
function( callback ){
|
|
||||||
window.setTimeout(callback, 1000 / 60);
|
|
||||||
},
|
|
||||||
defaults = {offset:0, enablePin: true};
|
|
||||||
|
|
||||||
scrollorama.settings = $.extend({}, defaults, options);
|
|
||||||
scrollorama.blockIndex = 0;
|
|
||||||
|
|
||||||
if (options.blocks === undefined) { alert('ERROR: Must assign blocks class selector to scrollorama plugin'); }
|
|
||||||
|
|
||||||
// PRIVATE FUNCTIONS
|
|
||||||
function init() {
|
|
||||||
var i, block, didScroll, marginTop = false;
|
|
||||||
if (typeof scrollorama.settings.blocks === 'string') { scrollorama.settings.blocks = $(scrollorama.settings.blocks); }
|
|
||||||
|
|
||||||
// set browser prefix
|
|
||||||
if ($.browser.mozilla) { browserPrefix = '-moz-'; }
|
|
||||||
if ($.browser.webkit) { browserPrefix = '-webkit-'; }
|
|
||||||
if ($.browser.opera) { browserPrefix = '-o-'; }
|
|
||||||
if ($.browser.msie) { browserPrefix = '-ms-'; }
|
|
||||||
|
|
||||||
// create blocks array to contain animation props
|
|
||||||
$('body').css('position','relative');
|
|
||||||
for (i=0; i<scrollorama.settings.blocks.length; i++) {
|
|
||||||
block = scrollorama.settings.blocks.eq(i);
|
|
||||||
marginTop = block.css('margin-top');
|
|
||||||
blocks.push({
|
|
||||||
block: block,
|
|
||||||
top: block.offset().top - (!Boolean(marginTop) ? parseInt(marginTop, 10) : 0),
|
|
||||||
pin: 0,
|
|
||||||
animations:[]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// convert block elements to absolute position
|
|
||||||
if (scrollorama.settings.enablePin.toString() === 'true') {
|
|
||||||
for (i=0; i<blocks.length; i++) {
|
|
||||||
blocks[i].block
|
|
||||||
.css('position', 'absolute')
|
|
||||||
.css('top', blocks[i].top);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('body').prepend('<div id="scroll-wrap"></div>');
|
|
||||||
|
|
||||||
latestKnownScrollY = 0;
|
|
||||||
ticking = false;
|
|
||||||
$(window).on( 'scroll.scrollorama', onScroll );
|
|
||||||
}
|
|
||||||
|
|
||||||
function onScroll() {
|
|
||||||
latestKnownScrollY = window.scrollY;
|
|
||||||
requestTick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function requestTick() {
|
|
||||||
if(!ticking) {
|
|
||||||
requestAnimFrame(function(){
|
|
||||||
onScrollorama();
|
|
||||||
update();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
ticking = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
// reset the tick so we can
|
|
||||||
// capture the next onScroll
|
|
||||||
ticking = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onScrollorama() {
|
|
||||||
var scrollTop = $(window).scrollTop(),
|
|
||||||
currBlockIndex = getCurrBlockIndex(scrollTop),
|
|
||||||
i, j, anim, startAnimPos, endAnimPos, animPercent, animVal;
|
|
||||||
|
|
||||||
// update all animations
|
|
||||||
for (i=0; i<blocks.length; i++) {
|
|
||||||
|
|
||||||
// go through the animations for each block
|
|
||||||
if (blocks[i].animations.length) {
|
|
||||||
for (j=0; j<blocks[i].animations.length; j++) {
|
|
||||||
anim = blocks[i].animations[j];
|
|
||||||
|
|
||||||
// if above current block, settings should be at start value
|
|
||||||
if (i > currBlockIndex) {
|
|
||||||
if (currBlockIndex !== i-1 && anim.baseline !== 'bottom') {
|
|
||||||
setProperty(anim.element, anim.property, anim.startVal);
|
|
||||||
}
|
|
||||||
if (blocks[i].pin) {
|
|
||||||
blocks[i].block
|
|
||||||
.css('position', 'absolute')
|
|
||||||
.css('top', blocks[i].top);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if below current block, settings should be at end value
|
|
||||||
// unless on an element that gets animated when it hits the bottom of the viewport
|
|
||||||
else if (i < currBlockIndex) {
|
|
||||||
setProperty(anim.element, anim.property, anim.endVal);
|
|
||||||
if (blocks[i].pin) {
|
|
||||||
blocks[i].block
|
|
||||||
.css('position', 'absolute')
|
|
||||||
.css('top', (blocks[i].top + blocks[i].pin));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// otherwise, set values per scroll position
|
|
||||||
if (i === currBlockIndex || (currBlockIndex === i-1 && anim.baseline === 'bottom')) {
|
|
||||||
// if block gets pinned, set position fixed
|
|
||||||
if (blocks[i].pin && currBlockIndex === i) {
|
|
||||||
blocks[i].block
|
|
||||||
.css('position', 'fixed')
|
|
||||||
.css('top', 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// set start and end animation positions
|
|
||||||
startAnimPos = blocks[i].top + anim.delay;
|
|
||||||
if (anim.baseline === 'bottom') { startAnimPos -= $(window).height(); }
|
|
||||||
endAnimPos = startAnimPos + anim.duration;
|
|
||||||
|
|
||||||
// if scroll is before start of animation, set to start value
|
|
||||||
if (scrollTop < startAnimPos) {
|
|
||||||
setProperty(anim.element, anim.property, anim.startVal);
|
|
||||||
}
|
|
||||||
|
|
||||||
// if scroll is after end of animation, set to end value
|
|
||||||
else if (scrollTop > endAnimPos) {
|
|
||||||
setProperty(anim.element, anim.property, anim.endVal);
|
|
||||||
if (blocks[i].pin) {
|
|
||||||
blocks[i].block
|
|
||||||
.css('position', 'absolute')
|
|
||||||
.css('top', (blocks[i].top + blocks[i].pin));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// otherwise, set value based on scroll
|
|
||||||
else {
|
|
||||||
// calculate percent to animate
|
|
||||||
animPercent = (scrollTop - startAnimPos) / anim.duration;
|
|
||||||
// account for easing if there is any
|
|
||||||
if ( anim.easing && $.isFunction( $.easing[anim.easing] ) ) {
|
|
||||||
animPercent = $.easing[anim.easing]( animPercent, animPercent*1000, 0, 1, 1000 );
|
|
||||||
}
|
|
||||||
// then multiply the percent by the value range and calculate the new value
|
|
||||||
animVal = anim.startVal + (animPercent * (anim.endVal - anim.startVal));
|
|
||||||
setProperty(anim.element, anim.property, animVal);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// update blockIndex and trigger event if changed
|
|
||||||
if (scrollorama.blockIndex !== currBlockIndex) {
|
|
||||||
scrollorama.blockIndex = currBlockIndex;
|
|
||||||
onBlockChange();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCurrBlockIndex(scrollTop) {
|
|
||||||
var currBlockIndex = 0, i;
|
|
||||||
for (i=0; i<blocks.length; i++) {
|
|
||||||
// check if block is in view
|
|
||||||
if (blocks[i].top <= scrollTop - scrollorama.settings.offset) { currBlockIndex = i; }
|
|
||||||
}
|
|
||||||
return currBlockIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setProperty(target, prop, val) {
|
|
||||||
var scaleCSS, currentPosition;
|
|
||||||
if (prop === 'rotate' || prop === 'zoom' || prop === 'scale') {
|
|
||||||
if (prop === 'rotate') {
|
|
||||||
target.css(browserPrefix+'transform', 'rotate('+val+'deg)');
|
|
||||||
} else if (prop === 'zoom' || prop === 'scale') {
|
|
||||||
scaleCSS = 'scale('+val+')';
|
|
||||||
if (browserPrefix !== '-ms-') {
|
|
||||||
target.css(browserPrefix+'transform', scaleCSS);
|
|
||||||
} else {
|
|
||||||
target.css('zoom', scaleCSS);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(prop === 'background-position-x' || prop === 'background-position-y' ) {
|
|
||||||
currentPosition = target.css('background-position').split(' ');
|
|
||||||
if(prop === 'background-position-x') {
|
|
||||||
target.css('background-position',val+'px '+currentPosition[1]);
|
|
||||||
}
|
|
||||||
if(prop === 'background-position-y') {
|
|
||||||
target.css('background-position', currentPosition[0]+' '+val+'px');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(prop === 'text-shadow' ) {
|
|
||||||
target.css(prop,'0px 0px '+val+'px #ffffff');
|
|
||||||
} else {
|
|
||||||
target.css(prop, val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// PUBLIC FUNCTIONS
|
|
||||||
scrollorama.animate = function(target) {
|
|
||||||
var targetIndex,
|
|
||||||
targetBlock,
|
|
||||||
anim,
|
|
||||||
offset,
|
|
||||||
i, j;
|
|
||||||
/*
|
|
||||||
target = animation target
|
|
||||||
arguments = array of animation parameters
|
|
||||||
anim = object that contains all animation params (created from arguments)
|
|
||||||
offset = positioning helper for pinning
|
|
||||||
|
|
||||||
animation parameters:
|
|
||||||
delay = amount of scrolling (in pixels) before animation starts
|
|
||||||
duration = amount of scrolling (in pixels) over which the animation occurs
|
|
||||||
property = css property being animated
|
|
||||||
start = start value of the property
|
|
||||||
end = end value of the property
|
|
||||||
pin = pin block during animation duration (applies to all animations within block)
|
|
||||||
baseline = top (default, when block reaches top of viewport) or bottom (when block first comies into view)
|
|
||||||
easing = just like jquery's easing functions
|
|
||||||
*/
|
|
||||||
|
|
||||||
// if string, convert to DOM object
|
|
||||||
if (typeof target === 'string') { target = $(target); }
|
|
||||||
|
|
||||||
// find block of target
|
|
||||||
for (i=0; i<blocks.length; i++) {
|
|
||||||
if (blocks[i].block.has(target).length) {
|
|
||||||
targetBlock = blocks[i];
|
|
||||||
targetIndex = i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// add each animation to the blocks animations array from function arguments
|
|
||||||
for (i=1; i<arguments.length; i++) {
|
|
||||||
|
|
||||||
anim = arguments[i];
|
|
||||||
|
|
||||||
// for top/left/right/bottom, set relative positioning if static
|
|
||||||
if (anim.property === 'top' || anim.property === 'left' || anim.property === 'bottom' || anim.property === 'right' ) {
|
|
||||||
if (target.css('position') === 'static') { target.css('position','relative'); }
|
|
||||||
// set anim.start, anim.end defaults
|
|
||||||
cssValue = parseInt(target.css(anim.property),10);
|
|
||||||
if (anim.start === undefined) {
|
|
||||||
anim.start = isNaN(cssValue) ? 0 : cssValue;
|
|
||||||
} else if (anim.end === undefined) {
|
|
||||||
anim.end = isNaN(cssValue) ? 0 : cssValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// set anim.start/anim.end defaults for rotate, zoom/scale, letter-spacing
|
|
||||||
if (anim.property === 'rotate') {
|
|
||||||
if (anim.start === undefined) { anim.start = 0; }
|
|
||||||
if (anim.end === undefined) { anim.end = 0; }
|
|
||||||
} else if (anim.property === 'zoom' || anim.property === 'scale' ) {
|
|
||||||
if (anim.start === undefined) { anim.start = 1; }
|
|
||||||
if (anim.end === undefined) { anim.end = 1; }
|
|
||||||
} else if (anim.property === 'letter-spacing' && target.css(anim.property)) {
|
|
||||||
if (anim.start === undefined) { anim.start = 1; }
|
|
||||||
if (anim.end === undefined) { anim.end = 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
if (anim.baseline === undefined) {
|
|
||||||
if (anim.pin || targetBlock.pin || targetIndex === 0) {
|
|
||||||
anim.baseline = 'top';
|
|
||||||
} else {
|
|
||||||
anim.baseline = 'bottom';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (anim.delay === undefined) { anim.delay = 0; }
|
|
||||||
|
|
||||||
targetBlock.animations.push({
|
|
||||||
element: target,
|
|
||||||
delay: anim.delay,
|
|
||||||
duration: anim.duration,
|
|
||||||
property: anim.property,
|
|
||||||
startVal: anim.start !== undefined ? anim.start : parseInt(target.css(anim.property),10), // if undefined, use current css value
|
|
||||||
endVal: anim.end !== undefined ? anim.end : parseInt(target.css(anim.property),10), // if undefined, use current css value
|
|
||||||
baseline: anim.baseline !== undefined ? anim.baseline : 'bottom',
|
|
||||||
easing: anim.easing
|
|
||||||
});
|
|
||||||
|
|
||||||
if (anim.pin) {
|
|
||||||
if (targetBlock.pin < anim.duration + anim.delay) {
|
|
||||||
offset = anim.duration + anim.delay - targetBlock.pin;
|
|
||||||
targetBlock.pin += offset;
|
|
||||||
|
|
||||||
// adjust positions of blocks below target block
|
|
||||||
for (j=targetIndex+1; j<blocks.length; j++) {
|
|
||||||
blocks[j].top += offset;
|
|
||||||
blocks[j].block.css('top', blocks[j].top);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onScrollorama();
|
|
||||||
};
|
|
||||||
|
|
||||||
// function for passing blockChange event callback
|
|
||||||
scrollorama.onBlockChange = function(f) {
|
|
||||||
onBlockChange = f;
|
|
||||||
};
|
|
||||||
|
|
||||||
// function for getting an array of scrollpoints
|
|
||||||
// (top of each animation block and animation element scroll start point)
|
|
||||||
scrollorama.getScrollpoints = function() {
|
|
||||||
var scrollpoints = [],i,j,anim;
|
|
||||||
for (i=0; i<blocks.length; i++) {
|
|
||||||
scrollpoints.push(blocks[i].top);
|
|
||||||
// go through the animations for each block
|
|
||||||
if (blocks[i].animations.length && blocks[i].pin > 0) {
|
|
||||||
for (j=0; j<blocks[i].animations.length; j++) {
|
|
||||||
anim = blocks[i].animations[j];
|
|
||||||
scrollpoints.push(blocks[i].top + anim.delay + anim.duration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// make sure scrollpoints are in numeric order
|
|
||||||
scrollpoints.sort(function(a,b) {return a - b;});
|
|
||||||
return scrollpoints;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Remove scrollorama
|
|
||||||
scrollorama.destroy = function () {
|
|
||||||
// Remove animations
|
|
||||||
for (i=0; i<blocks.length; i++) {
|
|
||||||
// Remove CSS rules
|
|
||||||
blocks[i].block.css({
|
|
||||||
top: '',
|
|
||||||
position: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove scrolloroma-specific attributes
|
|
||||||
delete blocks[i].animations;
|
|
||||||
delete blocks[i].top;
|
|
||||||
delete blocks[i].pin;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Unbind the window scroll event
|
|
||||||
$(window).off('scroll.scrollorama');
|
|
||||||
$('#scroll-wrap').remove();
|
|
||||||
|
|
||||||
// Remove the scrolloroma object
|
|
||||||
delete scrollorama;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// INIT
|
|
||||||
init();
|
|
||||||
|
|
||||||
return scrollorama;
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
// Easing functions from jQuery UI
|
|
||||||
//
|
|
||||||
$.extend($.easing, {
|
|
||||||
def: 'easeOutQuad',
|
|
||||||
swing: function (x, t, b, c, d) {
|
|
||||||
//alert($.easing.default);
|
|
||||||
return $.easing[$.easing.def](x, t, b, c, d);
|
|
||||||
},
|
|
||||||
easeInQuad: function (x, t, b, c, d) {
|
|
||||||
return c*(t/=d)*t + b;
|
|
||||||
},
|
|
||||||
easeOutQuad: function (x, t, b, c, d) {
|
|
||||||
return -c *(t/=d)*(t-2) + b;
|
|
||||||
},
|
|
||||||
easeInOutQuad: function (x, t, b, c, d) {
|
|
||||||
if ((t/=d/2) < 1) { return c/2*t*t + b; }
|
|
||||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
|
||||||
},
|
|
||||||
easeInCubic: function (x, t, b, c, d) {
|
|
||||||
return c*(t/=d)*t*t + b;
|
|
||||||
},
|
|
||||||
easeOutCubic: function (x, t, b, c, d) {
|
|
||||||
return c*((t=t/d-1)*t*t + 1) + b;
|
|
||||||
},
|
|
||||||
easeInOutCubic: function (x, t, b, c, d) {
|
|
||||||
if ((t/=d/2) < 1) { return c/2*t*t*t + b; }
|
|
||||||
return c/2*((t-=2)*t*t + 2) + b;
|
|
||||||
},
|
|
||||||
easeInQuart: function (x, t, b, c, d) {
|
|
||||||
return c*(t/=d)*t*t*t + b;
|
|
||||||
},
|
|
||||||
easeOutQuart: function (x, t, b, c, d) {
|
|
||||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
|
||||||
},
|
|
||||||
easeInOutQuart: function (x, t, b, c, d) {
|
|
||||||
if ((t/=d/2) < 1) { return c/2*t*t*t*t + b; }
|
|
||||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
|
||||||
},
|
|
||||||
easeInQuint: function (x, t, b, c, d) {
|
|
||||||
return c*(t/=d)*t*t*t*t + b;
|
|
||||||
},
|
|
||||||
easeOutQuint: function (x, t, b, c, d) {
|
|
||||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
|
||||||
},
|
|
||||||
easeInOutQuint: function (x, t, b, c, d) {
|
|
||||||
if ((t/=d/2) < 1) { return c/2*t*t*t*t*t + b; }
|
|
||||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
|
||||||
},
|
|
||||||
easeInSine: function (x, t, b, c, d) {
|
|
||||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
|
||||||
},
|
|
||||||
easeOutSine: function (x, t, b, c, d) {
|
|
||||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
|
||||||
},
|
|
||||||
easeInOutSine: function (x, t, b, c, d) {
|
|
||||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
|
||||||
},
|
|
||||||
easeInExpo: function (x, t, b, c, d) {
|
|
||||||
return (t===0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
|
||||||
},
|
|
||||||
easeOutExpo: function (x, t, b, c, d) {
|
|
||||||
return (t===d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
|
||||||
},
|
|
||||||
easeInOutExpo: function (x, t, b, c, d) {
|
|
||||||
if (t===0) { return b; }
|
|
||||||
if (t===d) { return b+c; }
|
|
||||||
if ((t/=d/2) < 1) { return c/2 * Math.pow(2, 10 * (t - 1)) + b; }
|
|
||||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
|
||||||
},
|
|
||||||
easeInCirc: function (x, t, b, c, d) {
|
|
||||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
|
||||||
},
|
|
||||||
easeOutCirc: function (x, t, b, c, d) {
|
|
||||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
|
||||||
},
|
|
||||||
easeInOutCirc: function (x, t, b, c, d) {
|
|
||||||
if ((t/=d/2) < 1) { return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; }
|
|
||||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
|
||||||
},
|
|
||||||
easeInElastic: function (x, t, b, c, d) {
|
|
||||||
var s=1.70158,p=0,a=c;
|
|
||||||
if (t===0) { return b; }
|
|
||||||
if ((t/=d)===1) { return b+c; }
|
|
||||||
if (!p) { p=d*0.3; }
|
|
||||||
if (a < Math.abs(c)) { a=c; s=p/4; }
|
|
||||||
else{ s = p/(2*Math.PI) * Math.asin (c/a); }
|
|
||||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
|
||||||
},
|
|
||||||
easeOutElastic: function (x, t, b, c, d) {
|
|
||||||
var s=1.70158,p=0,a=c;
|
|
||||||
if (t===0) { return b; }
|
|
||||||
if ((t/=d)===1) { return b+c; }
|
|
||||||
if (!p) { p=d*0.3; }
|
|
||||||
if (a < Math.abs(c)) { a=c; s=p/4; }
|
|
||||||
else { s = p/(2*Math.PI) * Math.asin (c/a); }
|
|
||||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
|
||||||
},
|
|
||||||
easeInOutElastic: function (x, t, b, c, d) {
|
|
||||||
var s=1.70158,p=0,a=c;
|
|
||||||
if (t===0) { return b; }
|
|
||||||
if ((t/=d/2)===2) { return b+c; }
|
|
||||||
if (!p) { p=d*(0.3*1.5); }
|
|
||||||
if (a < Math.abs(c)) { a=c; s=p/4; }
|
|
||||||
else { s = p/(2*Math.PI) * Math.asin (c/a); }
|
|
||||||
if (t < 1) { return -0.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }
|
|
||||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
|
|
||||||
},
|
|
||||||
easeInBack: function (x, t, b, c, d, s) {
|
|
||||||
if (s === undefined) { s = 1.70158; }
|
|
||||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
|
||||||
},
|
|
||||||
easeOutBack: function (x, t, b, c, d, s) {
|
|
||||||
if (s === undefined) { s = 1.70158; }
|
|
||||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
|
||||||
},
|
|
||||||
easeInOutBack: function (x, t, b, c, d, s) {
|
|
||||||
if (s === undefined) { s = 1.70158; }
|
|
||||||
if ((t/=d/2) < 1) { return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; }
|
|
||||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
|
||||||
},
|
|
||||||
easeInBounce: function (x, t, b, c, d) {
|
|
||||||
return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
|
||||||
},
|
|
||||||
easeOutBounce: function (x, t, b, c, d) {
|
|
||||||
if ((t/=d) < (1/2.75)) {
|
|
||||||
return c*(7.5625*t*t) + b;
|
|
||||||
} else if (t < (2/2.75)) {
|
|
||||||
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
|
|
||||||
} else if (t < (2.5/2.75)) {
|
|
||||||
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
|
|
||||||
} else {
|
|
||||||
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
easeInOutBounce: function (x, t, b, c, d) {
|
|
||||||
if (t < d/2) { return $.easing.easeInBounce (x, t*2, 0, c, d) * 0.5 + b; }
|
|
||||||
return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
})(jQuery);
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
|
|
||||||
$('.curtains>li').css('position', 'fixed');
|
|
||||||
|
|
||||||
$('.curtains').curtain();
|
|
||||||
|
|
||||||
var scrollorama = $.scrollorama({
|
|
||||||
blocks:'.curtains'
|
|
||||||
});
|
|
||||||
|
|
||||||
scrollorama.animate('#intro h1',{
|
|
||||||
duration:200, property:'left', end:-860
|
|
||||||
});
|
|
||||||
|
|
||||||
scrollorama.animate('#reset-photo',{
|
|
||||||
delay:900, duration:993, property:'top', start:300, end:-300
|
|
||||||
});
|
|
||||||
|
|
||||||
scrollorama.animate('#simio-photo',{
|
|
||||||
delay:993, duration:1986, property:'rotate', start:-10, end:10
|
|
||||||
});
|
|
||||||
|
|
||||||
scrollorama.animate('#pusset .btn',{
|
|
||||||
delay:2700, duration:993, property:'left', start:-800, easing:'easeOutBounce'
|
|
||||||
});
|
|
||||||
|
|
||||||
scrollorama.animate('#sakrecoer ul li:nth-child(1)',{
|
|
||||||
delay:2979, duration:993, property:'top', start:840, end: 690
|
|
||||||
});
|
|
||||||
scrollorama.animate('#sakrecoer ul li:nth-child(2)',{
|
|
||||||
delay:2979, duration:993, property:'top', start:800, end: 690
|
|
||||||
});
|
|
||||||
scrollorama.animate('#sakrecoer ul li:nth-child(3)',{
|
|
||||||
delay:2979, duration:993, property:'top', start:920, end: 630
|
|
||||||
});
|
|
||||||
scrollorama.animate('#sakrecoer ul li:nth-child(4)',{
|
|
||||||
delay:2979, duration:993, property:'top', start:880, end: 670
|
|
||||||
});
|
|
||||||
scrollorama.animate('#sakrecoer ul li:nth-child(5)',{
|
|
||||||
delay:2979, duration:993, property:'top', start:830, end: 710
|
|
||||||
});
|
|
||||||
scrollorama.animate('#sakrecoer ul li:nth-child(6)',{
|
|
||||||
delay:2979, duration:993, property:'top', start:960, end: 650
|
|
||||||
});
|
|
||||||
|
|
||||||
scrollorama.animate('#final h2',{
|
|
||||||
delay:4500, duration:900, property:'top', start:0, easing:'easeOutBounce'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
290
about/style.css
290
about/style.css
|
|
@ -1,290 +0,0 @@
|
||||||
---
|
|
||||||
---
|
|
||||||
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
|
|
||||||
margin: 0; padding: 0; border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font: 18px/30px "Helvetica Neue", Helvetica, Arial, Sans-serif;
|
|
||||||
color: #000;
|
|
||||||
text-shadow: 0px 0px 10px #0ff;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #fff; text-decoration: none; font-weight: bold;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
border-radius: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
overflow-x: hidden; height: 993px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#intro {
|
|
||||||
background: #000 url(images/pusset-bg.jpg) left no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#intro h1 {
|
|
||||||
width: 858px; height: 161px;
|
|
||||||
background: url(images/intro-title.png); text-indent: -9999px;
|
|
||||||
position: relative; top: 145px; left: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#intro p {
|
|
||||||
position: relative; top: 200px; left: 285px;
|
|
||||||
width: 650px; margin: 0 0 30px 0;
|
|
||||||
}
|
|
||||||
#intro p:nth-child(2) {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#reset {
|
|
||||||
background: #0cf url(images/resetbg.jpg) no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reset h2 {
|
|
||||||
width: 432px; height: 310px;
|
|
||||||
background: url(images/reset-title.png); text-indent: -9999px;
|
|
||||||
position: relative; top: 87px; left: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reset-photo {
|
|
||||||
position: absolute; top: 70px; left: 650px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reset p {
|
|
||||||
position: relative; top: 130px; left: 93px;
|
|
||||||
width: 530px; margin: 0 0 30px 0;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0px 0px 20px #f00;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reset a {
|
|
||||||
color: #fff; text-decoration: none; font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reset .btn a {
|
|
||||||
display: block;
|
|
||||||
padding: 50px;
|
|
||||||
background-color: #0ff;
|
|
||||||
box-shadow: 0 0 20px #0ff;
|
|
||||||
border-radius: 7px;
|
|
||||||
-webkit-transition-property: hover;
|
|
||||||
-webkit-transition: background-color 0.25s ease-in-out;
|
|
||||||
-moz-transition: background-color 0.25s linear 0s; /* firefox 4 */
|
|
||||||
-o-transition-property: background-color; /* opera 10.5 */
|
|
||||||
-o-transition-duration: 0.25s;
|
|
||||||
font-size: 48px;
|
|
||||||
color: #f00;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
#reset .btn a:hover {
|
|
||||||
background-color: #f00;
|
|
||||||
color: #0ff;
|
|
||||||
}
|
|
||||||
#reset img {
|
|
||||||
border-radius: 7px;
|
|
||||||
box-shadow: 0 0 40px #f00;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#simio {
|
|
||||||
background: #000 url(images/simio_bg.jpg) no-repeat top right;
|
|
||||||
background-size: cover;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#simio h2 {
|
|
||||||
width: 635px; height: 208px;
|
|
||||||
background: url(images/simio-title.png) top left; text-indent: -9999px;
|
|
||||||
position: relative; top: 87px; left: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#simio-photo {
|
|
||||||
position: absolute; left: 410px; top: 300px;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
-moz-transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#simio p {
|
|
||||||
position: relative; top: 145px; left: 90px;
|
|
||||||
width: 300px; margin: 0 0 30px 0;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 0px 0px 20px #0269e3;
|
|
||||||
}
|
|
||||||
|
|
||||||
#simio a {
|
|
||||||
color: #fff; text-decoration: none; font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#simio img {
|
|
||||||
border-radius: 7px;
|
|
||||||
box-shadow: 0 0 40px #0269e3;
|
|
||||||
}
|
|
||||||
#simio a.btn {
|
|
||||||
position: absolute; width: 500px; top: 610px; right: 10px;
|
|
||||||
display: block;
|
|
||||||
padding: 50px;
|
|
||||||
background-color: #f00;
|
|
||||||
box-shadow: 0 0 20px #0269e3;
|
|
||||||
border-radius: 7px;
|
|
||||||
-webkit-transition-property: hover;
|
|
||||||
-webkit-transition: background-color 0.25s ease-in-out;
|
|
||||||
-moz-transition: background-color 0.25s linear 0s; /* firefox 4 */
|
|
||||||
-o-transition-property: background-color; /* opera 10.5 */
|
|
||||||
-o-transition-duration: 0.25s;
|
|
||||||
font-size: 48px;
|
|
||||||
color: #fff;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
#simio a.btn:hover {
|
|
||||||
background-color: #0269e3;
|
|
||||||
color: #f00;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#pusset {
|
|
||||||
background: #f00 url(images/intro-bg.jpg);
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pusset h2 {
|
|
||||||
width: 513px; height: 324px;
|
|
||||||
background: url(images/pusset-title.png); text-indent: -9999px;
|
|
||||||
position: relative; top: 70px; left: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pusset p {
|
|
||||||
position: relative; top: 100px; left: 100px;
|
|
||||||
width: 500px;
|
|
||||||
color: #0ff;
|
|
||||||
text-shadow: 0px 0px 20px #0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pusset a {
|
|
||||||
color: #fff; text-decoration: none; font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pusset a.btn {
|
|
||||||
position: absolute; width: 500px; top: 700px; right: 10px;
|
|
||||||
display: block;
|
|
||||||
padding: 50px;
|
|
||||||
background-color: #f00;
|
|
||||||
box-shadow: 0 0 20px #f00;
|
|
||||||
border-radius: 7px;
|
|
||||||
-webkit-transition-property: hover;
|
|
||||||
-webkit-transition: background-color 0.25s ease-in-out;
|
|
||||||
-moz-transition: background-color 0.25s linear 0s; /* firefox 4 */
|
|
||||||
-o-transition-property: background-color; /* opera 10.5 */
|
|
||||||
-o-transition-duration: 0.25s;
|
|
||||||
font-size: 48px;
|
|
||||||
color: #fff;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
#pusset a.btn:hover {
|
|
||||||
background-color: #0ff;
|
|
||||||
color: #fff;
|
|
||||||
box-shadow: 0 0 20px #0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#sakrecoer {
|
|
||||||
background: #0ff url(images/sakrecoerLIVE.png);
|
|
||||||
position: relative;
|
|
||||||
text-shadow: 0px 0px 10px #f00;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sakrecoer h2 {
|
|
||||||
width: 900px; height: 147px;
|
|
||||||
background: url(images/intro-title.png); text-indent: -9999px;
|
|
||||||
position: relative; top: 90px; left: 85px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sakrecoer p {
|
|
||||||
position: relative; top: 120px; left: 90px;
|
|
||||||
width: 720px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sakrecoer ul li {
|
|
||||||
float: left; box-shadow: 0 0 20px rgba(0,0,0,0.5); line-height: 0;
|
|
||||||
position: absolute; list-style: none;
|
|
||||||
}
|
|
||||||
#sakrecoer ul li:nth-child(1) {
|
|
||||||
top: 640px; left: 50px;
|
|
||||||
transform: rotate(10deg);
|
|
||||||
-moz-transform: rotate(10deg);
|
|
||||||
-webkit-transform: rotate(10deg);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
#sakrecoer ul li:nth-child(2) {
|
|
||||||
top: 550px; left: 320px;
|
|
||||||
transform: rotate(-5deg);
|
|
||||||
-moz-transform: rotate(-5deg);
|
|
||||||
-webkit-transform: rotate(-5deg);
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
#sakrecoer ul li:nth-child(3) {
|
|
||||||
top: 680px; left: 520px;
|
|
||||||
transform: rotate(-2deg);
|
|
||||||
-moz-transform: rotate(-2deg);
|
|
||||||
-webkit-transform: rotate(-2deg);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
#sakrecoer ul li:nth-child(4) {
|
|
||||||
top: 550px; left: 810px;
|
|
||||||
transform: rotate(7deg);
|
|
||||||
-moz-transform: rotate(7deg);
|
|
||||||
-webkit-transform: rotate(7deg);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
#sakrecoer ul li:nth-child(5) {
|
|
||||||
top: 630px; left: 940px;
|
|
||||||
transform: rotate(-7deg);
|
|
||||||
-moz-transform: rotate(-7deg);
|
|
||||||
-webkit-transform: rotate(-7deg);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
#sakrecoer ul li:nth-child(6) {
|
|
||||||
top: 678px; left: 1230px;
|
|
||||||
transform: rotate(-2deg);
|
|
||||||
-moz-transform: rotate(-2deg);
|
|
||||||
-webkit-transform: rotate(-2deg);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
#sakrecoer img {
|
|
||||||
box-shadow: 0 0 10px #f00;
|
|
||||||
}
|
|
||||||
|
|
||||||
#final {
|
|
||||||
background: #0fc url(images/last-bg.jpg);
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#final h2 {
|
|
||||||
width: 672px; height: 358px;
|
|
||||||
background: url(images/final-title.png); text-indent: -9999px;
|
|
||||||
position: relative; top: 87px; left: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#final p {
|
|
||||||
position: relative; top: 130px; left: 115px;
|
|
||||||
width: 672px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
#final p.credits {
|
|
||||||
font-size: 12px;
|
|
||||||
position: absolute; top: 950px; left: 115px;
|
|
||||||
color: #000;
|
|
||||||
text-shadow: none;
|
|
||||||
width: 872px;
|
|
||||||
}
|
|
||||||
{% include curtain.css %}
|
|
||||||
{% include style.css %}
|
|
||||||
{% include navmenu.css %}
|
|
||||||
33
index.html
33
index.html
|
|
@ -1,7 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<a id="about" href="about/">About</a>
|
<a id="about" href="about/">About</a>
|
||||||
<a id="log" href="blog/">Log</a>
|
<a id="log" href="blog/">Log</a>
|
||||||
<a id="music" href="music/">Music</a>
|
<a id="music" href="music/">Music</a>
|
||||||
|
|
@ -28,63 +27,39 @@ layout: default
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<div id="abcde"></div>
|
<div id="abcde"></div>
|
||||||
|
|
||||||
<div id="abcdef"></div>
|
<div id="abcdef"></div>
|
||||||
|
|
||||||
<button id="video_pause">Pause<br />Video</button>
|
<button id="video_pause">Pause<br />Video</button>
|
||||||
|
|
||||||
|
|
||||||
<video autoplay loop poster="{{ site.baseurl }}/assets/img/bg/frontpage.jpg" id="bgvid">
|
<video autoplay loop poster="{{ site.baseurl }}/assets/img/bg/frontpage.jpg" id="bgvid">
|
||||||
<source src="{{ site.baseurl }}/assets/vi/0001-0076.webm" type="video/webm">
|
<source src="{{ site.baseurl }}/assets/vi/0001-0076.webm" type="video/webm">
|
||||||
<source src="{{ site.baseurl }}/assets/vi/0001-0076.mp4" type="video/mp4">
|
<source src="{{ site.baseurl }}/assets/vi/0001-0076.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
|
||||||
var vid = document.getElementsByTagName("video")[0]; vid.playbackRate = 0.1;
|
var vid = document.getElementsByTagName("video")[0]; vid.playbackRate = 0.1;
|
||||||
|
|
||||||
var pauseButton = document.getElementById("video_pause");
|
var pauseButton = document.getElementById("video_pause");
|
||||||
|
|
||||||
function vidFade() {
|
function vidFade() {
|
||||||
|
|
||||||
vid.classList.add("stopfade");
|
vid.classList.add("stopfade");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
vid.addEventListener('ended', function () {
|
vid.addEventListener('ended', function () {
|
||||||
|
|
||||||
// only functional if "loop" is removed
|
// only functional if "loop" is removed
|
||||||
|
|
||||||
vid.pause();
|
vid.pause();
|
||||||
|
|
||||||
// to capture IE10
|
// to capture IE10
|
||||||
|
|
||||||
vidFade();
|
vidFade();
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
pauseButton.addEventListener("click", function () {
|
pauseButton.addEventListener("click", function () {
|
||||||
|
|
||||||
vid.classList.toggle("stopfade");
|
vid.classList.toggle("stopfade");
|
||||||
|
|
||||||
if (vid.paused) {
|
if (vid.paused) {
|
||||||
|
|
||||||
vid.play();
|
vid.play();
|
||||||
|
|
||||||
pauseButton.innerHTML = "Pause Video";
|
pauseButton.innerHTML = "Pause Video";
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
vid.pause();
|
|
||||||
|
|
||||||
pauseButton.innerHTML = "Resume Video";
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
vid.pause();
|
||||||
|
pauseButton.innerHTML = "Resume Video";
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in a new issue