Forums » Advanced Editor Forum » Read Thread

I'm sure this is getting annoying, and if so my apologies, but I'm trying to learn and perfect this particular "parallax" aesthetic, so please bear with me.

Scrolling relative to what, you might ask? Well, I'm using the following script to limit the background picture of a page, so the text scrolls over it:

$ PAGETEXT : = "[style]body{background: url(https://s6.postimg.org/r0uk7m135/Sorcerers_Mountain_TITLE1_B.png) center center / cover fixed;}[ /style ] " + $ PAGETEXT

(put some spaces and replaced < and > with [ and ] to prevent doing the script on this page).

This is the same thing I did in my first story entry (after a good two months of researching these forums and getting lots of help from the community, I might add). You can see what the above script looks like in action here: The Ghost People. While I've pasted pictures at the top of the page, on every page there is a low brightness, low saturation background image that all text scrolls over. I'm trying to move to the next level on that.

Beyond that, so far I have learned how to create a scroll bar within the page where text is limited using ON TEXT manipulation (specifically, div and using position:absolute, sticky, relative, etc). But I'm wondering if there is something you could do that would eliminate the need for an internal scroll bar. Specifically, something that prevents text from reaching a maximum height (as measured from the top of the page, since that would be a more generalized solution to the problem, since text amount can very per page).

In essence, in light of the fact that the background picture is frozen in the center, what I need is for text to be prevented from scrolling past a maximum of pixels from the top from the top of the page- without using an internal scroll bar.

I know an internal scroll bar will sort of accomplish this, but unfortunately there are some inherent limitations using those. I am currently reading and learning in an attempt to find work arounds, but it seems the simplest solution would be to just put a flow stop on text as it hits a certain pixel bench mark (from the top of the page).

I know this is a fairly complex request, so I won't be too upset if no one can offer any insight. But since I'm trying to perfect this aesthetic, I figured why not see if anyone had anything. Ogre11 has helped tremendously in me learning some of this, so I'm not expecting him/her to add more, but it's welcome if s/he or anyone else has anything. Thanks a lot for your time and efforts!

If you put in the script above, it uses the normal scroll bar, and the text moves up normally, the only difference being that the background picture remains steadily in the center. The only modification I want to make with that is for the text to disappear about half way up the page, with the default scroll bar remaining, and any mouse wheel scrolling working regardless of whether or not the mouse is at the height of the top of the text.

Admittedly, this is probably a tall order, and I'm not too worried about figuring it out or getting the exact help from someone else that I need immediately. I will probably not use any type of scrolling other than default in this current contest. But it is something I eventually hope to be able to do.

Here's one option: overlay a second fixed element with the same background, but limit its height (to 200px for example) and shift the text down by that same height.

<style>
body {
background: url(https://s6.postimg.org/r0uk7m135/Sorcerers_Mountain_TITLE1_B.png) center center / cover fixed;
}
body::before {
background: inherit;
content: ' ';
height: 200px;
position: fixed;
top: 0;
width: 100%;
}
.dark1border + div {
padding-top: 200px !important;
}
</style>

The body's pseudo-element covers 200 vertical pixels on the page, but since the text is also vertically padded by 200, it will begin below the overlay. As the page is scrolled, the text will disappear beneath it.

$ PAGETEXT : = "[style]body{background: url(https://s6.postimg.org/r0uk7m135/Sorcerers_Mountain_TITLE1_B.png) center center / cover fixed;}[ /style ] " + $ PAGETEXT

But then add your script to the page itself?

I tried just your script, and what it does is it accomplished the exact same thing my first script did, except it eliminated the need to move the text down with < p > 's repasted over and over again. But the text didn't disappear when it reached a certain height, it just kept going.

.....

Her is exactly what I put on the page. I also tried this with and without what I had in the little off page script window:

Did I do it wrong? Again, I got the same results as my script listed above except with a bunch of < p > < /p >'s to push the start of the text down.

Hmm. Well, it's supposed to look like this, except the offset is 400px in this GIF. Might have to play around with that value until you get the positioning you want?

Also, the content of the body::before is supposed to be a single space. Due to the way befores are processed, they won't show at all unless there's something in the content property.

Edit: Actually, since you put it directly on the page instead of the page script, make sure you get rid of all newlines (because the editor replaces them all with br tags which would mess with stuff like CSS); I think I can see a stray one in there. Try that, or moving it to the page script.

....

Edited

Actually no! I think you solved it for me. Here is how I put your script in:

...

The only issue is if I don't set the height low enough, I get a smaller, duplicate picture of the background. But that is not a problem at all, because I'll never have the max text height higher than half way.

...

...

So basically, you two have completely solved my problem, and I am very much grateful. This should work for what I need. Thanks again!

I don't know what the exact syntax would be, but basically, an if/then scenario where either one script or another is played based on a variable value. Is this doable? If not, if when I finish the story and I have enought time, I'll just do a parallel path with or without the parallax effect. Thanks!

IF %PARALLAX = 1 THEN $PAGETEXT := "(parallax style)" + $PAGETEXT
ELSE $PAGETEXT := "(non-parallax style)" + $PAGETEXT

Unless there is an on page trick to only let a picture be shown ON page unless another variable is triggered (or in this case, if %Parallax = 0), this won't be doable. I will go test that, of course.

...

...

...five minutes later reading the help topics...

...

...

and BOOM!

% % PARALLAX % = % 0 % < p style = [text-align:center">< image src {equals}(insert picture)] height="330" width="450" > % %, of course, without the spaces and adding the missing quotations, and the appropriate syntax for pasting a picture in html.

I simply past the picture on the top of the page like that, in between the on page variable trick, and if Parallax is not equal to 1, the picture shows like normal, but if it is, the picture is gone.

This works like a charm. As far as I can tell, this 100% fixes my problem, and now I don't have to basically write the story twice! Thanks so much both of you!

% % PARALLAX % = % 1 % image src= "https://s6.postimg.org/kdzmpp2ip/transparent_background.png" height="150" width="450" % % (removed carrots in hopes of the transparent picture not showing up)

So, with all this combined, I can get the exact margins and text placements for each time, all without having to re-write the story. This is so awesome. Now I can spend the next month and a half writing, and the final month adjusting the parameters for each page. You guys are great, as are the help tutorials, which I've been reading religiously for months.