Static image at top of window

Authoring Twine
1

I have an image I want to always appear at the top of the window. It acts as a kind of frame, with passages appearing inside that frame. I’ve implemented this using a header passage to put that image at the top of every passage. This mostly works, but there’s one thing I don’t like about it. Every time I click a link, the image disappears and then fades in (along with the rest of the passage) over about half a second. I don’t want it to do that. I want the image to just stay there, and only have the text disappear and fade in.

Is there any way to disable the fade in effect for the image? Or alternatively, is there a better way to implement this than with a header passage?

I’m using Twine 2.3.5 with Harlowe 3.1.0.

1 Like
2

I’m not that familiar with the Harlowe story format, but you should be able to add a class to the image to prevent transitions. Then you’d just need something like this in your Stylesheet section:

.noTransition {
		 -o-transition: none;
	   -moz-transition: none;
	-webkit-transition: none;
			transition: none;
}

With that, any elements with the “noTransition” class won’t show any transition effects. If you don’t want any images to have a transition, then you could just change “.noTransition” to “img”, and then you wouldn’t need to set the class on any elements, as this would affect all <img> elements.

If your image is just a standard HTML element, then you’d can add a class like this:

<img class="noTransition" src="imagePath/imageName.jpg" alt="Image description for the visually impaired">

Hope that helps! :slight_smile:

3

Thanks! Unfortunately it doesn’t work. I’m actually kind of confused about where the fade in effect is coming from. When I inspect the image with the Firefox debugger, it doesn’t show any “transition” or “animation” properties either on the image itself or anything containing it. Perhaps there’s a bit of javascript somewhere driving it?

4

What you’re talking about with transitions is the effect of going to a brand new passage. If you don’t want this to happen, the way you can get around this is using replace, probably with spans. I think this is simpler than removing transitions on everything, since even if you get transitions completely removed you will still be left with the new page “flashing” into view with no image, loading the imag, etc. The “text” span can simply have its contents replaced, without going to a new passage. However, like HiEv said… I’m not familiar with Harlowe, so I can’t give any particular pointers there. In Sugarcube, you just use the <<replace>> macro and it’s fairly self explanatory.

Hopefully someone who uses Harlowe can tell you the exact syntax for this.

5

It looks like the equivalent in Harlowe is (replace:). I think I see how to use that to do what I want. Thanks!

6

If you want static HTML content that is excluded from the passage transition effect then you need to inject that content outside the Harlowe tw-story element, because anything within this element is destroyed and replaced each time a passage transition occurs.

You can use code within your project’s Story JavaScript area to add a HTML element before the tw-story element, and then use CSS to position and style that HTML element. The following JavaScript uses the jQuery .before() function to inject a DIV element with an ID of page-header.

$('tw-story').before('<div id="page-header"></div>');

The following CSS positions the above new page-header element so that it appears within the blank area above the section of the page where the current Passage’s content is shown, the CSS also contains information about which image to show behind the new page-header element. This CSS should be placed within your project’s Story Stylesheet area.

#page-header {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	right: 0;
	height: 5%;
	margin-left: 20%;
	margin-right: 20%;
	z-index: 1;
	background-image: url("media/banner.png");
}

Obviously you will need to change the url of the background image to reference your image.

the way you can get around this is using replace, probably with spans…
…The “text” span can simply have its contents replaced, without going to a new passage

warning: Changes to variables that occur within the contents of the current passage are persisted to the History System during the next Passage Transition, and each “Save” made is basically just a copy of the current state of the History system. So if you use something like the purposed “use macro to replace content of current page” technique to bypass/suppress the passage transition effect then any variable changes you make will not be persisted within History.

1 Like
7

Here is the code I ended up using.

$('tw-story').before('<img src="image.jpg" style="position: absolute; z-index: 1; pointer-events: none; width: 100%"/>');

I used position: absolute since I wanted the image to scroll with the page rather than being locked to the top of the window. z-index: 1 is needed so the image won’t be hidden behind the story, but then it blocks mouse clicks from reaching the story, so I added pointer-events: none to prevent that.

This works perfectly and gives exactly the effect I wanted. Thanks again!

1 Like