Report Blog Entry
hi this is how i got the index prescripts/fight text on my profile to work!!! it's super janky because I suck at webdev but feel free to use, just add me if you want!!! :D replace the values in the .message:nth-child instances and message containers however you like, just make sure that if you change the animation-duration you also change the animation-delay(s) in the individual instances below. if you have any questions feel free to ask!!! ^_^
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
.prescript-container {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 0;
overflow: visible;
}
.prescript-container .message {
transform-origin: left center;
position: absolute;
color: white;
text-shadow: 0px 0px 30px red;
font-size: 30px;
font-family: 'IBM Plex Sans', sans-serif;
white-space: nowrap;
opacity: 0;
overflow: hidden;
max-width: 1000ch;
width: 0;
animation-name: typewriter;
animation-duration: 10s;
animation-fill-mode: forwards;
animation-timing-function: steps(200, end);
animation-iteration-count: 1;
}
.prescript-container .message:nth-child(1) { top: 50%; left: 10%; animation-delay: 0s; transform: rotate(-12deg); }
.prescript-container .message:nth-child(2) { top: 20%; left: 40%; animation-delay: 10s; transform: rotate(8deg); }
.prescript-container .message:nth-child(3) { top: 30%; left: 30%; animation-delay: 20s; transform: rotate(-5deg); }
.prescript-container .message:nth-child(4) { top: 40%; left: 45%; animation-delay: 30s; transform: rotate(13deg); }
.prescript-container .message:nth-child(5) { top: 50%; left: 15%; animation-delay: 40s; transform: rotate(-7deg); }
.prescript-container .message:nth-child(6) { top: 55%; left: 35%; animation-delay: 50s; transform: rotate(5deg); }
.prescript-container .message:nth-child(7) { top: 60%; left: 40%; animation-delay: 60s; transform: rotate(-10deg); }
.prescript-container .message:nth-child(8) { top: 70%; left: 25%; animation-delay: 70s; transform: rotate(14deg); }
.prescript-container .message:nth-child(9) { top: 75%; left: 20%; animation-delay: 80s; transform: rotate(-3deg); }
.prescript-container .message:nth-child(10) { top: 80%; left: 35%; animation-delay: 90s; transform: rotate(9deg); }
.prescript-container .message:nth-child(11) { top: 15%; left: 40%; animation-delay: 100s; transform: rotate(-15deg); }
.prescript-container .message:nth-child(12) { top: 25%; left: 50%; animation-delay: 110s; transform: rotate(11deg); }
.prescript-container .message:nth-child(13) { top: 35%; left: 20%; animation-delay: 120s; transform: rotate(-6deg); }
.prescript-container .message:nth-child(14) { top: 45%; left: 45%; animation-delay: 130s; transform: rotate(6deg); }
.prescript-container .message:nth-child(15) { top: 50%; left: 35%; animation-delay: 140s; transform: rotate(-8deg); }
.prescript-container .message:nth-child(16) { top: 65%; left: 30%; animation-delay: 150s; transform: rotate(3deg); }
.prescript-container .message:nth-child(17) { top: 70%; left: 25%; animation-delay: 160s; transform: rotate(-2deg); }
.prescript-container .message:nth-child(18) { top: 75%; left: 40%; animation-delay: 170s; transform: rotate(12deg); }
.prescript-container .message:nth-child(19) { top: 85%; left: 30%; animation-delay: 180s; transform: rotate(-9deg); }
.prescript-container .message:nth-child(20) { top: 90%; left: 50%; animation-delay: 190s; transform: rotate(7deg); }
@keyframes typewriter {
0% { width: 0ch; opacity: 50%; }
80% { width: 120ch; opacity: 65%; }
100% { width: 120ch; opacity: 0; }
}
</style>
<div class="prescript-container">
<div class="message">To …. Pack a lunchbox and consume it on top of a trash can in the streets of District 11 at 1 PM today.</div>
<div class="message">To …. Bake dacquoise while the hour hand rests between 7 and 8, and eat it while watching a movie.</div>
<div class="message">To …. Initiate a game of Never Have I Ever with the first five people you encounter. When one folds a finger, break it.</div>
<div class="message">To …. Neatly clip the nails of the sixty-second person you come across.</div>
<div class="message">To …. Pet quadrupedal animals five times.</div>
<div class="message">To …. Spin a wheel and throw a cake at the person determined by the result.</div>
<div class="message">To …. Consume eight crabs stored at room temperature and ripe persimmon at once.</div>
<div class="message">To …. At the railing on the roof of a building, shout out the name of the person you dislike, then jump off. The height of the building does not matter.</div>
<div class="message">To …. After a meal, discard all dishes that were used to serve it.</div>
<div class="message">To …. On the morning after receiving the Prescript, drink three cups of water as soon as you get up.</div>
<div class="message">To …. Race against residents that live in the same building as you to District 7. Measure the distance every twenty-three minutes and disqualify the one farthest away from the destination.</div>
<div class="message">To …. Within three days, knit a scarf with a butterfly pattern.</div>
<div class="message">To …. Dial any number. Give a New Year’s greetings and words of blessing to whoever receives the call.</div>
<div class="message">To …. See green from a white wall.</div>
<div class="message">To …. When hungry, consume a Cheeki’s cheeseburger with added onion.</div>
<div class="message">To …. Fold thirty-nine paper cranes and throw them from the rooftop.</div>
<div class="message">To …. At work, cut the ear of the first person to fulminate against you.</div>
<div class="message">To …. When your eyes meet another person’s, nod at them.</div>
<div class="message">To …. Return to your home this instant. You may leave once a dog barks in front of your house one time.</div>
<div class="message">To …. Wear light green clothing and take 10 steps in a triangle-shaped alley.</div>
</div>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )