Disabling Transition on Header Image

Sumoslap · September 2015

Hi folks!

Searched but haven't been able to find an answer on this one. I am sure there's a simple way to do this, so apologies for the newbie question.

I am trying to have the image I am using in the header not disappear and reappear between passages--basically, I want to deactivate the fade-in/fade-out I have going on for the text.

Here's my stylesheet:

body {
  margin: 0% 0 0 0;
  /*background-color:#000;*/
  background-color:#3d1d08
  background: -webkit-linear-gradient(left, #550000 0%,#3d1d08 19%);
  background: linear-gradient(to right, #550000 0%,#3d1d08 19%);

}
#passages {
  margin: 0;
  padding: 0;
  border: 0;

}
.header {
  width: 30%;
  /*border-top: saddlebrown solid 0.2em;*/
  background: [img[decorativedivider-plants]]; 
  margin: auto;
  padding: 0 0 8.25% 10%;

}
.passage {
  width: 40em;
  padding: 2em;
  font-size:2.5em;
  text-align:left;
  font-family: "OldStyle";
  background-color:#3d1d08
  background: -webkit-linear-gradient(left, #550000 0%,#3d1d08 19%);
  background: linear-gradient(to right, #550000 0%,#3d1d08 19%);
  text-shadow: sienna 0.05em 0.05em 0.05em;
}
a.internalLink, a.externalLink {
  color: burlywood;
  text-shadow: peru 0.05em 0.05em 0.05em;
}
a.internalLink:hover, a.externalLink:hover {
  color: cornsilk;
  text-decoration: none;
  text-shadow: peru 0.05em 0.05em 0.05em;
}

#sidebar {
	display:none;
}

.transition-in {
	transition: 1s
	opacity:0;
}
.passage:not(.transition-out) {
	transition: 1s 1s;
	-webkit-transition: 1s 1s;
}
.transition-out {
	transition: 1s;
	-webkit-transition: 1s;
	opacity:0;
}

.revision-span-in {
	opacity: 0;
}
.revision-span {
	transition: 2s; -webkit-transition: 2s;
}
.revision-span-out {
	/*position:absolute;*/
	opacity: 0;
}

.timedreplacement.replacement-in {
	opacity: 0;
}
.timedreplacement {
	transition: 1s;
	-webkit-transition: 1s;
}
.timedreplacement.replacement-out {
	opacity: 0;
}

#menu-core > li > :before {
	content: none;
}

Thanks very much!

greyelf · September 2015

You need to state which story format you are using, as answers to questions can be different for each one.

Sumoslap · September 2015

Apologies! Using Sugarcane.

greyelf · September 2015

The header area of Sugarcane (and footer) is actually contained within the generated passage body, and as such it gets destroyed and recreated every time the passage does, which is every time you move from one passage to another. This is why the header background is getting redrawn.

Are you going to be using the header area to show any content besides the background image?, and if so will that content change?

TheMadExile · September 2015

If you're using Sugarcane, then I'm confused as to why you have the following in your CSS:

#menu-core > li > :before {
	content: none;
}

That style rule is for SugarCube, not Sugarcane. It does nothing in Sugarcane.

Sumoslap · September 2015

greyelf and TheMadExile, thanks for your comments! greyelf, Basically it's a static, decorative image that won't change. However, I did not use it as a background image because I was having trouble placing it in the right place (basically, in the header area). If it should be a background image with parameters to put it in the right location, I would be grateful for guidance.

TheMadExile, I combined code from Glorious Trainwreck's "Orange Highlight" and "Warm Cabin" themes to come up with my theme. Since I am very much an amateur at CSS and Twine, I had no idea #menu-core did nothing, but was desperate to eliminate the flash that keeps happening with the sidebar before it disappears with display:none, so I threw it in there and hoped for the best. Alas, no dice.

greyelf · September 2015

Try the following, it displays an unchanging background image above the passage area.

1. Add your image to the story project and rename the image passage to header.

2. Add the following to your story's script passage, it creates a new header area outside the normal passage area.
(note: If you don't already have a script passage then place the mouse cursor over the passage map, use the right mouse button to display the context menu and select the New Script Here option. I would name the new passage something like Story Javascript)

var sibling = document.getElementById('snapbackMenu');
if (sibling) {
	var header = document.createElement('div');
	header.setAttribute("id", "header");
	sibling.parentNode.insertBefore(header, sibling.nextSibling);
}

3. Add the following to your story's stylesheet passage, it positions the new header area and displays the image from point 1 in it.
(note: If you don't already have a stylesheet passage then place the mouse cursor over the passage map, use the right mouse button to display the context menu and select the New Stylesheet Here option. I would name the new passage something like Story Stylesheet)

#header {
	background-image: [img[header]];
	height: 5em;
	margin-left: 19.5em;
	margin-bottom: 1em;
}

Sumoslap · September 2015

greyelf, thank you so much for this code. I know this costs a good deal of time to do and am really grateful for it.

Alas, it did not work; the header image still fades out with the rest of the text after I used this code.

I was able, however, to get the effect I wanted by making a background image and padding. Again, thank you so much for your help.

greyelf · September 2015

I am very surprised that the image is still fading in/out as you move between passages because the image in my example is located outside the area that the Sugarcane engine updates. I tested the code on Chrome, Firefox and IE to make sure it worked before posting it here.
I am assuming that you did remove your original .header related CSS before adding the new Javascript/CSS in my previous comment, because if you didn't then it would also be trying to show a header image.

I have attached a copy of my example story project if you want to have a look.

Anyway I'm glad you found your own solution.

Sumoslap · September 2015

greyelf wrote: »

I am assuming that you did remove your original .header related CSS before adding the new Javascript/CSS in my previous comment, because if you didn't then it would also be trying to show a header image.

Ah! Yes, that did cause the problem! Sorry.

I really appreciate all the help!

Howdy, Stranger!

Categories

Disabling Transition on Header Image

Comments