Oliver/web-text-roller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init, working

Browse Source
This commit is contained in:
Oliver Atkinson 2024-02-22 13:31:58 -07:00
commit 148b464d27
3 changed files with 108 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
README.md Normal file
View File

59
generate.py Normal file
View File

@ -0,0 +1,59 @@
import random
import sys
if len(sys.argv) != 2:
print("First and only argument is quantity of lines to cycle thru.")
sys.exit(1)
qty = int(sys.argv[1])
if qty == 3:
print("/* When qty=3 it doesn't output the correct amount of classes due to rounding errors. */")
percent_step = int(round(100 / qty))
# idk how to make a blank array
percentages = [0] * 0
for i in range(0, 100, percent_step):
percentages.append(i)
# container class
print(".roller-container {display: grid; text-align: center;}\n")
# set style for all the classes
for i in range(0, len(percentages)):
# the last one needs it's trailing comma removed TODO
if i == len(percentages) - 1:
print(f".roller{i}")
else:
print(f".roller{i},")
print(
f"""{{
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-duration: {qty}s;
animation-direction: normal;
transform-origin: center;
/* works with "display: grid" to have all the words in the same place on the screen. */
grid-row: 1;
grid-column: 1;
}}"""
)
# assign each class it's animation
for i in range(0, len(percentages)):
print(
f".roller{i} {{ animation-name: roll{i}; color: rgb({random.randrange(50, 255)}, {random.randrange(100, 255)}, {random.randrange(100, 255)})}}"
)
# set keyframes
for i in range(0, len(percentages)):
print(f"@keyframes roll{i} {{")
for j in percentages:
# Make sure everybody has an 100% rule
if j == percentages[0]:
if i == 0:
print("\t100% { opacity: 1; transform: translateY(0) rotateX(0); }")
else:
print("\t100% { opacity: 0; transform: translateY(2rem) rotateX(15deg); }")
# calculate the keyframes
if i * percent_step == j:
print(f"\t{j}% {{ opacity: 1; transform: translateY(0) rotateX(0); }}\n")
else:
print(
f"\t{j}% {{ opacity: 0; transform: translateY(2rem) rotateX(15deg); }}\n"
)
print("}")

49
index.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Testing</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='roller.css'>
</head>
<body>
<main>
<div class="title">
<p>We can help with</p>
<div class="roller-container">
<p class="roller0">Software Development</p>
<p class="roller1">Construction</p>
<p class="roller2">Graphic Design</p>
<p class="roller3">Marketing</p>
<p class="roller4">Human Resources</p>
</div>
<p>here at Example Co.</p>
</div>
</main>
</body>
<style>
html {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
color: white;
font-size: x-large;
}
main {
max-width: 80%;
margin: auto;
}
p {
margin: 0px;
}
.title {
text-align: center;
}
</style>
</html>