-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
127 lines (106 loc) · 5.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slider-Scroll</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="layout">
<div class="section-stick">
<div class="stick active"></div>
</div>
<section class="s1">
<div class="home">
<span>Slider Scroll</span>
<!-- prettier-ignore -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M5 6l5 5l5-5l2 1l-7 7l-7-7z" fill="#fff"/><rect x="0" y="0" width="20" height="20" fill="rgba(0, 0, 0, 0)" /></svg>
</div>
</section>
<section class="s2">Each slide is displayed with a scroll</section>
<section class="s3">To highlight information</section>
<section class="s4">To improve user experience</section>
<a
id="author"
href="https://github.com/EdixonAlberto/slider-scroll"
target="_black"
rel="noopener noreferrer"
>
<!-- prettier-ignore -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path class="icon" d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5C64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9c26.4 39.1 77.9 32.5 104 26c5.7-23.5 17.9-44.5 34.7-60.8c-140.6-25.2-199.2-111-199.2-213c0-49.5 16.3-95 48.3-131.7c-20.4-60.5 1.9-112.3 4.9-120c58.1-5.2 118.5 41.6 123.2 45.3c33-8.9 70.7-13.6 112.9-13.6c42.4 0 80.2 4.9 113.5 13.9c11.3-8.6 67.3-48.8 121.3-43.9c2.9 7.7 24.7 58.3 5.5 118c32.4 36.8 48.9 82.7 48.9 132.3c0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9c177.1-59.7 304.6-227 304.6-424.1c0-247.2-200.4-447.3-447.5-447.3z" fill="#fff" /><rect x="0" y="0" width="1024" height="1024" fill="rgba(0, 0, 0, 0)" /></svg>
<span>Created by Edixon</span>
</a>
</div>
<footer>
<h2>Footer</h2>
</footer>
<script>
const TIME_OUT = 1200 // It should be the same transition time of the sections
const body = document.querySelector('body')
const layout = document.querySelector('.layout')
const sectionsQty = document.querySelectorAll('section').length
const sectionStick = document.querySelector('.section-stick')
let startFlag = true
let initialScroll = window.scrollY
let qty = 1,
main = null,
next = null
let end, footer
// Add child elements in .section-stick as number of sections exist
Array(sectionsQty)
.fill()
.forEach(() => {
sectionStick.innerHTML = sectionStick.innerHTML + '<div class="stick"></div>'
})
console.log('SLIDE', qty)
// Listening to scroll event
window.onscroll = () => {
if (startFlag) {
const scrollDown = this.scrollY >= initialScroll
// TODO: crear una constante para sectionsQty + 1
const scrollLimit = qty >= 1 && qty <= sectionsQty + 1
// Verify that the scroll does not exceed the number of sections
if (scrollLimit) {
body.style.overflowY = 'hidden' // Lock el scroll
if (scrollDown && qty < sectionsQty) {
main = document.querySelector(`section.s${qty}`)
next = document.querySelector(`section.s${qty + 1}`)
main.style.top = '-100vh'
next.style.top = '0'
qty++
} else if (!scrollDown && qty > 1) {
if (qty !== sectionsQty + 1) {
main = document.querySelector(`section.s${qty - 1}`)
next = document.querySelector(`section.s${qty}`)
main.style.top = '0'
next.style.top = '100vh'
} else body.classList.remove('end')
qty--
} else {
// Mark the end of the slider on the body
body.classList.add('end')
qty++
}
// Scroll progressbar
if (qty !== sectionsQty + 1) {
const active = document.querySelector('.section-stick .stick.active')
active.style.top = (62 + 30) * (qty - 1) + 'px'
}
}
console.log('SLIDE', qty)
// Wait for the scrolling to finish to reset the values
setTimeout(() => {
initialScroll = this.scrollY
startFlag = true
body.style.overflowY = 'scroll' // Unlock scroll
}, TIME_OUT)
startFlag = false
}
// Keep scrollbar in the middle of the viewport
window.scroll(0, window.screen.height)
}
</script>
</body>
</html>