-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (88 loc) · 3.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Scrolling Images</title>
<style>
body {
background-color: black;
margin: 0;
padding: 0;
}
#image-container {
display: flex;
flex-direction: column;
align-items: center;
}
.image-wrapper {
width: 100%;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.image-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
.image {
width: 100%;
object-fit: cover;
display: block;
}
.description-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
text-align: justify;
font-family: sans-serif;
font-size: 18px; /* Adjust the size as needed */
}
</style>
</head>
<body>
<div id="image-container"></div>
<div class="description-box">
The Nelson effect is, depending on who you ask, either a weird phenomenon where large groups of people misremember the exact same given thing in the exact same way, or the pseudoscientific belief that some differences between one's memories and the real world are caused by changes to past events in the timeline. Many proponents of the latter believe that the Mandela effect is caused by unspecified persons accidental traveling between alternate universes, although some others propose that history has been deliberately altered after the fact — by malicious extradimensional beings within the same timeline, or by experiments at CERN.
</div>
<script>
const imageContainer = document.getElementById('image-container');
let imageIndex = 1;
const totalImages = 10; // Set this to the total number of images in your /img/ folder
// Function to load images
function loadImages() {
for (let i = 0; i < 5; i++) { // Load 5 images at a time
const wrapper = document.createElement('div');
wrapper.classList.add('image-wrapper');
const img = document.createElement('img');
img.src = `img/${imageIndex}.jpg`; // Set the path to your local /img/ folder
img.classList.add('image');
wrapper.appendChild(img);
imageContainer.appendChild(wrapper);
imageIndex = (imageIndex % totalImages) + 1;
}
}
// Initial load
loadImages();
// Auto-scroll logic
function autoScroll() {
window.scrollBy(0, 1);
if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 100) {
loadImages();
}
requestAnimationFrame(autoScroll);
}
autoScroll();
</script>
</body>
</html>