-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
219 lines (192 loc) · 6.33 KB
/
index.html
File metadata and controls
219 lines (192 loc) · 6.33 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAD Design Showcase</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAD Design Showcase</title>
<style>
/* Common styles */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
position: relative; /* Ensure proper positioning of elements */
}
nav {
background-color: #333;
color: #fff;
padding: 10px 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
nav a:hover {
color: #ccc;
}
.background-container {
position: relative; /* Ensure overlay text positioning */
width: 100%;
height: 100vh; /* Adjust as needed */
background-size: cover;
background-position: center;
z-index: -1; /* Ensure background is behind other content */
transition: background-image 1s ease; /* Default transition duration */
}
.overlay-text {
position: absolute;
top: 20%;
right: 5%;
width: 200px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
border-radius: 5px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.content {
padding: 20px;
margin-top: 100vh; /* Ensure content starts below the full viewport height */
background-color: rgba(255, 255, 255, 0.8);
}
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
.background-container {
transition: background-image 0.5s ease; /* Adjusted transition duration for smaller screens */
}
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<!-- Add more links as needed -->
</nav>
<div class="background-container" id="background-container"></div>
<div class="overlay-text" id="overlay-text-1">
<p>This is overlay text 1.</p>
</div>
<div class="overlay-text" id="overlay-text-2">
<p>This is overlay text 2.</p>
</div>
<!-- Add more overlay text containers as needed -->
<footer>
<p>This is the footer.</p>
</footer>
<script>
const backgroundContainer = document.getElementById('background-container');
const overlayText1 = document.getElementById('overlay-text-1');
const overlayText2 = document.getElementById('overlay-text-2');
// Add more overlay text elements as needed
let currentImageIndex = 1; // Initial image index
const maxImages = 20; // Assuming there are 20 images
let startY = 0; // Variable to store initial touch position
// Function to preload images
function preloadImages() {
for (let i = 1; i <= maxImages; i++) {
const imageUrl = `0000${i}`.slice(-4) + '.png'; // Format index with leading zeros
const img = new Image();
img.src = imageUrl;
}
}
// Function to update background image
function updateBackgroundImage() {
const imageUrl = `0000${currentImageIndex}`.slice(-4) + '.png'; // Format index with leading zeros
backgroundContainer.style.backgroundImage = `url('${imageUrl}')`;
}
// Function to update overlay text visibility
function updateOverlayText() {
// Hide all overlay text elements
const overlayTextElements = document.querySelectorAll('.overlay-text');
overlayTextElements.forEach(textElement => {
textElement.style.display = 'none';
});
// Show overlay text for specific images
if (currentImageIndex === 1) {
overlayText1.style.display = 'block';
} else if (currentImageIndex === 2) {
overlayText2.style.display = 'block';
}
// Add more conditions to show overlay text for other images
}
// Function to handle scroll event
function handleScroll(event) {
// Prevent default scroll behavior to stop the page from scrolling
event.preventDefault();
// Detect scroll direction
const delta = Math.sign(event.deltaY); // -1 for scroll up, 1 for scroll down
// Update current image index based on scroll direction
currentImageIndex += delta;
// Ensure currentImageIndex stays within the range of available images
if (currentImageIndex < 1) {
currentImageIndex = 1;
} else if (currentImageIndex > maxImages) {
currentImageIndex = maxImages;
}
// Update background image
updateBackgroundImage();
// Update overlay text visibility
updateOverlayText();
}
// Function to handle touch start event
function handleTouchStart(event) {
startY = event.touches[0].clientY; // Store initial touch position
}
// Function to handle touch move event
function handleTouchMove(event) {
// Prevent default touch behavior to stop the page from scrolling
event.preventDefault();
// Determine the direction of touch movement
const deltaY = event.touches[0].clientY - startY;
const delta = Math.sign(deltaY); // -1 for upward swipe, 1 for downward swipe
// Update current image index based on touch movement
currentImageIndex += delta;
// Ensure currentImageIndex stays within the range of available images
if (currentImageIndex < 1) {
currentImageIndex = 1;
} else if (currentImageIndex > maxImages) {
currentImageIndex = maxImages;
}
// Update background image
updateBackgroundImage();
// Update overlay text visibility
updateOverlayText();
// Update startY for the next touch move
startY = event.touches[0].clientY;
}
// Add scroll and touch event listeners
document.addEventListener('wheel', handleScroll, { passive: false });
document.addEventListener('touchstart', handleTouchStart, { passive: false });
document.addEventListener('touchmove', handleTouchMove, { passive: false });
// Preload images when the page loads
window.addEventListener('load', preloadImages);
// Initially set the background image and overlay text
updateBackgroundImage();
updateOverlayText();
</script>
</body>
</html>