-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (118 loc) · 4.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Transition Studio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/design.css">
<script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101279965);</script>
<script async src="//static.getclicky.com/js"></script>
</head>
<body id="fix">
<div class="fixedTop" >
<div class="logo">TRANSITIONS</div>
<div class="nav">
<ul>
<li>><a href="#cont">Centre de la Terre</a>></li>
<li><a href="#cont2">Sous-sol</a>></li>
<li><a class="focus" href="#fix">SURFACE</a></li>
</ul>
</div>
</div>
<!-- ELEMENTS DE TRANSITION -->
<header>
<div class="absolute">
<div class="bg rellax" data-rellax-speed="-16"></div>
</div>
<div class="absolute">
<img class="rellax" data-rellax-speed="-13" src="img/backmnt.png">
</div>
<div class="absolute">
<img class="rellax" data-rellax-speed="-8" src="img/midmnt.png">
</div>
<div class="absolute">
<img class="rellax" data-rellax-speed="-4" src="img/frntmnt.png">
</div>
<div class="coverText">
<h2 class="rellax" data-rellax-speed="-6">TRANSITION<br />STUDIO</h2>
<p class="rellax" data-rellax-speed="-5">Bienvenue dans une journée de découverte. Création d'expérience digitale. <br /><br />
(codé avec ❤️ par Benosmane Yassine)</p>
</div>
<div class="absolute">
<img src="img/frnt.png">
</div>
</header>
<!-- FIN ELEMENTS DE TRANSITION -->
<div id="cont" class="content">
<div class="grid">
<div><img class="imgresponsive" src="img/cave.svg"></div>
<div class="texts">
<h2 class="rellax" data-rellax-speed="-1">Le voyage commence ici...</h2>
<p class="rellax" data-rellax-speed="-2"><br/><br/><br/>
Voici la grotte du JavaScript, <br/>
il parait qu'ici se cachent des bibliothèques inconnues... <br/>
Au loin on entends un écho : <br/>
"Parrallax, parrallax, parrallax..."</p>
</div>
</div>
</div>
<div id="cont2" class="content">
<div class="grid">
<div><img class="imgresponsive" src="img/cave3.svg"></div>
<div class="texts">
<h2 class="rellax" data-rellax-speed="-1">Vous voici dans le centre de la Terre</h2>
<p class="rellax" data-rellax-speed="-2">L'air se fait rare... on s'arrête ici.</p>
</div>
</div>
</div>
<div id="cont3"><img class="imgresponsive" src="img/cave3.svg"></div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="rellax.min.js">
</script>
<script>
document.addEventListener('mouseover', function(e) {
if (e.target.tagName !== 'A') return;
if ((e.target.href && e.target.href.indexOf('#') != -1) && ((e.target.pathname == location.pathname) || ('/' + e.target.pathname == location.pathname)) && (e.target.search == location.search)) {
scrollAnchors(e, e.target);
}
});
function scrollAnchors(e, respond = null) {
function distanceToTop(el) {
return Math.floor(el.getBoundingClientRect().top);
}
e.preventDefault();
var targetID = (respond) ? respond.getAttribute('href') : this.getAttribute('href');
var targetAnchor = document.querySelector(targetID);
if (!targetAnchor) return;
var originalTop = distanceToTop(targetAnchor);
window.scrollBy({
top: originalTop,
left: 0,
behavior: 'smooth'
});
var checkIfDone = setInterval(function() {
var atBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2;
if (distanceToTop(targetAnchor) === 0 || atBottom) {
targetAnchor.tabIndex = '-1';
targetAnchor.focus();
if ('history' in window) {
window.history.pushState('', '', targetID);
} else {
window.location = targetID;
}
clearInterval(checkIfDone);
}
}, 500);
};
var rellax = new Rellax('.rellax', {
callback: function(position) {
console.log(position);
}
});
</script>
<!-- codé par Yassine Benosmane -->
</body>