mirror of
https://github.com/Stream4me/stream4me.github.io.git
synced 2025-02-21 00:40:35 +01:00
New Website
This commit is contained in:
Alhaziel
parent
5aae9a43a5
commit
eb6df51306
2744
css/animate.css
vendored
Normal file
2744
css/animate.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
6
css/bootstrap.min.css
vendored
Normal file
6
css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
css/font-awesome.min.css
vendored
Normal file
4
css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
240
css/overwrite.css
Normal file
240
css/overwrite.css
Normal file
@ -0,0 +1,240 @@
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.form-control {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input.input-block-level{
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-prepend input,
|
||||
.input-append select,
|
||||
.input-prepend select,
|
||||
.input-append .uneditable-input,
|
||||
.input-prepend .uneditable-input {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.input-prepend .add-on:first-child,
|
||||
.input-prepend .btn:first-child {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-append select,
|
||||
.input-append .uneditable-input {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.input-append input + .btn-group .btn:last-child,
|
||||
.input-append select + .btn-group .btn:last-child,
|
||||
.input-append .uneditable-input + .btn-group .btn:last-child {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
.input-append .add-on:last-child,
|
||||
.input-append .btn:last-child,
|
||||
.input-append .btn-group:last-child > .dropdown-toggle {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append input,
|
||||
.input-prepend.input-append select,
|
||||
.input-prepend.input-append .uneditable-input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append input + .btn-group .btn,
|
||||
.input-prepend.input-append select + .btn-group .btn,
|
||||
.input-prepend.input-append .uneditable-input + .btn-group .btn {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append .add-on:first-child,
|
||||
.input-prepend.input-append .btn:first-child {
|
||||
margin-right: -1px;
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append .add-on:last-child,
|
||||
.input-prepend.input-append .btn:last-child {
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
textarea:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.uneditable-input:focus {
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
/* IE6-9 */
|
||||
|
||||
}
|
||||
|
||||
input.search-query {
|
||||
margin-bottom: 0;
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.form-search .input-append .search-query {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.form-search .input-append .btn {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.form-search .input-prepend .search-query {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.form-search .input-prepend .btn {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
*border-right-width: 0;
|
||||
*border-bottom-width: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
|
||||
}
|
||||
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.dropup .dropdown-submenu > .dropdown-menu {
|
||||
-webkit-border-radius: 0 0 0 0;
|
||||
-moz-border-radius: 0 0 0 0;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* === bootstrap button === */
|
||||
|
||||
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
background-image:none;
|
||||
border-color: none;
|
||||
border-bottom-color: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
outline:0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
a.btn,.btn:focus {
|
||||
outline:0;
|
||||
|
||||
}
|
||||
|
||||
.btn-medium {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
106
css/simpletextrotator.css
Normal file
106
css/simpletextrotator.css
Normal file
@ -0,0 +1,106 @@
|
||||
.rotating {
|
||||
display: inline-block;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-ms-transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||
-moz-transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||
-ms-transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||
-o-transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
-webkit-transform-origin-x: 50%;
|
||||
}
|
||||
|
||||
.rotating.flip {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rotating .front, .rotating .back {
|
||||
left: 0;
|
||||
top: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
-o-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.rotating .front {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
-webkit-transform: translate3d(0,0,1px);
|
||||
-moz-transform: translate3d(0,0,1px);
|
||||
-ms-transform: translate3d(0,0,1px);
|
||||
-o-transform: translate3d(0,0,1px);
|
||||
transform: translate3d(0,0,1px);
|
||||
}
|
||||
|
||||
.rotating.flip .front {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rotating .back {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.rotating.spin {
|
||||
-webkit-transform: rotate(360deg) scale(0);
|
||||
-moz-transform: rotate(360deg) scale(0);
|
||||
-ms-transform: rotate(360deg) scale(0);
|
||||
-o-transform: rotate(360deg) scale(0);
|
||||
transform: rotate(360deg) scale(0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.rotating.flip .back {
|
||||
z-index: 2;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: rotateY(180deg) translate3d(0,0,0);
|
||||
-moz-transform: rotateY(180deg) translate3d(0,0,0);
|
||||
-ms-transform: rotateY(180deg) translate3d(0,0,0);
|
||||
-o-transform: rotateY(180deg) translate3d(0,0,0);
|
||||
transform: rotateY(180deg) translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.rotating.flip.up .back {
|
||||
-webkit-transform: rotateX(180deg) translate3d(0,0,0);
|
||||
-moz-transform: rotateX(180deg) translate3d(0,0,0);
|
||||
-ms-transform: rotateX(180deg) translate3d(0,0,0);
|
||||
-o-transform: rotateX(180deg) translate3d(0,0,0);
|
||||
transform: rotateX(180deg) translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.rotating.flip.cube .front {
|
||||
-webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);
|
||||
-moz-transform: translate3d(0,0,100px) scale(0.85,0.85);
|
||||
-ms-transform: translate3d(0,0,100px) scale(0.85,0.85);
|
||||
-o-transform: translate3d(0,0,100px) scale(0.85,0.85);
|
||||
transform: translate3d(0,0,100px) scale(0.85,0.85);
|
||||
}
|
||||
|
||||
.rotating.flip.cube .back {
|
||||
-webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9);
|
||||
-moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
-ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
-o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
}
|
||||
|
||||
.rotating.flip.cube.up .back {
|
||||
-webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9);
|
||||
-moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
-ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
-o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
|
||||
}
|
||||
532
css/style.css
Normal file
532
css/style.css
Normal file
@ -0,0 +1,532 @@
|
||||
/*
|
||||
Theme Name: Alstar
|
||||
Theme URL: https://bootstrapmade.com/alstar-free-parallax-bootstrap-template/
|
||||
Author: BootstrapMade.com
|
||||
Author URL: https://bootstrapmade.com
|
||||
*/
|
||||
|
||||
/* ================================
|
||||
Imports
|
||||
================================= */
|
||||
@import url('font-awesome.min.css');
|
||||
@import url('simpletextrotator.css');
|
||||
@import url('overwrite.css');
|
||||
@import url('animate.css');
|
||||
|
||||
/* ================================
|
||||
General
|
||||
================================= */
|
||||
|
||||
body{
|
||||
text-align: center;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
|
||||
color: #3a3a3a;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.lead{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid transparent;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 1.428571429;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button.navbar-toggle {
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
padding: 12px 32px;
|
||||
transition: 0.5s;
|
||||
line-height: 1;
|
||||
margin: 20px auto;
|
||||
-webkit-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
border-color: #0081c2;
|
||||
background: #0081c2;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* ================================
|
||||
margin, padding
|
||||
================================= */
|
||||
.mar-top0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mar-top10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mar-top20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mar-top30 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.mar-top40 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* Back to top button */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
display: none;
|
||||
padding: 6px 12px 9px 12px;
|
||||
font-size: 16px;
|
||||
border-radius: 2px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
transition: background 0.5s;
|
||||
z-index:1000;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.back-to-top {
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
Navbar
|
||||
================================= */
|
||||
|
||||
nav.navbar{
|
||||
position: fixed;
|
||||
top: -72px;
|
||||
margin-bottom: 0px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
transition: all 0.2s;
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav.navbar.fixed-to-top{
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.navbar-default{
|
||||
border: none;
|
||||
border-bottom: none;
|
||||
opacity: 1;
|
||||
display: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
|
||||
color: #0081c2;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
-moz-transition: all 300ms ease-in-out;
|
||||
-ms-transition: all 300ms ease-in-out;
|
||||
-o-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* brand / logo */
|
||||
.navbar-default .navbar-brand{
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
Home sections
|
||||
================================= */
|
||||
|
||||
.home-section {
|
||||
width: 100%;
|
||||
padding: 150px 0px 150px 0px;
|
||||
}
|
||||
|
||||
/* --- heading --- */
|
||||
.section-heading {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
font-size: 38px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-heading .heading-line {
|
||||
margin:0 auto;
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 80px;
|
||||
background: #333;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* --- section bg var --- */
|
||||
|
||||
.bg-gray {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
|
||||
/* --- section content general color --- */
|
||||
|
||||
.color-light h1,.color-light h2,.color-light h3,.color-light h4,.color-light h5,.color-light h6 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.color-light li {
|
||||
color: #eee;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
|
||||
/* ==========================
|
||||
Download
|
||||
============================= */
|
||||
|
||||
#download{
|
||||
background-color: #181818;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
#download h2{
|
||||
color: #fff
|
||||
}
|
||||
|
||||
#download ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#download li{
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
#download .btn {
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
#download .btn:hover {
|
||||
border-color: #0081c2;
|
||||
background: #0081c2;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
Intro
|
||||
================================= */
|
||||
|
||||
#intro {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
#intro img{
|
||||
position: absolute;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
|
||||
#intro .btn {
|
||||
position:absolute;
|
||||
width:200px;
|
||||
left: calc(50% - 100px);
|
||||
bottom : 30px;
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
#intro .btn:hover {
|
||||
border-color: #0081c2;
|
||||
background: #0081c2;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#description .description-img {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#description .description-img img {
|
||||
margin-left: -15px;
|
||||
margin-top: 40px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#description .description-img {
|
||||
height: auto;
|
||||
}
|
||||
#description .description-img img {
|
||||
margin-left: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
#description .content h2 {
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#description .content h3 {
|
||||
color: #777;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
font-style: italic;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#description .content p {
|
||||
line-height: 26px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#description .content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ================================
|
||||
Contact
|
||||
================================= */
|
||||
|
||||
#contacts .btn {
|
||||
display: table;
|
||||
color: #0081c2;
|
||||
border: 2px solid #0081c2;
|
||||
}
|
||||
|
||||
#contacts .btn:hover {
|
||||
border-color: #0081c2;
|
||||
background: #0081c2;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#contacts i{
|
||||
font-size:30px;
|
||||
padding-right:10px
|
||||
}
|
||||
|
||||
#contacts i, #contacts span{
|
||||
display: table-cell;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
/* ================================
|
||||
Clients
|
||||
================================= */
|
||||
ul.clients {
|
||||
list-style: none;
|
||||
}
|
||||
ul.clients li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/* ================================
|
||||
Bottom widget
|
||||
================================= */
|
||||
#bottom-widget {
|
||||
overflow: hidden;
|
||||
}
|
||||
ul.social-network {
|
||||
margin: 0;
|
||||
margin-left:0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ul.social-network li {
|
||||
display: inline;
|
||||
margin: 5px 5px;
|
||||
}
|
||||
|
||||
|
||||
ul.social-network li a:hover span .fa-circle {
|
||||
color: #2b2b2b;
|
||||
}
|
||||
|
||||
ul.social-network li a i{
|
||||
transition: 0.3s
|
||||
}
|
||||
/* ================================
|
||||
Footer
|
||||
================================= */
|
||||
footer {
|
||||
color: #ccc;
|
||||
padding: 20px 0 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
more media queries
|
||||
================================= */
|
||||
|
||||
@media (max-width:768px) {
|
||||
|
||||
header{
|
||||
padding-bottom: 50px;
|
||||
min-height: 1000px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.box-team, .box-team img {
|
||||
text-align: center;
|
||||
}
|
||||
.box-team img {
|
||||
float: none;
|
||||
margin:0 auto;
|
||||
}
|
||||
.box-team {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.og-fullimg { display: none; }
|
||||
.og-details { float: none; width: 100%; padding: 0 40px; }
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:992px) {
|
||||
|
||||
.service.carousel .item h4, .service.carousel .item p{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service p{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.og-expander {
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
.og-details {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:480px){
|
||||
|
||||
header .carousel-iphone, .detail .screenshot{
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
header .carousel, .detail .screenshot img{
|
||||
padding-top: 85px;
|
||||
width: 245px;
|
||||
}
|
||||
|
||||
.service .screenshot img{
|
||||
margin-top: -12px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
header{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-size: 70px;
|
||||
}
|
||||
}
|
||||
1
css/style.min.css
vendored
Normal file
1
css/style.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
fanart.jpg
BIN
fanart.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
BIN
fonts/FontAwesome.otf
Normal file
BIN
fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
fonts/fontawesome-webfont.eot
Normal file
BIN
fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
fonts/fontawesome-webfont.svg
Normal file
2671
fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
fonts/fontawesome-webfont.ttf
Normal file
BIN
fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
fonts/fontawesome-webfont.woff
Normal file
BIN
fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/fontawesome-webfont.woff2
Normal file
BIN
fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
BIN
githubLogo.png
BIN
githubLogo.png
Binary file not shown.
|
Before Width: | Height: | Size: 743 B |
BIN
img/big-logo.png
Normal file
BIN
img/big-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/screenshot.jpg
Normal file
BIN
img/screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
img/small-logo.png
Normal file
BIN
img/small-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 854 B |
177
index.html
177
index.html
@ -1,50 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kodi on Demand</title>
|
||||
<style type="text/css">
|
||||
body{
|
||||
color: white
|
||||
}
|
||||
button{
|
||||
background-position:left center;
|
||||
background-repeat:no-repeat;
|
||||
color: white;
|
||||
background-color: #0366d6;
|
||||
border-color: #0366d6;
|
||||
border-radius: 8px;
|
||||
height: 40px;
|
||||
text-indent: 32px;
|
||||
font-size: x-large
|
||||
}
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<title>Kodi on Demand - Official Site</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,300,700,800" rel="stylesheet" media="screen">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
<link href="css/style.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body bgcolor="black">
|
||||
<center><img src="fanart.jpg" width="20%" height="20%"></center>
|
||||
<p style="text-align:center;"><b>Kodi on Demand è un addon di Kodi per cercare e guardare contenuti multimediali dal web</b></p>
|
||||
Come installare KoD:
|
||||
<ul>
|
||||
<li>Scarica il repository: <a href="http://7.ly/kodrepo" style="color:white;font-weight:bold">7.ly/kodrepo</a> (se hai un tvbox digita questo link nel browser)</li>
|
||||
<li>Apri Kodi e vai in Addons -> installa da file zip</li>
|
||||
<li>Seleziona il file appena scaricato (repository.kod-1.0) e installalo</li>
|
||||
<li>Recati in "installa da repository" -> "KoD Repo" -> "Addon Video" ed installa l'addon</li>
|
||||
<li>Apri KoD e goditelo!</li>
|
||||
</ul>
|
||||
<center>
|
||||
<a href="https://github.com/kodiondemand/"><button style="background-image: url('githubLogo.png');">Codice sorgente</button></a>
|
||||
<a href="https://t.me/kodiondemand"><button style="background-image: url('telegramLogo.png');">Gruppo Telegram</button></a>
|
||||
</center>
|
||||
<div class="footer">
|
||||
<p style="color:red">The owners and submitters to this addon do not host or distribute any of the content displayed by these addons nor do they have any affiliation with the content providers.</p>
|
||||
<p style="color:yellow">Kodi © is a registered trademark of the XBMC Foundation. We are not connected to or in any other way affiliated with Kodi, Team Kodi, or the XBMC Foundation. Furthermore, any software, addons, or products offered by us will receive no support in official Kodi channels, including the Kodi forums and various social networks.</p>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
|
||||
<span class="sr-only">Toggle nav</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<!-- Logo text or image -->
|
||||
<a class="navbar-brand" href="index.html"><img src="img/small-logo.png"></a>
|
||||
|
||||
</div>
|
||||
<div class="navigation collapse navbar-collapse navbar-ex1-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="current"><a href="#intro">Home</a></li>
|
||||
<li><a href="#description">Descrizione</a></li>
|
||||
<li><a href="#download">Download</a></li>
|
||||
<li><a href="#contacts">Contatti</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section id="intro" class="bg-dark">
|
||||
<img src="img/big-logo.png">
|
||||
<a href="#description" class="btn scroll animated fadeInUp">Scopri di più</a>
|
||||
</section>
|
||||
|
||||
<section id="description" class="home-section bg-grey">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-2 col-md-8">
|
||||
<div class="section-heading">
|
||||
<h2>Kodi On Demand</h2>
|
||||
<div class="heading-line"></div>
|
||||
<p>Un fork italiano di <a href="https://github.com/alfa-addon">Alfa</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row wow fadeInUp">
|
||||
<div class="col-md-6 description-img">
|
||||
<img src="img/screenshot.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 content">
|
||||
<h2>Kodi on Demand è un add-on per Kodi per cercare e guardare contenuti sul web.</h2>
|
||||
<h3>I proprietari di questo add-on non ospitano né distribuiscono nessuno dei contenuti visualizzabili tramite questo add-on né hanno alcuna affiliazione con i fornitori di contenuti.</h3>
|
||||
<p>Kodi © è un marchio registrato di XBMC Foundation. Non siamo collegati o in nessun altro modo affiliati con Kodi, Team Kodi o la Fondazione XBMC. Inoltre, qualsiasi software, addons o prodotti da noi offerti non riceveranno supporto nei canali ufficiali di Kodi, inclusi i forum di Kodi e vari social network.<br>
|
||||
<i>Kodi © is a registered trademark of the XBMC Foundation. We are not connected to or in any other way affiliated with Kodi, Team Kodi, or the XBMC Foundation. Furthermore, any software, addons, or products offered by us will receive no support in official Kodi channels, including the Kodi forums and various social networks.</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="download" class="home-section bg-dark">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>Come installare Kodi on Demand</h2>
|
||||
<ul>
|
||||
<li>Scarica il repository: <a href="http://7.ly/kodrepo">7.ly/kodrepo</a> (se hai un tvbox digita questo link nel browser)</li>
|
||||
<li>Apri Kodi e vai in Addons -> installa da file zip</li>
|
||||
<li>Seleziona il file appena scaricato (repository.kod-1.0) e installalo</li>
|
||||
<li>Recati in "installa da repository" -> "KoD Repo" -> "Addon Video" ed installa l'addon</li>
|
||||
<li>Apri KoD e goditelo!</li>
|
||||
</ul>
|
||||
<a href="http://7.ly/kodrepo" class="btn animated fadeInUp" target=”_blank”>Scarica la Repo</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contacts" class="home-section bg-gray">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-2 col-md-8">
|
||||
<div class="section-heading">
|
||||
<h2>Resta in contatto</h2>
|
||||
<div class="heading-line"></div>
|
||||
<p>per seguire gli sviluppi di Kodi on Demand, per assistenza o per collaborare, seguici su:</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<a href="https://t.me/kodiondemand" class="btn" target=”_blank”><i class="fa fa-telegram"></i><span>Telegram</span></a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<a href="https://github.com/kodiondemand/" class="btn" target=”_blank”><i class="fa fa-github"></i><span>GitHub</span></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-dark">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="credits">
|
||||
<!--
|
||||
All the links in the footer should remain intact.
|
||||
You can delete the links only if you purchased the pro version.
|
||||
Licensing information: https://bootstrapmade.com/license/
|
||||
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Alstar
|
||||
-->
|
||||
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jquery.scrollTo.min.js"></script>
|
||||
<script src="js/jquery.nav.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
7
js/bootstrap.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
140
js/custom.js
Normal file
140
js/custom.js
Normal file
@ -0,0 +1,140 @@
|
||||
(function ($) {
|
||||
|
||||
// Back to top button
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() > 100) {
|
||||
$('.back-to-top').fadeIn('slow');
|
||||
} else {
|
||||
$('.back-to-top').fadeOut('slow');
|
||||
}
|
||||
});
|
||||
|
||||
$('.back-to-top').click(function () {
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, 800);
|
||||
return false;
|
||||
});
|
||||
|
||||
//navigation
|
||||
$('.navigation').onePageNav({
|
||||
scrollOffset: 0
|
||||
});
|
||||
|
||||
$(".navbar-collapse a").on('click', function () {
|
||||
$(".navbar-collapse.collapse").removeClass('in');
|
||||
});
|
||||
|
||||
//
|
||||
|
||||
// Smooth scroll for the get started button
|
||||
$('.btn.scroll').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var target = $(this.hash);
|
||||
if (target.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: target.offset().top
|
||||
}, 700);
|
||||
}
|
||||
});
|
||||
|
||||
// Fixed navbar
|
||||
$(window).scroll(function () {
|
||||
|
||||
var scrollTop = $(window).scrollTop();
|
||||
|
||||
if (scrollTop > 200) {
|
||||
$('.navbar-default').css('display', 'block');
|
||||
$('.navbar-default').addClass('fixed-to-top');
|
||||
|
||||
} else if (scrollTop == 0) {
|
||||
|
||||
$('.navbar-default').removeClass('fixed-to-top');
|
||||
}
|
||||
});
|
||||
|
||||
// Intro carousel
|
||||
var introCarousel = $("#introCarousel");
|
||||
var introCarouselIndicators = $("#intro-carousel-indicators");
|
||||
introCarousel.find(".carousel-inner").children(".item").each(function(index) {
|
||||
(index === 0) ?
|
||||
introCarouselIndicators.append("<li data-target='#introCarousel' data-slide-to='" + index + "' class='active'></li>") :
|
||||
introCarouselIndicators.append("<li data-target='#introCarousel' data-slide-to='" + index + "'></li>");
|
||||
|
||||
$(this).css("background-image", "url('" + $(this).children('.carousel-background').children('img').attr('src') +"')");
|
||||
$(this).children('.carousel-background').remove();
|
||||
});
|
||||
|
||||
// introCarousel.on('slid.bs.carousel', function (e) {
|
||||
// $(this).find('h2').addClass('animated fadeInDown');
|
||||
// $(this).find('p').addClass('animated fadeInUp');
|
||||
// $(this).find('.btn-get-started').addClass('animated fadeInUp');
|
||||
// });
|
||||
|
||||
|
||||
//parallax
|
||||
if ($('#parallax1').length || $('#parallax2').length) {
|
||||
|
||||
$(window).stellar({
|
||||
responsive: true,
|
||||
scrollProperty: 'scroll',
|
||||
parallaxElements: false,
|
||||
horizontalScrolling: false,
|
||||
horizontalOffset: 0,
|
||||
verticalOffset: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function navbar() {
|
||||
|
||||
if ($(window).scrollTop() > 1) {
|
||||
$('#navigation').addClass('show-nav');
|
||||
} else {
|
||||
$('#navigation').removeClass('show-nav');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
var browserWidth = $(window).width();
|
||||
|
||||
if (browserWidth > 560) {
|
||||
|
||||
$(window).scroll(function () {
|
||||
navbar();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
$(window).resize(function () {
|
||||
|
||||
var browserWidth = $(window).width();
|
||||
|
||||
if (browserWidth > 560) {
|
||||
|
||||
$(window).scroll(function () {
|
||||
navbar();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Carousel
|
||||
$('.service .carousel').carousel({
|
||||
interval: 4000
|
||||
})
|
||||
|
||||
//works
|
||||
$(function () {
|
||||
Grid.init();
|
||||
});
|
||||
|
||||
//animation
|
||||
new WOW().init();
|
||||
|
||||
})(jQuery);
|
||||
1
js/custom.min.js
vendored
Normal file
1
js/custom.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
!function($){$(window).scroll(function(){$(this).scrollTop()>100?$(".back-to-top").fadeIn("slow"):$(".back-to-top").fadeOut("slow")}),$(".back-to-top").click(function(){return $("html, body").animate({scrollTop:0},800),!1}),$(".navigation").onePageNav({scrollOffset:0}),$(".navbar-collapse a").on("click",function(){$(".navbar-collapse.collapse").removeClass("in")}),$(".btn.scroll").on("click",function(e){e.preventDefault();var target=$(this.hash);target.length&&$("html, body").animate({scrollTop:target.offset().top},700)}),$(window).scroll(function(){var scrollTop=$(window).scrollTop();scrollTop>200?($(".navbar-default").css("display","block"),$(".navbar-default").addClass("fixed-to-top")):0==scrollTop&&$(".navbar-default").removeClass("fixed-to-top")});var introCarousel=$("#introCarousel"),introCarouselIndicators=$("#intro-carousel-indicators");function navbar(){$(window).scrollTop()>1?$("#navigation").addClass("show-nav"):$("#navigation").removeClass("show-nav")}introCarousel.find(".carousel-inner").children(".item").each(function(index){0===index?introCarouselIndicators.append("<li data-target='#introCarousel' data-slide-to='"+index+"' class='active'></li>"):introCarouselIndicators.append("<li data-target='#introCarousel' data-slide-to='"+index+"'></li>"),$(this).css("background-image","url('"+$(this).children(".carousel-background").children("img").attr("src")+"')"),$(this).children(".carousel-background").remove()}),($("#parallax1").length||$("#parallax2").length)&&$(window).stellar({responsive:!0,scrollProperty:"scroll",parallaxElements:!1,horizontalScrolling:!1,horizontalOffset:0,verticalOffset:0}),$(document).ready(function(){var browserWidth;$(window).width()>560&&$(window).scroll(function(){navbar()})}),$(window).resize(function(){var browserWidth;$(window).width()>560&&$(window).scroll(function(){navbar()})}),$(".service .carousel").carousel({interval:4e3}),$(function(){Grid.init()}),(new WOW).init()}(jQuery);
|
||||
489
js/grid.js
Normal file
489
js/grid.js
Normal file
@ -0,0 +1,489 @@
|
||||
/*
|
||||
* debouncedresize: special jQuery event that happens once after a window resize
|
||||
*
|
||||
* latest version and complete README available on Github:
|
||||
* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
|
||||
*
|
||||
* Copyright 2011 @louis_remi
|
||||
* Licensed under the MIT license.
|
||||
*/
|
||||
var $event = $.event,
|
||||
$special,
|
||||
resizeTimeout;
|
||||
|
||||
$special = $event.special.debouncedresize = {
|
||||
setup: function() {
|
||||
$( this ).on( "resize", $special.handler );
|
||||
},
|
||||
teardown: function() {
|
||||
$( this ).off( "resize", $special.handler );
|
||||
},
|
||||
handler: function( event, execAsap ) {
|
||||
// Save the context
|
||||
var context = this,
|
||||
args = arguments,
|
||||
dispatch = function() {
|
||||
// set correct event type
|
||||
event.type = "debouncedresize";
|
||||
$event.dispatch.apply( context, args );
|
||||
};
|
||||
|
||||
if ( resizeTimeout ) {
|
||||
clearTimeout( resizeTimeout );
|
||||
}
|
||||
|
||||
execAsap ?
|
||||
dispatch() :
|
||||
resizeTimeout = setTimeout( dispatch, $special.threshold );
|
||||
},
|
||||
threshold: 250
|
||||
};
|
||||
|
||||
// ======================= imagesLoaded Plugin ===============================
|
||||
// https://github.com/desandro/imagesloaded
|
||||
|
||||
// $('#my-container').imagesLoaded(myFunction)
|
||||
// execute a callback when all images have loaded.
|
||||
// needed because .load() doesn't work on cached images
|
||||
|
||||
// callback function gets image collection as argument
|
||||
// this is the container
|
||||
|
||||
// original: MIT license. Paul Irish. 2010.
|
||||
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
|
||||
|
||||
// blank image data-uri bypasses webkit log warning (thx doug jones)
|
||||
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
|
||||
|
||||
$.fn.imagesLoaded = function( callback ) {
|
||||
var $this = this,
|
||||
deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
|
||||
hasNotify = $.isFunction(deferred.notify),
|
||||
$images = $this.find('img').add( $this.filter('img') ),
|
||||
loaded = [],
|
||||
proper = [],
|
||||
broken = [];
|
||||
|
||||
// Register deferred callbacks
|
||||
if ($.isPlainObject(callback)) {
|
||||
$.each(callback, function (key, value) {
|
||||
if (key === 'callback') {
|
||||
callback = value;
|
||||
} else if (deferred) {
|
||||
deferred[key](value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function doneLoading() {
|
||||
var $proper = $(proper),
|
||||
$broken = $(broken);
|
||||
|
||||
if ( deferred ) {
|
||||
if ( broken.length ) {
|
||||
deferred.reject( $images, $proper, $broken );
|
||||
} else {
|
||||
deferred.resolve( $images );
|
||||
}
|
||||
}
|
||||
|
||||
if ( $.isFunction( callback ) ) {
|
||||
callback.call( $this, $images, $proper, $broken );
|
||||
}
|
||||
}
|
||||
|
||||
function imgLoaded( img, isBroken ) {
|
||||
// don't proceed if BLANK image, or image is already loaded
|
||||
if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// store element in loaded images array
|
||||
loaded.push( img );
|
||||
|
||||
// keep track of broken and properly loaded images
|
||||
if ( isBroken ) {
|
||||
broken.push( img );
|
||||
} else {
|
||||
proper.push( img );
|
||||
}
|
||||
|
||||
// cache image and its state for future calls
|
||||
$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
|
||||
|
||||
// trigger deferred progress method if present
|
||||
if ( hasNotify ) {
|
||||
deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
|
||||
}
|
||||
|
||||
// call doneLoading and clean listeners if all images are loaded
|
||||
if ( $images.length === loaded.length ){
|
||||
setTimeout( doneLoading );
|
||||
$images.unbind( '.imagesLoaded' );
|
||||
}
|
||||
}
|
||||
|
||||
// if no images, trigger immediately
|
||||
if ( !$images.length ) {
|
||||
doneLoading();
|
||||
} else {
|
||||
$images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
|
||||
// trigger imgLoaded
|
||||
imgLoaded( event.target, event.type === 'error' );
|
||||
}).each( function( i, el ) {
|
||||
var src = el.src;
|
||||
|
||||
// find out if this image has been already checked for status
|
||||
// if it was, and src has not changed, call imgLoaded on it
|
||||
var cached = $.data( el, 'imagesLoaded' );
|
||||
if ( cached && cached.src === src ) {
|
||||
imgLoaded( el, cached.isBroken );
|
||||
return;
|
||||
}
|
||||
|
||||
// if complete is true and browser supports natural sizes, try
|
||||
// to check for image status manually
|
||||
if ( el.complete && el.naturalWidth !== undefined ) {
|
||||
imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
|
||||
return;
|
||||
}
|
||||
|
||||
// cached images don't fire load sometimes, so we reset src, but only when
|
||||
// dealing with IE, or image is complete (loaded) and failed manual check
|
||||
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
|
||||
if ( el.readyState || el.complete ) {
|
||||
el.src = BLANK;
|
||||
el.src = src;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return deferred ? deferred.promise( $this ) : $this;
|
||||
};
|
||||
|
||||
var Grid = (function() {
|
||||
|
||||
// list of items
|
||||
var $grid = $( '#og-grid' ),
|
||||
// the items
|
||||
$items = $grid.children( 'li' ),
|
||||
// current expanded item's index
|
||||
current = -1,
|
||||
// position (top) of the expanded item
|
||||
// used to know if the preview will expand in a different row
|
||||
previewPos = -1,
|
||||
// extra amount of pixels to scroll the window
|
||||
scrollExtra = 0,
|
||||
// extra margin when expanded (between preview overlay and the next items)
|
||||
marginExpanded = 10,
|
||||
$window = $( window ), winsize,
|
||||
$body = $( 'html, body' ),
|
||||
// transitionend events
|
||||
transEndEventNames = {
|
||||
'WebkitTransition' : 'webkitTransitionEnd',
|
||||
'MozTransition' : 'transitionend',
|
||||
'OTransition' : 'oTransitionEnd',
|
||||
'msTransition' : 'MSTransitionEnd',
|
||||
'transition' : 'transitionend'
|
||||
},
|
||||
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
|
||||
// support for csstransitions
|
||||
support = Modernizr.csstransitions,
|
||||
// default settings
|
||||
settings = {
|
||||
minHeight : 500,
|
||||
speed : 350,
|
||||
easing : 'ease'
|
||||
};
|
||||
|
||||
function init( config ) {
|
||||
|
||||
// the settings..
|
||||
settings = $.extend( true, {}, settings, config );
|
||||
|
||||
// preload all images
|
||||
$grid.imagesLoaded( function() {
|
||||
|
||||
// save item´s size and offset
|
||||
saveItemInfo( true );
|
||||
// get window´s size
|
||||
getWinSize();
|
||||
// initialize some events
|
||||
initEvents();
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
// saves the item´s offset top and height (if saveheight is true)
|
||||
function saveItemInfo( saveheight ) {
|
||||
$items.each( function() {
|
||||
var $item = $( this );
|
||||
$item.data( 'offsetTop', $item.offset().top );
|
||||
if( saveheight ) {
|
||||
$item.data( 'height', $item.height() );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
function initEvents() {
|
||||
|
||||
// when clicking an item, show the preview with the item´s info and large image.
|
||||
// close the item if already expanded.
|
||||
// also close if clicking on the item´s cross
|
||||
$items.on( 'click', 'span.og-close', function() {
|
||||
hidePreview();
|
||||
return false;
|
||||
} ).children( 'a' ).on( 'click', function(e) {
|
||||
|
||||
var $item = $( this ).parent();
|
||||
// check if item already opened
|
||||
current === $item.index() ? hidePreview() : showPreview( $item );
|
||||
return false;
|
||||
|
||||
} );
|
||||
|
||||
// on window resize get the window´s size again
|
||||
// reset some values..
|
||||
$window.on( 'debouncedresize', function() {
|
||||
|
||||
scrollExtra = 0;
|
||||
previewPos = -1;
|
||||
// save item´s offset
|
||||
saveItemInfo();
|
||||
getWinSize();
|
||||
var preview = $.data( this, 'preview' );
|
||||
if( typeof preview != 'undefined' ) {
|
||||
hidePreview();
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
function getWinSize() {
|
||||
winsize = { width : $window.width(), height : $window.height() };
|
||||
}
|
||||
|
||||
function showPreview( $item ) {
|
||||
|
||||
var preview = $.data( this, 'preview' ),
|
||||
// item´s offset top
|
||||
position = $item.data( 'offsetTop' );
|
||||
|
||||
scrollExtra = 0;
|
||||
|
||||
// if a preview exists and previewPos is different (different row) from item´s top then close it
|
||||
if( typeof preview != 'undefined' ) {
|
||||
|
||||
// not in the same row
|
||||
if( previewPos !== position ) {
|
||||
// if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window
|
||||
if( position > previewPos ) {
|
||||
scrollExtra = preview.height;
|
||||
}
|
||||
hidePreview();
|
||||
}
|
||||
// same row
|
||||
else {
|
||||
preview.update( $item );
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// update previewPos
|
||||
previewPos = position;
|
||||
// initialize new preview for the clicked item
|
||||
preview = $.data( this, 'preview', new Preview( $item ) );
|
||||
// expand preview overlay
|
||||
preview.open();
|
||||
|
||||
}
|
||||
|
||||
function hidePreview() {
|
||||
current = -1;
|
||||
var preview = $.data( this, 'preview' );
|
||||
preview.close();
|
||||
$.removeData( this, 'preview' );
|
||||
}
|
||||
|
||||
// the preview obj / overlay
|
||||
function Preview( $item ) {
|
||||
this.$item = $item;
|
||||
this.expandedIdx = this.$item.index();
|
||||
this.create();
|
||||
this.update();
|
||||
}
|
||||
|
||||
Preview.prototype = {
|
||||
create : function() {
|
||||
// create Preview structure:
|
||||
this.$title = $( '<h4></h4>' );
|
||||
this.$description = $( '<p></p>' );
|
||||
this.$href = $( '<a href="#" class="btn btn-theme">External link</a>' );
|
||||
this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
|
||||
this.$loading = $( '<div class="og-loading"></div>' );
|
||||
this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
|
||||
this.$closePreview = $( '<span class="og-close"></span>' );
|
||||
this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
|
||||
this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
|
||||
// append preview element to the item
|
||||
this.$item.append( this.getEl() );
|
||||
// set the transitions for the preview and the item
|
||||
if( support ) {
|
||||
this.setTransition();
|
||||
}
|
||||
},
|
||||
update : function( $item ) {
|
||||
|
||||
if( $item ) {
|
||||
this.$item = $item;
|
||||
}
|
||||
|
||||
// if already expanded remove class "og-expanded" from current item and add it to new item
|
||||
if( current !== -1 ) {
|
||||
var $currentItem = $items.eq( current );
|
||||
$currentItem.removeClass( 'og-expanded' );
|
||||
this.$item.addClass( 'og-expanded' );
|
||||
// position the preview correctly
|
||||
this.positionPreview();
|
||||
}
|
||||
|
||||
// update current value
|
||||
current = this.$item.index();
|
||||
|
||||
// update preview´s content
|
||||
var $itemEl = this.$item.children( 'a' ),
|
||||
eldata = {
|
||||
href : $itemEl.attr( 'href' ),
|
||||
largesrc : $itemEl.data( 'largesrc' ),
|
||||
title : $itemEl.data( 'title' ),
|
||||
description : $itemEl.data( 'description' )
|
||||
};
|
||||
|
||||
this.$title.html( eldata.title );
|
||||
this.$description.html( eldata.description );
|
||||
this.$href.attr( 'href', eldata.href );
|
||||
|
||||
var self = this;
|
||||
|
||||
// remove the current image in the preview
|
||||
if( typeof self.$largeImg != 'undefined' ) {
|
||||
self.$largeImg.remove();
|
||||
}
|
||||
|
||||
// preload large image and add it to the preview
|
||||
// for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
|
||||
if( self.$fullimage.is( ':visible' ) ) {
|
||||
this.$loading.show();
|
||||
$( '<img/>' ).load( function() {
|
||||
var $img = $( this );
|
||||
if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
|
||||
self.$loading.hide();
|
||||
self.$fullimage.find( 'img' ).remove();
|
||||
self.$largeImg = $img.fadeIn( 350 );
|
||||
self.$fullimage.append( self.$largeImg );
|
||||
}
|
||||
} ).attr( 'src', eldata.largesrc );
|
||||
}
|
||||
|
||||
},
|
||||
open : function() {
|
||||
|
||||
setTimeout( $.proxy( function() {
|
||||
// set the height for the preview and the item
|
||||
this.setHeights();
|
||||
// scroll to position the preview in the right place
|
||||
this.positionPreview();
|
||||
}, this ), 25 );
|
||||
|
||||
},
|
||||
close : function() {
|
||||
|
||||
var self = this,
|
||||
onEndFn = function() {
|
||||
if( support ) {
|
||||
$( this ).off( transEndEventName );
|
||||
}
|
||||
self.$item.removeClass( 'og-expanded' );
|
||||
self.$previewEl.remove();
|
||||
};
|
||||
|
||||
setTimeout( $.proxy( function() {
|
||||
|
||||
if( typeof this.$largeImg !== 'undefined' ) {
|
||||
this.$largeImg.fadeOut( 'fast' );
|
||||
}
|
||||
this.$previewEl.css( 'height', 0 );
|
||||
// the current expanded item (might be different from this.$item)
|
||||
var $expandedItem = $items.eq( this.expandedIdx );
|
||||
$expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );
|
||||
|
||||
if( !support ) {
|
||||
onEndFn.call();
|
||||
}
|
||||
|
||||
}, this ), 25 );
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
calcHeight : function() {
|
||||
|
||||
var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
|
||||
itemHeight = winsize.height;
|
||||
|
||||
if( heightPreview < settings.minHeight ) {
|
||||
heightPreview = settings.minHeight;
|
||||
itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
|
||||
}
|
||||
|
||||
this.height = heightPreview;
|
||||
this.itemHeight = itemHeight;
|
||||
|
||||
},
|
||||
setHeights : function() {
|
||||
|
||||
var self = this,
|
||||
onEndFn = function() {
|
||||
if( support ) {
|
||||
self.$item.off( transEndEventName );
|
||||
}
|
||||
self.$item.addClass( 'og-expanded' );
|
||||
};
|
||||
|
||||
this.calcHeight();
|
||||
this.$previewEl.css( 'height', this.height );
|
||||
this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
|
||||
|
||||
if( !support ) {
|
||||
onEndFn.call();
|
||||
}
|
||||
|
||||
},
|
||||
positionPreview : function() {
|
||||
|
||||
// scroll page
|
||||
// case 1 : preview height + item height fits in window´s height
|
||||
// case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
|
||||
// case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
|
||||
var position = this.$item.data( 'offsetTop' ),
|
||||
previewOffsetT = this.$previewEl.offset().top - scrollExtra,
|
||||
scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;
|
||||
|
||||
$body.animate( { scrollTop : scrollVal }, settings.speed );
|
||||
|
||||
},
|
||||
setTransition : function() {
|
||||
this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
|
||||
this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
|
||||
},
|
||||
getEl : function() {
|
||||
return this.$previewEl;
|
||||
}
|
||||
}
|
||||
|
||||
return { init : init };
|
||||
|
||||
})();
|
||||
6
js/jquery.js
vendored
Normal file
6
js/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
223
js/jquery.nav.js
Normal file
223
js/jquery.nav.js
Normal file
@ -0,0 +1,223 @@
|
||||
/*
|
||||
* jQuery One Page Nav Plugin
|
||||
* http://github.com/davist11/jQuery-One-Page-Nav
|
||||
*
|
||||
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* Uses the same license as jQuery, see:
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* @version 3.0.0
|
||||
*
|
||||
* Example usage:
|
||||
* $('#nav').onePageNav({
|
||||
* currentClass: 'current',
|
||||
* changeHash: false,
|
||||
* scrollSpeed: 750
|
||||
* });
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined){
|
||||
|
||||
// our plugin constructor
|
||||
var OnePageNav = function(elem, options){
|
||||
this.elem = elem;
|
||||
this.$elem = $(elem);
|
||||
this.options = options;
|
||||
this.metadata = this.$elem.data('plugin-options');
|
||||
this.$win = $(window);
|
||||
this.sections = {};
|
||||
this.didScroll = false;
|
||||
this.$doc = $(document);
|
||||
this.docHeight = this.$doc.height();
|
||||
};
|
||||
|
||||
// the plugin prototype
|
||||
OnePageNav.prototype = {
|
||||
defaults: {
|
||||
navItems: 'a',
|
||||
currentClass: 'current',
|
||||
changeHash: false,
|
||||
easing: 'swing',
|
||||
filter: '',
|
||||
scrollSpeed: 750,
|
||||
scrollThreshold: 0.5,
|
||||
begin: false,
|
||||
end: false,
|
||||
scrollChange: false
|
||||
},
|
||||
|
||||
init: function() {
|
||||
// Introduce defaults that can be extended either
|
||||
// globally or using an object literal.
|
||||
this.config = $.extend({}, this.defaults, this.options, this.metadata);
|
||||
|
||||
this.$nav = this.$elem.find(this.config.navItems);
|
||||
|
||||
//Filter any links out of the nav
|
||||
if(this.config.filter !== '') {
|
||||
this.$nav = this.$nav.filter(this.config.filter);
|
||||
}
|
||||
|
||||
//Handle clicks on the nav
|
||||
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
|
||||
|
||||
//Get the section positions
|
||||
this.getPositions();
|
||||
|
||||
//Handle scroll changes
|
||||
this.bindInterval();
|
||||
|
||||
//Update the positions on resize too
|
||||
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
adjustNav: function(self, $parent) {
|
||||
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
|
||||
$parent.addClass(self.config.currentClass);
|
||||
},
|
||||
|
||||
bindInterval: function() {
|
||||
var self = this;
|
||||
var docHeight;
|
||||
|
||||
self.$win.on('scroll.onePageNav', function() {
|
||||
self.didScroll = true;
|
||||
});
|
||||
|
||||
self.t = setInterval(function() {
|
||||
docHeight = self.$doc.height();
|
||||
|
||||
//If it was scrolled
|
||||
if(self.didScroll) {
|
||||
self.didScroll = false;
|
||||
self.scrollChange();
|
||||
}
|
||||
|
||||
//If the document height changes
|
||||
if(docHeight !== self.docHeight) {
|
||||
self.docHeight = docHeight;
|
||||
self.getPositions();
|
||||
}
|
||||
}, 250);
|
||||
},
|
||||
|
||||
getHash: function($link) {
|
||||
return $link.attr('href').split('#')[1];
|
||||
},
|
||||
|
||||
getPositions: function() {
|
||||
var self = this;
|
||||
var linkHref;
|
||||
var topPos;
|
||||
var $target;
|
||||
|
||||
self.$nav.each(function() {
|
||||
linkHref = self.getHash($(this));
|
||||
$target = $('#' + linkHref);
|
||||
|
||||
if($target.length) {
|
||||
topPos = $target.offset().top;
|
||||
self.sections[linkHref] = Math.round(topPos);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getSection: function(windowPos) {
|
||||
var returnValue = null;
|
||||
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
|
||||
|
||||
for(var section in this.sections) {
|
||||
if((this.sections[section] - windowHeight) < windowPos) {
|
||||
returnValue = section;
|
||||
}
|
||||
}
|
||||
|
||||
return returnValue;
|
||||
},
|
||||
|
||||
handleClick: function(e) {
|
||||
var self = this;
|
||||
var $link = $(e.currentTarget);
|
||||
var $parent = $link.parent();
|
||||
var newLoc = '#' + self.getHash($link);
|
||||
|
||||
if(!$parent.hasClass(self.config.currentClass)) {
|
||||
//Start callback
|
||||
if(self.config.begin) {
|
||||
self.config.begin();
|
||||
}
|
||||
|
||||
//Change the highlighted nav item
|
||||
self.adjustNav(self, $parent);
|
||||
|
||||
//Removing the auto-adjust on scroll
|
||||
self.unbindInterval();
|
||||
|
||||
//Scroll to the correct position
|
||||
self.scrollTo(newLoc, function() {
|
||||
//Do we need to change the hash?
|
||||
if(self.config.changeHash) {
|
||||
window.location.hash = newLoc;
|
||||
}
|
||||
|
||||
//Add the auto-adjust on scroll back in
|
||||
self.bindInterval();
|
||||
|
||||
//End callback
|
||||
if(self.config.end) {
|
||||
self.config.end();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
},
|
||||
|
||||
scrollChange: function() {
|
||||
var windowTop = this.$win.scrollTop();
|
||||
var position = this.getSection(windowTop);
|
||||
var $parent;
|
||||
|
||||
//If the position is set
|
||||
if(position !== null) {
|
||||
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
|
||||
|
||||
//If it's not already the current section
|
||||
if(!$parent.hasClass(this.config.currentClass)) {
|
||||
//Change the highlighted nav item
|
||||
this.adjustNav(this, $parent);
|
||||
|
||||
//If there is a scrollChange callback
|
||||
if(this.config.scrollChange) {
|
||||
this.config.scrollChange($parent);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scrollTo: function(target, callback) {
|
||||
var offset = $(target).offset().top;
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: offset
|
||||
}, this.config.scrollSpeed, this.config.easing, callback);
|
||||
},
|
||||
|
||||
unbindInterval: function() {
|
||||
clearInterval(this.t);
|
||||
this.$win.unbind('scroll.onePageNav');
|
||||
}
|
||||
};
|
||||
|
||||
OnePageNav.defaults = OnePageNav.prototype.defaults;
|
||||
|
||||
$.fn.onePageNav = function(options) {
|
||||
return this.each(function() {
|
||||
new OnePageNav(this, options).init();
|
||||
});
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
7
js/jquery.scrollTo.min.js
vendored
Normal file
7
js/jquery.scrollTo.min.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) 2007 Ariel Flesler - aflesler ○ gmail • com | https://github.com/flesler
|
||||
* Licensed under MIT
|
||||
* @author Ariel Flesler
|
||||
* @version 2.1.2
|
||||
*/
|
||||
;(function(f){"use strict";"function"===typeof define&&define.amd?define(["jquery"],f):"undefined"!==typeof module&&module.exports?module.exports=f(require("jquery")):f(jQuery)})(function($){"use strict";function n(a){return!a.nodeName||-1!==$.inArray(a.nodeName.toLowerCase(),["iframe","#document","html","body"])}function h(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}var p=$.scrollTo=function(a,d,b){return $(window).scrollTo(a,d,b)};p.defaults={axis:"xy",duration:0,limit:!0};$.fn.scrollTo=function(a,d,b){"object"=== typeof d&&(b=d,d=0);"function"===typeof b&&(b={onAfter:b});"max"===a&&(a=9E9);b=$.extend({},p.defaults,b);d=d||b.duration;var u=b.queue&&1<b.axis.length;u&&(d/=2);b.offset=h(b.offset);b.over=h(b.over);return this.each(function(){function k(a){var k=$.extend({},b,{queue:!0,duration:d,complete:a&&function(){a.call(q,e,b)}});r.animate(f,k)}if(null!==a){var l=n(this),q=l?this.contentWindow||window:this,r=$(q),e=a,f={},t;switch(typeof e){case "number":case "string":if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(e)){e= h(e);break}e=l?$(e):$(e,q);case "object":if(e.length===0)return;if(e.is||e.style)t=(e=$(e)).offset()}var v=$.isFunction(b.offset)&&b.offset(q,e)||b.offset;$.each(b.axis.split(""),function(a,c){var d="x"===c?"Left":"Top",m=d.toLowerCase(),g="scroll"+d,h=r[g](),n=p.max(q,c);t?(f[g]=t[m]+(l?0:h-r.offset()[m]),b.margin&&(f[g]-=parseInt(e.css("margin"+d),10)||0,f[g]-=parseInt(e.css("border"+d+"Width"),10)||0),f[g]+=v[m]||0,b.over[m]&&(f[g]+=e["x"===c?"width":"height"]()*b.over[m])):(d=e[m],f[g]=d.slice&& "%"===d.slice(-1)?parseFloat(d)/100*n:d);b.limit&&/^\d+$/.test(f[g])&&(f[g]=0>=f[g]?0:Math.min(f[g],n));!a&&1<b.axis.length&&(h===f[g]?f={}:u&&(k(b.onAfterFirst),f={}))});k(b.onAfter)}})};p.max=function(a,d){var b="x"===d?"Width":"Height",h="scroll"+b;if(!n(a))return a[h]-$(a)[b.toLowerCase()]();var b="client"+b,k=a.ownerDocument||a.document,l=k.documentElement,k=k.body;return Math.max(l[h],k[h])-Math.min(l[b],k[b])};$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(a){return $(a.elem)[a.prop]()}, set:function(a){var d=this.get(a);if(a.options.interrupt&&a._last&&a._last!==d)return $(a.elem).stop();var b=Math.round(a.now);d!==b&&($(a.elem)[a.prop](b),a._last=this.get(a))}};return p});
|
||||
4
js/modernizr.custom.js
Normal file
4
js/modernizr.custom.js
Normal file
File diff suppressed because one or more lines are too long
660
js/stellar.js
Normal file
660
js/stellar.js
Normal file
@ -0,0 +1,660 @@
|
||||
/*!
|
||||
* Stellar.js v0.6.2
|
||||
* http://markdalgleish.com/projects/stellar.js
|
||||
*
|
||||
* Copyright 2013, Mark Dalgleish
|
||||
* This content is released under the MIT license
|
||||
* http://markdalgleish.mit-license.org
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
var pluginName = 'stellar',
|
||||
defaults = {
|
||||
scrollProperty: 'scroll',
|
||||
positionProperty: 'position',
|
||||
horizontalScrolling: true,
|
||||
verticalScrolling: true,
|
||||
horizontalOffset: 0,
|
||||
verticalOffset: 0,
|
||||
responsive: false,
|
||||
parallaxBackgrounds: true,
|
||||
parallaxElements: true,
|
||||
hideDistantElements: true,
|
||||
hideElement: function($elem) { $elem.hide(); },
|
||||
showElement: function($elem) { $elem.show(); }
|
||||
},
|
||||
|
||||
scrollProperty = {
|
||||
scroll: {
|
||||
getLeft: function($elem) { return $elem.scrollLeft(); },
|
||||
setLeft: function($elem, val) { $elem.scrollLeft(val); },
|
||||
|
||||
getTop: function($elem) { return $elem.scrollTop(); },
|
||||
setTop: function($elem, val) { $elem.scrollTop(val); }
|
||||
},
|
||||
position: {
|
||||
getLeft: function($elem) { return parseInt($elem.css('left'), 10) * -1; },
|
||||
getTop: function($elem) { return parseInt($elem.css('top'), 10) * -1; }
|
||||
},
|
||||
margin: {
|
||||
getLeft: function($elem) { return parseInt($elem.css('margin-left'), 10) * -1; },
|
||||
getTop: function($elem) { return parseInt($elem.css('margin-top'), 10) * -1; }
|
||||
},
|
||||
transform: {
|
||||
getLeft: function($elem) {
|
||||
var computedTransform = getComputedStyle($elem[0])[prefixedTransform];
|
||||
return (computedTransform !== 'none' ? parseInt(computedTransform.match(/(-?[0-9]+)/g)[4], 10) * -1 : 0);
|
||||
},
|
||||
getTop: function($elem) {
|
||||
var computedTransform = getComputedStyle($elem[0])[prefixedTransform];
|
||||
return (computedTransform !== 'none' ? parseInt(computedTransform.match(/(-?[0-9]+)/g)[5], 10) * -1 : 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
positionProperty = {
|
||||
position: {
|
||||
setLeft: function($elem, left) { $elem.css('left', left); },
|
||||
setTop: function($elem, top) { $elem.css('top', top); }
|
||||
},
|
||||
transform: {
|
||||
setPosition: function($elem, left, startingLeft, top, startingTop) {
|
||||
$elem[0].style[prefixedTransform] = 'translate3d(' + (left - startingLeft) + 'px, ' + (top - startingTop) + 'px, 0)';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Returns a function which adds a vendor prefix to any CSS property name
|
||||
vendorPrefix = (function() {
|
||||
var prefixes = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,
|
||||
style = $('script')[0].style,
|
||||
prefix = '',
|
||||
prop;
|
||||
|
||||
for (prop in style) {
|
||||
if (prefixes.test(prop)) {
|
||||
prefix = prop.match(prefixes)[0];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if ('WebkitOpacity' in style) { prefix = 'Webkit'; }
|
||||
if ('KhtmlOpacity' in style) { prefix = 'Khtml'; }
|
||||
|
||||
return function(property) {
|
||||
return prefix + (prefix.length > 0 ? property.charAt(0).toUpperCase() + property.slice(1) : property);
|
||||
};
|
||||
}()),
|
||||
|
||||
prefixedTransform = vendorPrefix('transform'),
|
||||
|
||||
supportsBackgroundPositionXY = $('<div />', { style: 'background:#fff' }).css('background-position-x') !== undefined,
|
||||
|
||||
setBackgroundPosition = (supportsBackgroundPositionXY ?
|
||||
function($elem, x, y) {
|
||||
$elem.css({
|
||||
'background-position-x': x,
|
||||
'background-position-y': y
|
||||
});
|
||||
} :
|
||||
function($elem, x, y) {
|
||||
$elem.css('background-position', x + ' ' + y);
|
||||
}
|
||||
),
|
||||
|
||||
getBackgroundPosition = (supportsBackgroundPositionXY ?
|
||||
function($elem) {
|
||||
return [
|
||||
$elem.css('background-position-x'),
|
||||
$elem.css('background-position-y')
|
||||
];
|
||||
} :
|
||||
function($elem) {
|
||||
return $elem.css('background-position').split(' ');
|
||||
}
|
||||
),
|
||||
|
||||
requestAnimFrame = (
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback) {
|
||||
setTimeout(callback, 1000 / 60);
|
||||
}
|
||||
);
|
||||
|
||||
function Plugin(element, options) {
|
||||
this.element = element;
|
||||
this.options = $.extend({}, defaults, options);
|
||||
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
Plugin.prototype = {
|
||||
init: function() {
|
||||
this.options.name = pluginName + '_' + Math.floor(Math.random() * 1e9);
|
||||
|
||||
this._defineElements();
|
||||
this._defineGetters();
|
||||
this._defineSetters();
|
||||
this._handleWindowLoadAndResize();
|
||||
this._detectViewport();
|
||||
|
||||
this.refresh({ firstLoad: true });
|
||||
|
||||
if (this.options.scrollProperty === 'scroll') {
|
||||
this._handleScrollEvent();
|
||||
} else {
|
||||
this._startAnimationLoop();
|
||||
}
|
||||
},
|
||||
_defineElements: function() {
|
||||
if (this.element === document.body) this.element = window;
|
||||
this.$scrollElement = $(this.element);
|
||||
this.$element = (this.element === window ? $('body') : this.$scrollElement);
|
||||
this.$viewportElement = (this.options.viewportElement !== undefined ? $(this.options.viewportElement) : (this.$scrollElement[0] === window || this.options.scrollProperty === 'scroll' ? this.$scrollElement : this.$scrollElement.parent()) );
|
||||
},
|
||||
_defineGetters: function() {
|
||||
var self = this,
|
||||
scrollPropertyAdapter = scrollProperty[self.options.scrollProperty];
|
||||
|
||||
this._getScrollLeft = function() {
|
||||
return scrollPropertyAdapter.getLeft(self.$scrollElement);
|
||||
};
|
||||
|
||||
this._getScrollTop = function() {
|
||||
return scrollPropertyAdapter.getTop(self.$scrollElement);
|
||||
};
|
||||
},
|
||||
_defineSetters: function() {
|
||||
var self = this,
|
||||
scrollPropertyAdapter = scrollProperty[self.options.scrollProperty],
|
||||
positionPropertyAdapter = positionProperty[self.options.positionProperty],
|
||||
setScrollLeft = scrollPropertyAdapter.setLeft,
|
||||
setScrollTop = scrollPropertyAdapter.setTop;
|
||||
|
||||
this._setScrollLeft = (typeof setScrollLeft === 'function' ? function(val) {
|
||||
setScrollLeft(self.$scrollElement, val);
|
||||
} : $.noop);
|
||||
|
||||
this._setScrollTop = (typeof setScrollTop === 'function' ? function(val) {
|
||||
setScrollTop(self.$scrollElement, val);
|
||||
} : $.noop);
|
||||
|
||||
this._setPosition = positionPropertyAdapter.setPosition ||
|
||||
function($elem, left, startingLeft, top, startingTop) {
|
||||
if (self.options.horizontalScrolling) {
|
||||
positionPropertyAdapter.setLeft($elem, left, startingLeft);
|
||||
}
|
||||
|
||||
if (self.options.verticalScrolling) {
|
||||
positionPropertyAdapter.setTop($elem, top, startingTop);
|
||||
}
|
||||
};
|
||||
},
|
||||
_handleWindowLoadAndResize: function() {
|
||||
var self = this,
|
||||
$window = $(window);
|
||||
|
||||
if (self.options.responsive) {
|
||||
$window.bind('load.' + this.name, function() {
|
||||
self.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
$window.bind('resize.' + this.name, function() {
|
||||
self._detectViewport();
|
||||
|
||||
if (self.options.responsive) {
|
||||
self.refresh();
|
||||
}
|
||||
});
|
||||
},
|
||||
refresh: function(options) {
|
||||
var self = this,
|
||||
oldLeft = self._getScrollLeft(),
|
||||
oldTop = self._getScrollTop();
|
||||
|
||||
if (!options || !options.firstLoad) {
|
||||
this._reset();
|
||||
}
|
||||
|
||||
this._setScrollLeft(0);
|
||||
this._setScrollTop(0);
|
||||
|
||||
this._setOffsets();
|
||||
this._findParticles();
|
||||
this._findBackgrounds();
|
||||
|
||||
// Fix for WebKit background rendering bug
|
||||
if (options && options.firstLoad && /WebKit/.test(navigator.userAgent)) {
|
||||
$(window).load(function() {
|
||||
var oldLeft = self._getScrollLeft(),
|
||||
oldTop = self._getScrollTop();
|
||||
|
||||
self._setScrollLeft(oldLeft + 1);
|
||||
self._setScrollTop(oldTop + 1);
|
||||
|
||||
self._setScrollLeft(oldLeft);
|
||||
self._setScrollTop(oldTop);
|
||||
});
|
||||
}
|
||||
|
||||
this._setScrollLeft(oldLeft);
|
||||
this._setScrollTop(oldTop);
|
||||
},
|
||||
_detectViewport: function() {
|
||||
var viewportOffsets = this.$viewportElement.offset(),
|
||||
hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;
|
||||
|
||||
this.viewportWidth = this.$viewportElement.width();
|
||||
this.viewportHeight = this.$viewportElement.height();
|
||||
|
||||
this.viewportOffsetTop = (hasOffsets ? viewportOffsets.top : 0);
|
||||
this.viewportOffsetLeft = (hasOffsets ? viewportOffsets.left : 0);
|
||||
},
|
||||
_findParticles: function() {
|
||||
var self = this,
|
||||
scrollLeft = this._getScrollLeft(),
|
||||
scrollTop = this._getScrollTop();
|
||||
|
||||
if (this.particles !== undefined) {
|
||||
for (var i = this.particles.length - 1; i >= 0; i--) {
|
||||
this.particles[i].$element.data('stellar-elementIsActive', undefined);
|
||||
}
|
||||
}
|
||||
|
||||
this.particles = [];
|
||||
|
||||
if (!this.options.parallaxElements) return;
|
||||
|
||||
this.$element.find('[data-stellar-ratio]').each(function(i) {
|
||||
var $this = $(this),
|
||||
horizontalOffset,
|
||||
verticalOffset,
|
||||
positionLeft,
|
||||
positionTop,
|
||||
marginLeft,
|
||||
marginTop,
|
||||
$offsetParent,
|
||||
offsetLeft,
|
||||
offsetTop,
|
||||
parentOffsetLeft = 0,
|
||||
parentOffsetTop = 0,
|
||||
tempParentOffsetLeft = 0,
|
||||
tempParentOffsetTop = 0;
|
||||
|
||||
// Ensure this element isn't already part of another scrolling element
|
||||
if (!$this.data('stellar-elementIsActive')) {
|
||||
$this.data('stellar-elementIsActive', this);
|
||||
} else if ($this.data('stellar-elementIsActive') !== this) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.options.showElement($this);
|
||||
|
||||
// Save/restore the original top and left CSS values in case we refresh the particles or destroy the instance
|
||||
if (!$this.data('stellar-startingLeft')) {
|
||||
$this.data('stellar-startingLeft', $this.css('left'));
|
||||
$this.data('stellar-startingTop', $this.css('top'));
|
||||
} else {
|
||||
$this.css('left', $this.data('stellar-startingLeft'));
|
||||
$this.css('top', $this.data('stellar-startingTop'));
|
||||
}
|
||||
|
||||
positionLeft = $this.position().left;
|
||||
positionTop = $this.position().top;
|
||||
|
||||
// Catch-all for margin top/left properties (these evaluate to 'auto' in IE7 and IE8)
|
||||
marginLeft = ($this.css('margin-left') === 'auto') ? 0 : parseInt($this.css('margin-left'), 10);
|
||||
marginTop = ($this.css('margin-top') === 'auto') ? 0 : parseInt($this.css('margin-top'), 10);
|
||||
|
||||
offsetLeft = $this.offset().left - marginLeft;
|
||||
offsetTop = $this.offset().top - marginTop;
|
||||
|
||||
// Calculate the offset parent
|
||||
$this.parents().each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
if ($this.data('stellar-offset-parent') === true) {
|
||||
parentOffsetLeft = tempParentOffsetLeft;
|
||||
parentOffsetTop = tempParentOffsetTop;
|
||||
$offsetParent = $this;
|
||||
|
||||
return false;
|
||||
} else {
|
||||
tempParentOffsetLeft += $this.position().left;
|
||||
tempParentOffsetTop += $this.position().top;
|
||||
}
|
||||
});
|
||||
|
||||
// Detect the offsets
|
||||
horizontalOffset = ($this.data('stellar-horizontal-offset') !== undefined ? $this.data('stellar-horizontal-offset') : ($offsetParent !== undefined && $offsetParent.data('stellar-horizontal-offset') !== undefined ? $offsetParent.data('stellar-horizontal-offset') : self.horizontalOffset));
|
||||
verticalOffset = ($this.data('stellar-vertical-offset') !== undefined ? $this.data('stellar-vertical-offset') : ($offsetParent !== undefined && $offsetParent.data('stellar-vertical-offset') !== undefined ? $offsetParent.data('stellar-vertical-offset') : self.verticalOffset));
|
||||
|
||||
// Add our object to the particles collection
|
||||
self.particles.push({
|
||||
$element: $this,
|
||||
$offsetParent: $offsetParent,
|
||||
isFixed: $this.css('position') === 'fixed',
|
||||
horizontalOffset: horizontalOffset,
|
||||
verticalOffset: verticalOffset,
|
||||
startingPositionLeft: positionLeft,
|
||||
startingPositionTop: positionTop,
|
||||
startingOffsetLeft: offsetLeft,
|
||||
startingOffsetTop: offsetTop,
|
||||
parentOffsetLeft: parentOffsetLeft,
|
||||
parentOffsetTop: parentOffsetTop,
|
||||
stellarRatio: ($this.data('stellar-ratio') !== undefined ? $this.data('stellar-ratio') : 1),
|
||||
width: $this.outerWidth(true),
|
||||
height: $this.outerHeight(true),
|
||||
isHidden: false
|
||||
});
|
||||
});
|
||||
},
|
||||
_findBackgrounds: function() {
|
||||
var self = this,
|
||||
scrollLeft = this._getScrollLeft(),
|
||||
scrollTop = this._getScrollTop(),
|
||||
$backgroundElements;
|
||||
|
||||
this.backgrounds = [];
|
||||
|
||||
if (!this.options.parallaxBackgrounds) return;
|
||||
|
||||
$backgroundElements = this.$element.find('[data-stellar-background-ratio]');
|
||||
|
||||
if (this.$element.data('stellar-background-ratio')) {
|
||||
$backgroundElements = $backgroundElements.add(this.$element);
|
||||
}
|
||||
|
||||
$backgroundElements.each(function() {
|
||||
var $this = $(this),
|
||||
backgroundPosition = getBackgroundPosition($this),
|
||||
horizontalOffset,
|
||||
verticalOffset,
|
||||
positionLeft,
|
||||
positionTop,
|
||||
marginLeft,
|
||||
marginTop,
|
||||
offsetLeft,
|
||||
offsetTop,
|
||||
$offsetParent,
|
||||
parentOffsetLeft = 0,
|
||||
parentOffsetTop = 0,
|
||||
tempParentOffsetLeft = 0,
|
||||
tempParentOffsetTop = 0;
|
||||
|
||||
// Ensure this element isn't already part of another scrolling element
|
||||
if (!$this.data('stellar-backgroundIsActive')) {
|
||||
$this.data('stellar-backgroundIsActive', this);
|
||||
} else if ($this.data('stellar-backgroundIsActive') !== this) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Save/restore the original top and left CSS values in case we destroy the instance
|
||||
if (!$this.data('stellar-backgroundStartingLeft')) {
|
||||
$this.data('stellar-backgroundStartingLeft', backgroundPosition[0]);
|
||||
$this.data('stellar-backgroundStartingTop', backgroundPosition[1]);
|
||||
} else {
|
||||
setBackgroundPosition($this, $this.data('stellar-backgroundStartingLeft'), $this.data('stellar-backgroundStartingTop'));
|
||||
}
|
||||
|
||||
// Catch-all for margin top/left properties (these evaluate to 'auto' in IE7 and IE8)
|
||||
marginLeft = ($this.css('margin-left') === 'auto') ? 0 : parseInt($this.css('margin-left'), 10);
|
||||
marginTop = ($this.css('margin-top') === 'auto') ? 0 : parseInt($this.css('margin-top'), 10);
|
||||
|
||||
offsetLeft = $this.offset().left - marginLeft - scrollLeft;
|
||||
offsetTop = $this.offset().top - marginTop - scrollTop;
|
||||
|
||||
// Calculate the offset parent
|
||||
$this.parents().each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
if ($this.data('stellar-offset-parent') === true) {
|
||||
parentOffsetLeft = tempParentOffsetLeft;
|
||||
parentOffsetTop = tempParentOffsetTop;
|
||||
$offsetParent = $this;
|
||||
|
||||
return false;
|
||||
} else {
|
||||
tempParentOffsetLeft += $this.position().left;
|
||||
tempParentOffsetTop += $this.position().top;
|
||||
}
|
||||
});
|
||||
|
||||
// Detect the offsets
|
||||
horizontalOffset = ($this.data('stellar-horizontal-offset') !== undefined ? $this.data('stellar-horizontal-offset') : ($offsetParent !== undefined && $offsetParent.data('stellar-horizontal-offset') !== undefined ? $offsetParent.data('stellar-horizontal-offset') : self.horizontalOffset));
|
||||
verticalOffset = ($this.data('stellar-vertical-offset') !== undefined ? $this.data('stellar-vertical-offset') : ($offsetParent !== undefined && $offsetParent.data('stellar-vertical-offset') !== undefined ? $offsetParent.data('stellar-vertical-offset') : self.verticalOffset));
|
||||
|
||||
self.backgrounds.push({
|
||||
$element: $this,
|
||||
$offsetParent: $offsetParent,
|
||||
isFixed: $this.css('background-attachment') === 'fixed',
|
||||
horizontalOffset: horizontalOffset,
|
||||
verticalOffset: verticalOffset,
|
||||
startingValueLeft: backgroundPosition[0],
|
||||
startingValueTop: backgroundPosition[1],
|
||||
startingBackgroundPositionLeft: (isNaN(parseInt(backgroundPosition[0], 10)) ? 0 : parseInt(backgroundPosition[0], 10)),
|
||||
startingBackgroundPositionTop: (isNaN(parseInt(backgroundPosition[1], 10)) ? 0 : parseInt(backgroundPosition[1], 10)),
|
||||
startingPositionLeft: $this.position().left,
|
||||
startingPositionTop: $this.position().top,
|
||||
startingOffsetLeft: offsetLeft,
|
||||
startingOffsetTop: offsetTop,
|
||||
parentOffsetLeft: parentOffsetLeft,
|
||||
parentOffsetTop: parentOffsetTop,
|
||||
stellarRatio: ($this.data('stellar-background-ratio') === undefined ? 1 : $this.data('stellar-background-ratio'))
|
||||
});
|
||||
});
|
||||
},
|
||||
_reset: function() {
|
||||
var particle,
|
||||
startingPositionLeft,
|
||||
startingPositionTop,
|
||||
background,
|
||||
i;
|
||||
|
||||
for (i = this.particles.length - 1; i >= 0; i--) {
|
||||
particle = this.particles[i];
|
||||
startingPositionLeft = particle.$element.data('stellar-startingLeft');
|
||||
startingPositionTop = particle.$element.data('stellar-startingTop');
|
||||
|
||||
this._setPosition(particle.$element, startingPositionLeft, startingPositionLeft, startingPositionTop, startingPositionTop);
|
||||
|
||||
this.options.showElement(particle.$element);
|
||||
|
||||
particle.$element.data('stellar-startingLeft', null).data('stellar-elementIsActive', null).data('stellar-backgroundIsActive', null);
|
||||
}
|
||||
|
||||
for (i = this.backgrounds.length - 1; i >= 0; i--) {
|
||||
background = this.backgrounds[i];
|
||||
|
||||
background.$element.data('stellar-backgroundStartingLeft', null).data('stellar-backgroundStartingTop', null);
|
||||
|
||||
setBackgroundPosition(background.$element, background.startingValueLeft, background.startingValueTop);
|
||||
}
|
||||
},
|
||||
destroy: function() {
|
||||
this._reset();
|
||||
|
||||
this.$scrollElement.unbind('resize.' + this.name).unbind('scroll.' + this.name);
|
||||
this._animationLoop = $.noop;
|
||||
|
||||
$(window).unbind('load.' + this.name).unbind('resize.' + this.name);
|
||||
},
|
||||
_setOffsets: function() {
|
||||
var self = this,
|
||||
$window = $(window);
|
||||
|
||||
$window.unbind('resize.horizontal-' + this.name).unbind('resize.vertical-' + this.name);
|
||||
|
||||
if (typeof this.options.horizontalOffset === 'function') {
|
||||
this.horizontalOffset = this.options.horizontalOffset();
|
||||
$window.bind('resize.horizontal-' + this.name, function() {
|
||||
self.horizontalOffset = self.options.horizontalOffset();
|
||||
});
|
||||
} else {
|
||||
this.horizontalOffset = this.options.horizontalOffset;
|
||||
}
|
||||
|
||||
if (typeof this.options.verticalOffset === 'function') {
|
||||
this.verticalOffset = this.options.verticalOffset();
|
||||
$window.bind('resize.vertical-' + this.name, function() {
|
||||
self.verticalOffset = self.options.verticalOffset();
|
||||
});
|
||||
} else {
|
||||
this.verticalOffset = this.options.verticalOffset;
|
||||
}
|
||||
},
|
||||
_repositionElements: function() {
|
||||
var scrollLeft = this._getScrollLeft(),
|
||||
scrollTop = this._getScrollTop(),
|
||||
horizontalOffset,
|
||||
verticalOffset,
|
||||
particle,
|
||||
fixedRatioOffset,
|
||||
background,
|
||||
bgLeft,
|
||||
bgTop,
|
||||
isVisibleVertical = true,
|
||||
isVisibleHorizontal = true,
|
||||
newPositionLeft,
|
||||
newPositionTop,
|
||||
newOffsetLeft,
|
||||
newOffsetTop,
|
||||
i;
|
||||
|
||||
// First check that the scroll position or container size has changed
|
||||
if (this.currentScrollLeft === scrollLeft && this.currentScrollTop === scrollTop && this.currentWidth === this.viewportWidth && this.currentHeight === this.viewportHeight) {
|
||||
return;
|
||||
} else {
|
||||
this.currentScrollLeft = scrollLeft;
|
||||
this.currentScrollTop = scrollTop;
|
||||
this.currentWidth = this.viewportWidth;
|
||||
this.currentHeight = this.viewportHeight;
|
||||
}
|
||||
|
||||
// Reposition elements
|
||||
for (i = this.particles.length - 1; i >= 0; i--) {
|
||||
particle = this.particles[i];
|
||||
|
||||
fixedRatioOffset = (particle.isFixed ? 1 : 0);
|
||||
|
||||
// Calculate position, then calculate what the particle's new offset will be (for visibility check)
|
||||
if (this.options.horizontalScrolling) {
|
||||
newPositionLeft = (scrollLeft + particle.horizontalOffset + this.viewportOffsetLeft + particle.startingPositionLeft - particle.startingOffsetLeft + particle.parentOffsetLeft) * -(particle.stellarRatio + fixedRatioOffset - 1) + particle.startingPositionLeft;
|
||||
newOffsetLeft = newPositionLeft - particle.startingPositionLeft + particle.startingOffsetLeft;
|
||||
} else {
|
||||
newPositionLeft = particle.startingPositionLeft;
|
||||
newOffsetLeft = particle.startingOffsetLeft;
|
||||
}
|
||||
|
||||
if (this.options.verticalScrolling) {
|
||||
newPositionTop = (scrollTop + particle.verticalOffset + this.viewportOffsetTop + particle.startingPositionTop - particle.startingOffsetTop + particle.parentOffsetTop) * -(particle.stellarRatio + fixedRatioOffset - 1) + particle.startingPositionTop;
|
||||
newOffsetTop = newPositionTop - particle.startingPositionTop + particle.startingOffsetTop;
|
||||
} else {
|
||||
newPositionTop = particle.startingPositionTop;
|
||||
newOffsetTop = particle.startingOffsetTop;
|
||||
}
|
||||
|
||||
// Check visibility
|
||||
if (this.options.hideDistantElements) {
|
||||
isVisibleHorizontal = !this.options.horizontalScrolling || newOffsetLeft + particle.width > (particle.isFixed ? 0 : scrollLeft) && newOffsetLeft < (particle.isFixed ? 0 : scrollLeft) + this.viewportWidth + this.viewportOffsetLeft;
|
||||
isVisibleVertical = !this.options.verticalScrolling || newOffsetTop + particle.height > (particle.isFixed ? 0 : scrollTop) && newOffsetTop < (particle.isFixed ? 0 : scrollTop) + this.viewportHeight + this.viewportOffsetTop;
|
||||
}
|
||||
|
||||
if (isVisibleHorizontal && isVisibleVertical) {
|
||||
if (particle.isHidden) {
|
||||
this.options.showElement(particle.$element);
|
||||
particle.isHidden = false;
|
||||
}
|
||||
|
||||
this._setPosition(particle.$element, newPositionLeft, particle.startingPositionLeft, newPositionTop, particle.startingPositionTop);
|
||||
} else {
|
||||
if (!particle.isHidden) {
|
||||
this.options.hideElement(particle.$element);
|
||||
particle.isHidden = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reposition backgrounds
|
||||
for (i = this.backgrounds.length - 1; i >= 0; i--) {
|
||||
background = this.backgrounds[i];
|
||||
|
||||
fixedRatioOffset = (background.isFixed ? 0 : 1);
|
||||
bgLeft = (this.options.horizontalScrolling ? (scrollLeft + background.horizontalOffset - this.viewportOffsetLeft - background.startingOffsetLeft + background.parentOffsetLeft - background.startingBackgroundPositionLeft) * (fixedRatioOffset - background.stellarRatio) + 'px' : background.startingValueLeft);
|
||||
bgTop = (this.options.verticalScrolling ? (scrollTop + background.verticalOffset - this.viewportOffsetTop - background.startingOffsetTop + background.parentOffsetTop - background.startingBackgroundPositionTop) * (fixedRatioOffset - background.stellarRatio) + 'px' : background.startingValueTop);
|
||||
|
||||
setBackgroundPosition(background.$element, bgLeft, bgTop);
|
||||
}
|
||||
},
|
||||
_handleScrollEvent: function() {
|
||||
var self = this,
|
||||
ticking = false;
|
||||
|
||||
var update = function() {
|
||||
self._repositionElements();
|
||||
ticking = false;
|
||||
};
|
||||
|
||||
var requestTick = function() {
|
||||
if (!ticking) {
|
||||
requestAnimFrame(update);
|
||||
ticking = true;
|
||||
}
|
||||
};
|
||||
|
||||
this.$scrollElement.bind('scroll.' + this.name, requestTick);
|
||||
requestTick();
|
||||
},
|
||||
_startAnimationLoop: function() {
|
||||
var self = this;
|
||||
|
||||
this._animationLoop = function() {
|
||||
requestAnimFrame(self._animationLoop);
|
||||
self._repositionElements();
|
||||
};
|
||||
this._animationLoop();
|
||||
}
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function (options) {
|
||||
var args = arguments;
|
||||
if (options === undefined || typeof options === 'object') {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, 'plugin_' + pluginName)) {
|
||||
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
|
||||
}
|
||||
});
|
||||
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
||||
return this.each(function () {
|
||||
var instance = $.data(this, 'plugin_' + pluginName);
|
||||
if (instance instanceof Plugin && typeof instance[options] === 'function') {
|
||||
instance[options].apply(instance, Array.prototype.slice.call(args, 1));
|
||||
}
|
||||
if (options === 'destroy') {
|
||||
$.data(this, 'plugin_' + pluginName, null);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$[pluginName] = function(options) {
|
||||
var $window = $(window);
|
||||
return $window.stellar.apply($window, Array.prototype.slice.call(arguments, 0));
|
||||
};
|
||||
|
||||
// Expose the scroll and position property function hashes so they can be extended
|
||||
$[pluginName].scrollProperty = scrollProperty;
|
||||
$[pluginName].positionProperty = positionProperty;
|
||||
|
||||
// Expose the plugin class so it can be modified
|
||||
window.Stellar = Plugin;
|
||||
}(jQuery, this, document));
|
||||
3
js/wow.min.js
vendored
Normal file
3
js/wow.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
telegramLogo.png
BIN
telegramLogo.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Loading…
x
Reference in New Issue
Block a user