Full Screen Image Flash Over Passage in Twine?

Hi! I’m using Twine Sugarcube 2.30.0. I want an image to flash over a passage after a certain length of time, and I’d like for the image to cover all of the text and take up the entire window. Is this possible?

I’ve been using goto . So, a reader is on a passage (P1) and after a set amount of time they are sent to a passage (Pi) with the image as the background and then to new passage (P2) that looks the same as the first. It’s not the ideal workaround.

Thoughts?

Thank you!
T

Hi there!

I did a simple test that should give you what you are looking for:

<img src="http://www.example.com/image.gif" id="image" style="z-index:100; position:absolute; left:100px; top:100px; width:100%; height:100%" hidden>

Passage text...

<<timed 2s>>
	<<script>>
		$("#image").prop("hidden", false);	
	<</script>>
	<<timed 0.5s>>
		<<script>>
			$("#image").prop("hidden", true);
		<</script>>
	<</timed>>
<</timed>>

You can control how long until the image shows up with the first timed macro and how long the image stays on the screen with the second timed macro.

The z-index inside the image style is what makes the image cover everything on the screen. Just make sure to adjust the top and left styles to fit the entire screen with your image.

If you want to make the passage look cleaner, put all these styles into a class in css:

.fullScreenImage {
  z-index:100; 
  position:absolute; 
  left:100px; 
  top:100px; 
  width:100%; 
  height:100%;
}

And then set that class to the tag:

<img src="http://www.example.com/image.gif" id="image" class="fullScreenImage" hidden>

Hope that helps!

1 Like

Rather than having the image displayed using a separate passage, you could just have it display in the current passage.

First, put something like this in your Stylesheet section:

#OverlayImg {
	position: fixed;
	display: none; /* Hidden by default */
	z-index: 10000; /* Sit on top of everything */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(images/Example.png);
	background-size: contain;
	background-color: #111;
	background-position: center;
	background-repeat: no-repeat;
}

Just change the “background-image” to the path and filename of your image instead.

Note: Because the above code is using a relative path there, the image will not show within Twine, it will only be seen in the published HTML file. You could temporarily change that code to use an absolute path, like “url(C:/Games/MyGame/images/Example.png);”, if you wanted it to work in Twine. However, don’t forget to remove the first part of the file path before you publish the HTML file, otherwise it won’t work on other people’s computers unless they use the exact same file path.

Then, add something like this to the bottom of your passage:

<<nobr>>
	<<timed 5s>>
		<<run $("#OverlayImg").show()>>
		<<timed 0.2s>>
			<<run $("#OverlayImg").hide()>>
		<</timed>>
	<</timed>>
<</nobr>><div id="OverlayImg"></div>

That will wait for 5 seconds, and then display that image as large as possible (without cropping or distorting the image) over everything, and then hide it again 0.2 seconds later (using the jQuery .show() and .hide() methods).

If you don’t want any empty space on the edges of the image, and you don’t mind the edges of the image being cropped out to fit the screen, you can change the “background-size” CSS from “contain” to “cover”.

Enjoy! :slight_smile:

1 Like

HiEv’s markup example would be better as something like the following:

<<silently>>
	<<timed 5s>>
		<<run $("#OverlayImg").show()>>
	<<next 0.2s>>
		<<run $("#OverlayImg").hide()>>
	<</timed>>
<</silently>><div id="OverlayImg"></div>

Reasoning:

  1. You don’t want output from the <<timed>>, so <<silently>> should be preferred over <<nobr>>.
  2. There’s no need for two separate instances of <<timed>> as you can simply use its <<next>> child tag to add extra timed content.

@HiEv that worked beautifully and perfectly. Thank you! Once again, hero status.

Follow up question, @HiEv. Is it possible to do this with a short (6 second) video? Thank you!
T

Yes, though 1) sizing and centering it will be a bit more difficult since you can’t use the same trick I used above, 2) you’ll need to trigger the video to play when you pop-up the “overlay” div (see the HTMLMediaElement methods), 3) instead of using a timer to determine when to hide the overlay, you’ll probably want to use the “ended” event on the video to trigger hiding the overlay, and 4) if the page is online then you’ll want to preload the video first. You can preload the video using something like this:

<video preload="auto" muted playsinline style="display: none;"><source src="someVid.mp4" type="video/mp4"></video>

and that will preload the “someVid.mp4” video, which you should then be able to play in that or another video element once that’s finished downloading. (See the <video> element for details.) You can also use the “canplaythrough” event to tell your code when it should be ready to fully play the video.

Hope that helps! :slight_smile:

1 Like

Thank you!