Refactoring of main page
This commit is contained in:
parent
b23cce0447
commit
a4eb32d6f0
GPG Key ID:
C4B28FD2729941CE
292
css/style.css
292
css/style.css
@ -1,214 +1,218 @@
|
||||
/* Global */
|
||||
|
||||
body {
|
||||
html {
|
||||
font-family: 'arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
color: #8a8683;
|
||||
background-color:#000000;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
/* global items */
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: yellow;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: white;
|
||||
background-color:black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color:yellow;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
/* Header */
|
||||
|
||||
.menu {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
width:100%;
|
||||
height:auto;
|
||||
z-index:100;
|
||||
background-color:black;
|
||||
}
|
||||
#logo {
|
||||
text-align: left;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#nav {
|
||||
text-align: right;
|
||||
margin: 30px 0 0 0;
|
||||
}
|
||||
.navigation{
|
||||
float: right;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.navigation li{
|
||||
float: left;
|
||||
padding:0 0 0 50px;
|
||||
color:yellow;
|
||||
}
|
||||
.navigation li:hover{
|
||||
cursor:pointer;
|
||||
color: yellow;
|
||||
#main-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
|
||||
gap: 15px;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.navigation .active{
|
||||
cursor:pointer;
|
||||
color: yellow;
|
||||
#main-header > nav {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* General Slides */
|
||||
@media screen and (max-width: 600px) {
|
||||
#main-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide{
|
||||
background-color:rgba(0,0,0,0.7);
|
||||
background-attachment: fixed;
|
||||
width:100%;
|
||||
height:auto;
|
||||
position: relative;
|
||||
top:85px;
|
||||
#main-header > nav {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
#bgvid {
|
||||
position:fixed;
|
||||
width:100%;
|
||||
z-index: -500;
|
||||
/* main area */
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
grid-auto-rows: min-content;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Slide 1 */
|
||||
|
||||
#slide1{
|
||||
}
|
||||
#slide1 h1 {
|
||||
font-size: 3.8em;
|
||||
letter-spacing: -3px;
|
||||
line-height: 0px;
|
||||
color:#8a8683;
|
||||
font-weight: 700;
|
||||
}
|
||||
#slide1 h2 {
|
||||
font-size: 2em;
|
||||
color: #8a8683;
|
||||
line-height: 0px;
|
||||
padding-bottom:20px;
|
||||
font-weight: 400;
|
||||
main > section {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.button{
|
||||
color:#fff;
|
||||
background-color:#000;
|
||||
font-family:'arial';
|
||||
main aside {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.text{
|
||||
background-color:#fff;
|
||||
font-family:'arial';
|
||||
main .toolbar {
|
||||
grid-column: 1 / 3;
|
||||
padding: 0 10px;
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.icons{
|
||||
width:100px;
|
||||
float:right;
|
||||
@media screen and (max-width: 889px){
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
main > aside {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
main .toolbar {
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
|
||||
.ecosysteme{
|
||||
width:50px;
|
||||
main .toolbar button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
#logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
main .toolbar button img {
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width:100%;
|
||||
margin:10px 0;
|
||||
main .toolbar button img[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation{
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
/* description */
|
||||
|
||||
#description {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.navigation li{
|
||||
float: left;
|
||||
width:25%;
|
||||
padding:0;
|
||||
#description > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.slide{
|
||||
background-attachment: fixed;
|
||||
width:100%;
|
||||
position: relative;
|
||||
padding:140px 0 0 0;
|
||||
.hackerspace-logo {
|
||||
float: right;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#decorative {
|
||||
display:none;
|
||||
#description marquee {
|
||||
height:25px;
|
||||
max-width:400px;
|
||||
background-color:none;
|
||||
font-family:arial;
|
||||
font-size:12pt;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
#content {
|
||||
text-align:center;
|
||||
width:100%;
|
||||
/* side */
|
||||
|
||||
#main-side h2 {
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#slide1 h1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
#slide1 h2 {
|
||||
line-height: 1em;
|
||||
#main-side address {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
#logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
#main-side .info > * {
|
||||
margin: 1.33em 0;
|
||||
font-weight: bold;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width:100%;
|
||||
margin:5px 0;
|
||||
@media screen and (max-width: 889px){
|
||||
#main-side {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation{
|
||||
width: 100%;
|
||||
float: left;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
/* background */
|
||||
|
||||
#background {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navigation li{
|
||||
float: left;
|
||||
width:25%;
|
||||
#background img, #background video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.slide{
|
||||
background-attachment: fixed;
|
||||
width:100%;
|
||||
position: relative;
|
||||
padding:150px 0;
|
||||
#background img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: linear 1s opacity;
|
||||
}
|
||||
|
||||
#slide1 h1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
#slide1 h2 {
|
||||
line-height: 1em;
|
||||
#background img[hidden]{
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#slide1{
|
||||
|
||||
text-align:justify;
|
||||
}
|
||||
#background::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to top, black, rgba(0,0,0,0));
|
||||
}
|
||||
54
images/pause.svg
Normal file
54
images/pause.svg
Normal file
@ -0,0 +1,54 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
height="48"
|
||||
viewBox="0 -960 960 960"
|
||||
width="48"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="pause.svg"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="987"
|
||||
inkscape:window-height="931"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="14"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="24"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="m 555,-200 v -560 h 175 v 560 z m -325,0 v -560 h 175 v 560 z"
|
||||
id="path2"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.999999" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
54
images/play.svg
Normal file
54
images/play.svg
Normal file
@ -0,0 +1,54 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
height="48"
|
||||
viewBox="0 -960 960 960"
|
||||
width="48"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="play.svg"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="987"
|
||||
inkscape:window-height="931"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="14"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="24"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="m 320,-203 v -560 l 440,280 z"
|
||||
id="path2"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.999999" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
132
index.html
132
index.html
@ -1,83 +1,77 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
|
||||
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
|
||||
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
|
||||
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
|
||||
|
||||
<style>
|
||||
#background {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
</head>
|
||||
|
||||
<video autoplay loop poster="images/world_network.jpg" id="bgvid">
|
||||
<source src="videos/background_sound.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="menu">
|
||||
<div class="container clearfix">
|
||||
<div id="logo" class="grid_3">
|
||||
<img src="images/logo_picto.svg">
|
||||
</div>
|
||||
<div id="nav" class="grid_9 omega">
|
||||
<a href="https://git.labolyon.fr/explore/repos ">Wiki/Git</a>
|
||||
</div>
|
||||
<div id="nav" class="grid_9 omega">
|
||||
<a href="iban.pdf">Donations/Cotisations</a>
|
||||
</div>
|
||||
|
||||
<div id="background">
|
||||
<video src="/videos/background_sound.mp4" loop poster="images/world_network.jpg" autoplay id="background-video" loading="lazy"></video>
|
||||
<img src="/images/world_network.jpg" aria-hidden="true" id="background-poster"/>
|
||||
</div>
|
||||
|
||||
<header id="main-header">
|
||||
<img class="logo" src="images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
|
||||
|
||||
<nav>
|
||||
<a href="https://git.labolyon.fr/explore/repos ">Wiki/Git</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="description">
|
||||
<p>Le Laboratoire ouvert lyonnais est un lieu de brassage et une communauté éclectique.
|
||||
Son objectif est le partage des connaissances et la ré-appropriation des technologies.
|
||||
Chacun-e amène son savoir-faire et son envie d'apprendre dans un mélange ludique de création et de convivialité.
|
||||
Le L.O.L. est l'expression du mouvement global des hackerspaces sur Lyon et
|
||||
se veut ouvert aux échanges, aux collaborations avec d'autres initiatives.</p>
|
||||
|
||||
<p>L'électronique, l'informatique, la mécanique, la chimie, les arts numériques, la cuisine expérimentale sont les pratiques des loliens.
|
||||
Les diverses manières d'implication du collectif dans des multiples initiatives et événements permet à celui-ci, dans le temps, de s'adapter à son écosystème.</p>
|
||||
|
||||
<p>L'une des vocations du LOL est de fournir à ses membres un lieu pour héberger leurs projets ainsi que d'organiser des présentations publiques et des ateliers autonomisants.</p>
|
||||
|
||||
<p>
|
||||
<a href="https://hackerspaces.org/" class="hackerspace-logo"><img class="icons" src="images/logo_hackerspaces_monde.png"></a>
|
||||
<marquee direction="left" behavior="scroll" scrollamount="3">none of us is smarter than all of us - nul n'est plus intelligent-e que nous tou-te-s réunis</marquee>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<aside id="main-side">
|
||||
<h2>Informations</h2>
|
||||
<section class="info">
|
||||
<div>Permanence : mardis à partir de 19h00</div>
|
||||
<div>Adresse : <address>7 Place Louis Chazette 69001 Lyon</address></div>
|
||||
</section>
|
||||
|
||||
<h2>Canaux</h2>
|
||||
<section>
|
||||
<p>IRC : canal #labolyon sur <a href="http://geeknode.org/">irc.geeknode.org</a> : besoin d'aide sur IRC? <a href=" http://www.irchelp.org">voir IRC Help</a></p>
|
||||
<p><a href=" https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a></p>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
|
||||
<div class="toolbar">
|
||||
<button id="play-background" hidden>
|
||||
<img src="/images/play.svg" alt="Play" class="play" title="Play" />
|
||||
<img src="/images/pause.svg" alt="Pause" class="pause" hidden title="Pause" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
|
||||
<div class="container clearfix">
|
||||
<div id="content" class="grid_7">
|
||||
<p>
|
||||
Le Laboratoire ouvert lyonnais est un lieu de brassage et une communauté éclectique.
|
||||
Son objectif est le partage des connaissances et la ré-appropriation des technologies.
|
||||
Chacun-e amène son savoir-faire et son envie d'apprendre dans un mélange ludique de création et de convivialité.
|
||||
Le L.O.L. est l'expression du mouvement global des hackerspaces sur Lyon et
|
||||
se veut ouvert aux échanges, aux collaborations avec d'autres initiatives.
|
||||
</p>
|
||||
<p>
|
||||
L'électronique, l'informatique, la mécanique, la chimie, les arts numériques, la cuisine expérimentale sont les pratiques des loliens. Les diverses manières d'implication du collectif dans des multiples initiatives et événements permet à celui-ci, dans le temps, de s'adapter à son écosystème.
|
||||
</p>
|
||||
<p>
|
||||
L'une des vocations du LOL est de fournir à ses membres
|
||||
un lieu pour héberger leurs projets ainsi que d'organiser des présentations publiques et des ateliers autonomisants.</p>
|
||||
<p><a href="https://hackerspaces.org/"><img class="icons" src="images/logo_hackerspaces_monde.png"></a></p>
|
||||
<marquee direction="left" behavior="scroll" scrollamount="3" style="height:25px;width:400px;background-color:none;font-family:arial;font-size:12pt;color:#ffffff;" >none of us is smarter than all of us - nul n'est plus intelligent-e que nous tou-te-s réunis</marquee>
|
||||
</div>
|
||||
|
||||
<div id="content" class="grid_5 omega">
|
||||
<h3>Informations</h3>
|
||||
<div>
|
||||
<h4>Permanence : mardis à partir de 19h00</h4>
|
||||
<h4>Adresse : 7 Place Louis Chazette 69001 Lyon</h4>
|
||||
</div>
|
||||
<h3>Canaux</h3>
|
||||
<div>
|
||||
<p>IRC : canal #labolyon sur <a href="http://geeknode.org/">irc.geeknode.org</a> : besoin d'aide sur IRC? <a href=" http://www.irchelp.org">voir IRC Help</a></p>
|
||||
<p><a href=" https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
|
||||
<script type="text/javascript" src="js/waypoints.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
|
||||
<script type="text/javascript" src="js/scripts.js"></script>
|
||||
<!-- <script type="text/javascript" src="js/scripts.min.js"></script> -->
|
||||
<script src="js/background.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
32
js/background.js
Normal file
32
js/background.js
Normal file
@ -0,0 +1,32 @@
|
||||
(function(){
|
||||
|
||||
var btn = document.getElementById("play-background");
|
||||
/** @type {HTMLVideoElement} */
|
||||
var video = document.getElementById("background-video");
|
||||
var poster = document.getElementById("background-poster");
|
||||
|
||||
btn.hidden = false
|
||||
|
||||
btn.addEventListener("click", function(e) {
|
||||
e.preventDefault()
|
||||
|
||||
if(btn.classList.contains("playing")) {
|
||||
video.pause();
|
||||
} else {
|
||||
video.play()
|
||||
}
|
||||
})
|
||||
|
||||
video.addEventListener("pause", function(e) {
|
||||
btn.querySelector(".play").hidden = false;
|
||||
btn.querySelector(".pause").hidden = true;
|
||||
btn.classList.remove("playing")
|
||||
})
|
||||
|
||||
video.addEventListener("play", function(e) {
|
||||
btn.querySelector(".play").hidden = true;
|
||||
btn.querySelector(".pause").hidden = false;
|
||||
poster.hidden = true;
|
||||
btn.classList.add("playing")
|
||||
})
|
||||
})()
|
||||
@ -1,205 +0,0 @@
|
||||
/*
|
||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
*
|
||||
* Uses the built in easing capabilities added In jQuery 1.1
|
||||
* to offer multiple easing options
|
||||
*
|
||||
* TERMS OF USE - jQuery Easing
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2008 George McGinley Smith
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
jQuery.easing['jswing'] = jQuery.easing['swing'];
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
swing: function (x, t, b, c, d) {
|
||||
//alert(jQuery.easing.default);
|
||||
return jQuery.easing[jQuery.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;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var 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;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var 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;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.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 )*.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 - jQuery.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 + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
*
|
||||
* TERMS OF USE - EASING EQUATIONS
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2001 Robert Penner
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
2
js/jquery.stellar.min.js
vendored
2
js/jquery.stellar.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,55 +0,0 @@
|
||||
jQuery(document).ready(function ($) {
|
||||
|
||||
|
||||
$(window).stellar();
|
||||
|
||||
var links = $('.navigation').find('li');
|
||||
slide = $('.slide');
|
||||
button = $('.button');
|
||||
mywindow = $(window);
|
||||
htmlbody = $('html,body');
|
||||
|
||||
|
||||
slide.waypoint(function (event, direction) {
|
||||
|
||||
dataslide = $(this).attr('data-slide');
|
||||
|
||||
if (direction === 'down') {
|
||||
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
|
||||
}
|
||||
else {
|
||||
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
mywindow.scroll(function () {
|
||||
if (mywindow.scrollTop() == 0) {
|
||||
$('.navigation li[data-slide="1"]').addClass('active');
|
||||
$('.navigation li[data-slide="2"]').removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
function goToByScroll(dataslide) {
|
||||
htmlbody.animate({
|
||||
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
|
||||
}, 2000, 'easeInOutQuint');
|
||||
}
|
||||
|
||||
|
||||
|
||||
links.click(function (e) {
|
||||
e.preventDefault();
|
||||
dataslide = $(this).attr('data-slide');
|
||||
goToByScroll(dataslide);
|
||||
});
|
||||
|
||||
button.click(function (e) {
|
||||
e.preventDefault();
|
||||
dataslide = $(this).attr('data-slide');
|
||||
goToByScroll(dataslide);
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
8
js/waypoints.min.js
vendored
8
js/waypoints.min.js
vendored
@ -1,8 +0,0 @@
|
||||
/*
|
||||
jQuery Waypoints - v1.1.7
|
||||
Copyright (c) 2011-2012 Caleb Troughton
|
||||
Dual licensed under the MIT license and GPL license.
|
||||
https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txt
|
||||
https://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt
|
||||
*/
|
||||
(function($,k,m,i,d){var e=$(i),g="waypoint.reached",b=function(o,n){o.element.trigger(g,n);if(o.options.triggerOnce){o.element[k]("destroy")}},h=function(p,o){if(!o){return -1}var n=o.waypoints.length-1;while(n>=0&&o.waypoints[n].element[0]!==p[0]){n-=1}return n},f=[],l=function(n){$.extend(this,{element:$(n),oldScroll:0,waypoints:[],didScroll:false,didResize:false,doScroll:$.proxy(function(){var q=this.element.scrollTop(),p=q>this.oldScroll,s=this,r=$.grep(this.waypoints,function(u,t){return p?(u.offset>s.oldScroll&&u.offset<=q):(u.offset<=s.oldScroll&&u.offset>q)}),o=r.length;if(!this.oldScroll||!q){$[m]("refresh")}this.oldScroll=q;if(!o){return}if(!p){r.reverse()}$.each(r,function(u,t){if(t.options.continuous||u===o-1){b(t,[p?"down":"up"])}})},this)});$(n).bind("scroll.waypoints",$.proxy(function(){if(!this.didScroll){this.didScroll=true;i.setTimeout($.proxy(function(){this.doScroll();this.didScroll=false},this),$[m].settings.scrollThrottle)}},this)).bind("resize.waypoints",$.proxy(function(){if(!this.didResize){this.didResize=true;i.setTimeout($.proxy(function(){$[m]("refresh");this.didResize=false},this),$[m].settings.resizeThrottle)}},this));e.load($.proxy(function(){this.doScroll()},this))},j=function(n){var o=null;$.each(f,function(p,q){if(q.element[0]===n){o=q;return false}});return o},c={init:function(o,n){this.each(function(){var u=$.fn[k].defaults.context,q,t=$(this);if(n&&n.context){u=n.context}if(!$.isWindow(u)){u=t.closest(u)[0]}q=j(u);if(!q){q=new l(u);f.push(q)}var p=h(t,q),s=p<0?$.fn[k].defaults:q.waypoints[p].options,r=$.extend({},s,n);r.offset=r.offset==="bottom-in-view"?function(){var v=$.isWindow(u)?$[m]("viewportHeight"):$(u).height();return v-$(this).outerHeight()}:r.offset;if(p<0){q.waypoints.push({element:t,offset:null,options:r})}else{q.waypoints[p].options=r}if(o){t.bind(g,o)}if(n&&n.handler){t.bind(g,n.handler)}});$[m]("refresh");return this},remove:function(){return this.each(function(o,p){var n=$(p);$.each(f,function(r,s){var q=h(n,s);if(q>=0){s.waypoints.splice(q,1);if(!s.waypoints.length){s.element.unbind("scroll.waypoints resize.waypoints");f.splice(r,1)}}})})},destroy:function(){return this.unbind(g)[k]("remove")}},a={refresh:function(){$.each(f,function(r,s){var q=$.isWindow(s.element[0]),n=q?0:s.element.offset().top,p=q?$[m]("viewportHeight"):s.element.height(),o=q?0:s.element.scrollTop();$.each(s.waypoints,function(u,x){if(!x){return}var t=x.options.offset,w=x.offset;if(typeof x.options.offset==="function"){t=x.options.offset.apply(x.element)}else{if(typeof x.options.offset==="string"){var v=parseFloat(x.options.offset);t=x.options.offset.indexOf("%")?Math.ceil(p*(v/100)):v}}x.offset=x.element.offset().top-n+o-t;if(x.options.onlyOnScroll){return}if(w!==null&&s.oldScroll>w&&s.oldScroll<=x.offset){b(x,["up"])}else{if(w!==null&&s.oldScroll<w&&s.oldScroll>=x.offset){b(x,["down"])}else{if(!w&&s.element.scrollTop()>x.offset){b(x,["down"])}}}});s.waypoints.sort(function(u,t){return u.offset-t.offset})})},viewportHeight:function(){return(i.innerHeight?i.innerHeight:e.height())},aggregate:function(){var n=$();$.each(f,function(o,p){$.each(p.waypoints,function(q,r){n=n.add(r.element)})});return n}};$.fn[k]=function(n){if(c[n]){return c[n].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof n==="function"||!n){return c.init.apply(this,arguments)}else{if(typeof n==="object"){return c.init.apply(this,[null,n])}else{$.error("Method "+n+" does not exist on jQuery "+k)}}}};$.fn[k].defaults={continuous:true,offset:0,triggerOnce:false,context:i};$[m]=function(n){if(a[n]){return a[n].apply(this)}else{return a.aggregate()}};$[m].settings={resizeThrottle:200,scrollThrottle:100};e.load(function(){$[m]("refresh")})})(jQuery,"waypoint","waypoints",window);
|
||||
Loading…
Reference in New Issue
Block a user