-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathworking_model.html
152 lines (136 loc) · 4.35 KB
/
working_model.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
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
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: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1; /* Ensure background is behind other content */
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
border-radius: 5px;
display: none; /* Initially hidden */
}
.content {
padding: 20px;
margin-top: 100vh; /* Ensure content starts below the full viewport height */
background-color: rgba(255, 255, 255, 0.8);
}
</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="content">
<!-- Your content here -->
<h1>Welcome to CAD Design Showcase</h1>
<p>This is where you can provide additional information about your CAD design.</p>
</div>
<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
// 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 mouse scroll event
function handleScroll(event) {
// 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();
// Prevent default scroll behavior to stop the page from scrolling
event.preventDefault();
}
// Add scroll event listener to the document
document.addEventListener('wheel', handleScroll, { 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>