WatchNon-threaded

Forums » Advanced Editor Forum » Read Message

Talk about it. Ask for help on it. Compliment it.

Way to limit the max height that text can scroll?

20 days ago

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!

Way to limit the max height that text can scroll?

19 days ago
I'll have to think on this one.

I think the main drawback is that you want text to scroll, but you don't want the scrollbar -- and the point of the scroll bar is to inform the user that the text actually scrolls. So if you do find a way to remove the scrollbar (and yes, I know they look pretty weak), then you're creating an interface that will not make sense to the user/reader. They might not know they are supposed to scroll.

Way to limit the max height that text can scroll?

19 days ago
What I'm aiming for is the only scroll bar on the screen being the default one, while using a mouse wheel will still allow the text to scroll even if the mouse is not at the same pixel height as the text (I can already make the smaller scroll bar disappear by simply changing the box width, but this results in the user not being able to scroll unless the mouse is at the same height as the text, which could create the confusion you describe; in fact, using specific heights and widths in the text we discussed in the other thread, I can remove all scroll bars, but once again the possibility of confusion arises, particularly since the text will only scroll if the mouse is at the max height of the text or lower).

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.

Way to limit the max height that text can scroll?

19 days ago
Thinking about that specific page, what if you allowed the image to scroll as well? Then the picture at the top would move off the page, but the text would scroll as needed.

Way to limit the max height that text can scroll?

19 days ago

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.

Way to limit the max height that text can scroll?

19 days ago
Oh, that's sneaky!

Way to limit the max height that text can scroll?

19 days ago
So keep this part in the edit script section:

$ 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.

Way to limit the max height that text can scroll?

19 days ago
Okay, an update. I am now supposing my writing was supposed to go in between the ' ' after "content:". If so, when I do that, all that I get is the background picture, with no text.

Way to limit the max height that text can scroll?

19 days ago

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.

Way to limit the max height that text can scroll?

18 days ago
I don't quite get your meaning here. But would you be kind enough to screen cap your script text exactly as it is and post it? Because what this gif shows is exactly what I'm looking for.

....

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!

Way to limit the max height that text can scroll?

18 days ago
The only other problem I encountered here was that if I lowered the pixel to the right height, the text started in the middle of the page, rather than the top line. BUT, this was easily solved with a bunch of < p > < / p > written right on the page. So, essentially this problem is completely solved. Well, I'll leave an *, because my limited experience with scripting, and my brother's years of programming, has taught me one thing: fixing one problem always has a chance of completely turning something else FUBAR, and you may not realize it until its way too late to find out exactly where you went wrong. But man, this is a cool little effect.

Way to limit the max height that text can scroll?

18 days ago
Now that we have the parallax effect I'm looking for, is there a way to use a variable to trigger it? For example (and this doesn't work):

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!

Way to limit the max height that text can scroll?

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

Way to limit the max height that text can scroll?

17 days ago
This works like a charm, but it leaves one huge problem: for the non-parallax version, I want to include smaller versions of the same picture. In order to do both on one page using a variable, I have to paste the picture. The problem is, if I don't set the pixel height of my scroll to about 420, the extra picture will be visible in parallax mode for several pixels. But if I DO set the height up that far (instead of say, 280), the point where the text disappears is about only a paragraph above the default bottom of the page.

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!

Way to limit the max height that text can scroll?

16 days ago
More cheating Ninjitsu, if anyone is interested. I want different space margins between where the title begins with each mode, and different spacing between the custom title and the text (for non-parallax, I wanted the title at the top, followed by the picture, followed by the text about three blank paragraphs down; for the parallax, I wanted about 60% of the page blank prior to the title, then the text a couple paragraphs below). So here is the cheapest, laziest solution I could find: simply add a transparent picture that only appears if the variable is triggered to add spacing.

% % 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.