After conducting an extensive search and reviewing numerous threads on the topic, I am still unable to resolve this issue.
The concept is simple: I want to display 3 containers side by side, each independently vertically scrolling images.
The CSS animation is operational, with the following code snippet:
#scroll-container {
height: 600px;
width: 600px;
overflow: hidden;
display: inline-block;
}
#scroll-container img {
max-width: 100%;
max-height: 100%;
}
#scroll-text-1 {
height: 100%;
transform: translateY(100%);
animation: my-animation-1 60s linear infinite;
}
#scroll-text-2 {
height: 100%;
transform: translateY(-100%);
animation: my-animation-2 60s linear infinite;
}
@keyframes my-animation-1 {
from {
transform: translateY(100%);
}
to {
transform: translateY(-550%);
}
}
@keyframes my-animation-2 {
from {
transform: translateY(-550%);
}
to {
transform: translateY(100%);
}
}
my-animation-1 scrolls from bottom to top and my-animation-2 scrolls from top to bottom. The challenge arises when attempting to implement HTML code similar to the one below (using plain text instead of images):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="../css/article.css">
<title>Artikelliste Page</title>
</head;
<body>
<div id="scroll-container">
<div id="scroll-text-1">
<!--Insert images here-->
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text
<div>
</div>
<div id="scroll-container">
<div id="scroll-text-2">
<!--Insert images here-->
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text
<div>
</div>
<div id="scroll-container">
<div id="scroll-text-1">
<!--Insert images here-->
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text
<div>
</div>
</body>
</html>
Unfortunately, the divs are not aligning as intended. Only the first container appears while the other two remain invisible on the page, offset or overlapping each other incorrectly.
In my troubleshooting efforts, I attempted to hide the first container using developer tools to assess potential overlaps, but all it resulted in was the entire page turning blank. Despite the code being present in the dev console, the actual content failed to render.
Further attempts that proved futile include:
1. float: left;
2. display: inline-block;
3. Creating a wrapper around the containers with either float: left; or display: inline-block;
It became clear that these options would be effective if all three containers appeared successfully on the page. This suggests a different underlying issue that eludes my understanding.
EDIT: Even adding excessive br tags beneath the containers did not yield any visible changes, almost as if the code is vanishing into thin air within a mysterious void...