Skip to content

Commit 1eb8c01

Browse files
JRLemkerJRLemker
committed
testing animation through .png files
1 parent a1fd3ad commit 1eb8c01

24 files changed

+359
-49
lines changed

‎0000.png

1020 KB
Loading

‎0001.png

1020 KB
Loading

‎0002.png

1 MB
Loading

‎0003.png

1.01 MB
Loading

‎0004.png

1 MB
Loading

‎0005.png

1 MB
Loading

‎0006.png

1 MB
Loading

‎0007.png

1020 KB
Loading

‎0008.png

1.01 MB
Loading

‎0009.png

1 MB
Loading

‎0010.png

1 MB
Loading

‎0011.png

1 MB
Loading

‎0012.png

1020 KB
Loading

‎0013.png

1020 KB
Loading

‎0014.png

1 MB
Loading

‎0015.png

1 MB
Loading

‎0016.png

1020 KB
Loading

‎0017.png

1020 KB
Loading

‎0018.png

1020 KB
Loading

‎0019.png

1020 KB
Loading

‎0020.png

1020 KB
Loading

‎index.html

Lines changed: 155 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,164 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Transparent Header Website</title>
7-
<link rel="stylesheet" type="text/css" href="style.css">
8-
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CAD Design Showcase</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
overflow-x: hidden;
12+
font-family: Arial, sans-serif;
13+
position: relative; /* Ensure proper positioning of elements */
14+
}
15+
nav {
16+
background-color: #333;
17+
color: #fff;
18+
padding: 10px 20px;
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
z-index: 1000;
24+
}
25+
nav a {
26+
color: #fff;
27+
text-decoration: none;
28+
margin-right: 20px;
29+
}
30+
nav a:hover {
31+
color: #ccc;
32+
}
33+
.background-container {
34+
position: relative; /* Ensure overlay text positioning */
35+
width: 100%;
36+
height: 100vh; /* Adjust as needed */
37+
background-size: cover;
38+
background-position: center;
39+
z-index: -1; /* Ensure background is behind other content */
40+
}
41+
.overlay-text {
42+
position: absolute;
43+
top: 20%;
44+
right: 5%;
45+
width: 200px;
46+
background-color: rgba(0, 0, 0, 0.5);
47+
color: #fff;
48+
padding: 10px;
49+
border-radius: 5px;
50+
}
51+
.footer {
52+
background-color: #333;
53+
color: #fff;
54+
padding: 10px;
55+
position: fixed;
56+
bottom: 0;
57+
left: 0;
58+
width: 100%;
59+
text-align: center;
60+
}
61+
.content {
62+
padding: 20px;
63+
margin-top: 100vh; /* Ensure content starts below the full viewport height */
64+
background-color: rgba(255, 255, 255, 0.8);
65+
}
66+
</style>
967
</head>
1068
<body>
69+
<nav>
70+
<a href="#home">Home</a>
71+
<a href="#about">About</a>
72+
<a href="#contact">Contact</a>
73+
<!-- Add more links as needed -->
74+
</nav>
75+
<div class="background-container" id="background-container"></div>
76+
<div class="overlay-text" id="overlay-text-1">
77+
<p>This is overlay text 1.</p>
78+
</div>
79+
<div class="overlay-text" id="overlay-text-2">
80+
<p>This is overlay text 2.</p>
81+
</div>
82+
<!-- Add more overlay text containers as needed -->
83+
<div class="footer">
84+
<p>This is the footer.</p>
85+
</div>
86+
87+
<script>
88+
const backgroundContainer = document.getElementById('background-container');
89+
const overlayText1 = document.getElementById('overlay-text-1');
90+
const overlayText2 = document.getElementById('overlay-text-2');
91+
// Add more overlay text elements as needed
92+
93+
let currentImageIndex = 1; // Initial image index
94+
const maxImages = 20; // Assuming there are 20 images
95+
96+
// Function to preload images
97+
function preloadImages() {
98+
for (let i = 1; i <= maxImages; i++) {
99+
const imageUrl = `0000${i}`.slice(-4) + '.png'; // Format index with leading zeros
100+
const img = new Image();
101+
img.src = imageUrl;
102+
}
103+
}
104+
105+
// Function to update background image
106+
function updateBackgroundImage() {
107+
const imageUrl = `0000${currentImageIndex}`.slice(-4) + '.png'; // Format index with leading zeros
108+
backgroundContainer.style.backgroundImage = `url('${imageUrl}')`;
109+
}
110+
111+
// Function to update overlay text visibility
112+
function updateOverlayText() {
113+
// Hide all overlay text elements
114+
const overlayTextElements = document.querySelectorAll('.overlay-text');
115+
overlayTextElements.forEach(textElement => {
116+
textElement.style.display = 'none';
117+
});
118+
119+
// Show overlay text for specific images
120+
if (currentImageIndex === 1) {
121+
overlayText1.style.display = 'block';
122+
} else if (currentImageIndex === 2) {
123+
overlayText2.style.display = 'block';
124+
}
125+
// Add more conditions to show overlay text for other images
126+
}
127+
128+
// Function to handle mouse scroll event
129+
function handleScroll(event) {
130+
// Detect scroll direction
131+
const delta = Math.sign(event.deltaY); // -1 for scroll up, 1 for scroll down
132+
133+
// Update current image index based on scroll direction
134+
currentImageIndex += delta;
135+
136+
// Ensure currentImageIndex stays within the range of available images
137+
if (currentImageIndex < 1) {
138+
currentImageIndex = 1;
139+
} else if (currentImageIndex > maxImages) {
140+
currentImageIndex = maxImages;
141+
}
142+
143+
// Update background image
144+
updateBackgroundImage();
145+
146+
// Update overlay text visibility
147+
updateOverlayText();
148+
149+
// Prevent default scroll behavior to stop the page from scrolling
150+
event.preventDefault();
151+
}
152+
153+
// Add scroll event listener to the document
154+
document.addEventListener('wheel', handleScroll, { passive: false });
11155

12-
<header>
13-
<nav>
14-
<a href="#">Home</a>
15-
<a href="#">About</a>
16-
<a href="#">Services</a>
17-
<a href="#">Contact</a>
18-
</nav>
19-
</header>
20-
21-
<div class="container">
22-
<h1>Welcome to Our Website</h1>
23-
<p>This is a sample homepage with a transparent header.</p>
24-
<img src="https://via.placeholder.com/800x400" alt="Sample Image">
25-
</div>
156+
// Preload images when the page loads
157+
window.addEventListener('load', preloadImages);
26158

159+
// Initially set the background image and overlay text
160+
updateBackgroundImage();
161+
updateOverlayText();
162+
</script>
27163
</body>
28164
</html>

‎style.css

Lines changed: 52 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,52 @@
1-
body {
2-
margin: 0;
3-
font-family: Arial, sans-serif;
4-
}
5-
header {
6-
background-color: rgba(0, 0, 0, 0.5); /* Transparent black background */
7-
color: white;
8-
padding: 20px;
9-
text-align: center;
10-
}
11-
nav {
12-
display: inline-block;
13-
}
14-
nav a {
15-
color: white;
16-
text-decoration: none;
17-
margin: 0 10px;
18-
}
19-
nav a:hover {
20-
text-decoration: underline;
21-
}
22-
.container {
23-
padding: 20px;
24-
text-align: center;
25-
}
26-
.container img {
27-
width: 100%;
28-
max-width: 800px;
29-
height: auto;
30-
}
1+
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
overflow-x: hidden;
6+
font-family: Arial, sans-serif;
7+
}
8+
nav {
9+
background-color: #333;
10+
color: #fff;
11+
padding: 10px 20px;
12+
position: fixed;
13+
top: 0;
14+
left: 0;
15+
width: 100%;
16+
z-index: 1000;
17+
}
18+
nav a {
19+
color: #fff;
20+
text-decoration: none;
21+
margin-right: 20px;
22+
}
23+
nav a:hover {
24+
color: #ccc;
25+
}
26+
.background-container {
27+
position: fixed;
28+
top: 0;
29+
left: 0;
30+
width: 100%;
31+
height: 100%;
32+
background-size: cover;
33+
background-position: center;
34+
z-index: -1; /* Ensure background is behind other content */
35+
}
36+
.overlay-text {
37+
position: absolute;
38+
top: 50%;
39+
left: 50%;
40+
transform: translate(-50%, -50%);
41+
background-color: rgba(0, 0, 0, 0.5);
42+
color: #fff;
43+
padding: 10px;
44+
border-radius: 5px;
45+
display: none; /* Initially hidden */
46+
}
47+
.content {
48+
padding: 20px;
49+
margin-top: 100vh; /* Ensure content starts below the full viewport height */
50+
background-color: rgba(255, 255, 255, 0.8);
51+
}
52+

0 commit comments

Comments
 (0)