Twine Version: Harlowe 3.10
I found a simulated zx spectrum loading screen
https://codepen.io/Klapoucius/pen/pmMBYP
which I’d like to integrate into my harlowe game.
I tried using the tag feature in the CSS page but that isn’t working.
And then put the 2 div class lines into a harlowe story passage. No dice tho.
Many thanks x
HTML
<div class="border"></div>
<div class="screen"></div>
CSS
tw-story[tags~="loading"] {
body {
height:100vh;
margin:0;
overflow:hidden;
}
.border {
animation:colors 10s infinite;
background-color:blue;
color:yellow;
height:100vh;
overflow:hidden;
position:relative;
}
.border:before,
.border:after {
background-image:repeating-linear-gradient(
transparent,
transparent 3vh,
yellow 1vh,
yellow 4vh
);
content:"";
height:200%;
left:0;
position:absolute;
top:-100%;
width:100vw;
}
.border:before {
animation:downwards 8s ease-in infinite;
}
.border:after {
animation:downwards 5s ease-out infinite reverse;
}
.screen {
background-color:#fff;
height:80vh;
left:10vw;
position:fixed;
top:10vh;
width:80vw;
}
.screen:after {
bottom:4vh;
content:"LOAD\"\"";
font-family:'Courier New', monospace;
font-size:4vmin;
left:4vw;
position:absolute;
}
@keyframes colors {
0%, 20% {
filter:hue-rotate(90deg);
transform:scale(2);
}
20.01%, 100% {
filter:hue-rotate(0);
transform:scale(1);
}
}
@keyframes downwards {
0% {
transform:translate(0);
}
100% {
transform:translate(0, 100vh) scale(1.5);
}
}
}
1 Like
What you want to accomplish can be done in Harlowe. It shouldn’t be a problem.
I won’t have time to look at it until much later today though.
That screen animation is so cool! Great find!
1 Like
You can use this in any passage you want and navigate to and from it without issue:
{<style>
/* >>> additional css <<< */
tw-story {
padding:0;
margin:0;
overflow:hidden;
}
.screen {
display:flex;
flex-direction:column;
justify-content:end;
padding:1rem 1.5rem;
color:black;
font-weight:bold;
}
.border {
position:fixed;
top:0;
left:0;
width:100vw;
}
tw-sidebar {
display:none;
}
/* >>> original css <<< */
.border {
animation:colors 10s infinite;
background-color:blue;
height:100vh;
overflow:hidden;
}
.border:before,
.border:after {
background-image:repeating-linear-gradient(
transparent,
transparent 3vh,
yellow 1vh,
yellow 4vh
);
content:"";
height:200%;
left:0;
position:absolute;
top:-100%;
width:100vw;
}
.border:before {
animation:downwards 8s ease-in infinite;
}
.border:after {
animation:downwards 5s ease-out infinite reverse;
}
.screen {
background-color:#fff;
height:80vh;
left:10vw;
position:fixed;
top:10vh;
width:80vw;
font-family:'Courier New', monospace;
}
@keyframes colors {
0%, 20% {
filter:hue-rotate(90deg);
transform:scale(2);
}
20.01%, 100% {
filter:hue-rotate(0);
transform:scale(1);
}
}
@keyframes downwards {
0% {
transform:translate(0);
}
100% {
transform:translate(0, 100vh) scale(1.5);
}
}
</style>}
<div class="border"></div>
<div class="screen">
[[ This is a link ->Some Other Passage]]
You can put whatever Harlowe code you want in here.
This works like a regular passage within this div tag.
Loading...
</div>
…by making the screen div tag a flex box, I was able to make all text appear at the bottom. The only other css I had to add was stuff that allowed the div tags to display full screen. This was coded and tested in Harlowe 3.3.3 in the Chrome browser.
I learned a lot figuring this out so it was well worth my time. Enjoy and let me know if you have any questions. Good luck on your project!
1 Like
Thanks so much for looking at this for me. It works just fine in a new harlowe story with a blank CCS page. But I already have this in my CSS for the story I’m working on. (it makes the footer a sidebar)
/* twine-user-stylesheet #1: "UserStylesheet" */
/*
Reposition the Sidebar 'footer' tagged passage.
*/
tw-sidebar {
position: fixed;
top: 0;
left: 0;
width: 22%; /* padding-right of the tw-story element. */
max-height: 100%;
margin-top: 5%; /* padding-top of the tw-story element. */
padding: 0 0.5em 0.5em 0.5em;
text-align: center;
background-color: transparent;
font-size: 14px;
line-height: 1.5em;
}
tw-icon {
text-align: right;
padding-right: 0.75em;
}
rcorners {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
tw-sidebar .undo, tw-sidebar .redo {
display: none;
}
I suspect this conflicts with your solution for the loading screen. I’ve tried isolating the loading screen under a passage tag but this results in the loading screen being static and not animated.
@indietiredboi
Do you still want the loading screen to take up the entire page?
If so, you can hide the footer passage temporarily. Otherwise, I need to know more about what you are trying to achieve.
Yes. I’m trying to get just one passage at the start to show the whole screen as a loading screen. But then the rest of the passages to be normal story passages that adhere to the css which turns the footer into a sidebar.
@indietiredboi
If you remove the sidebar CSS code, does the loading screen look proper?
If so, then I can show you an easy way to hide the sidebar/footer just for the loading screen.
If not, then you’ll have to identify what’s conflicting. Parent elements that might be affecting the loading screen code are <tw-passage>
, <tw-story>
, <body>
, and maybe <html>
. If you have styled any of those elements, please share that code.
1 Like
Yup. Hiding the footer fixed it. So obvious. Thanks for helping me with that. So pleased with the effect!
1 Like