-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathsecti-scroll.html
More file actions
137 lines (122 loc) · 3.21 KB
/
secti-scroll.html
File metadata and controls
137 lines (122 loc) · 3.21 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="lib/sec1-bot.css" rel="stylesheet">
<link href="lib/section1.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
scroll-behavior: smooth;
}
.section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: transform 10s ease-in-out;
}
#section1 {
/*background-color: #ff6f61;*/
}
#section2 {
background-color: #4db6ac;
}
#section3 {
background-color: #ffd54f;
}
#section4 {
background-color: #64b5f6;
}
.content h1 {
font-size: 4rem;
color: #fff;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<section class="section" id="section1">
<div class="content">
<video autoplay muted loop id="background-video">
<source src="assets/section1/bac-vid.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="header">
<img
data-aos="fade-up"
data-aos-anchor-placement="top-center"
data-aos-duration="1500"
src="assets/cin-logo.png" alt>
<h1
data-aos="zoom-in"
data-aos-duration="2000">creativity in nature</h1>
<h2
data-aos="zoom-in"
data-aos-delay="2000"
data-aos-duration="2500">The shining star of digital success</h2>
<button
data-aos="zoom-in"
data-aos-delay="2500"
data-aos-duration="2000" class="button-84" role="button">MAKE A WISH</button>
</div>
<div class="footer">
<img id="glob1" src="assets/glob1.gif" alt>
</div>
</div>
</section>
<section class="section" id="section2">
<div class="content">
<h1>Section 2</h1>
</div>
</section>
<section class="section" id="section3">
<div class="content">
<h1>Section 3</h1>
</div>
</section>
<section class="section" id="section4">
<div class="content">
<h1>Section 4</h1>
</div>
</section>
<script
<script src="lib/js/transition.js"></script>
<script>
// new CircleType(document.getElementById('planet-name')).radius(180);
AOS.init();
let currentSection = 0;
const sections = document.querySelectorAll('.section');
document.addEventListener('wheel', (event) => {
if (event.deltaY > 0) {
// Scrolling down
if (currentSection < sections.length - 1) {
currentSection++;
scrollToSection(currentSection);
}
} else {
// Scrolling up
if (currentSection > 0) {
currentSection--;
scrollToSection(currentSection);
}
}
});
function scrollToSection(sectionIndex) {
sections[sectionIndex].scrollIntoView({
behavior: 'smooth'
});
}
</script>
</body>
</html>