How do I make Page Header "Shrink" as user scrolls?

[etcbbu]

So I'm developing this site:

https://talsichristianschoolfoundation.org/test/

And I'm having that top "Page Header" object with the top-nav links track as the user scrolls down the page. But what about if I wanted it to "shrink" a little bit, whenever the user first scrolls off of it, from the top of the page? Here is an example of another website that does this:

https://childshome.org/

I figure it's probably in the Page Header object's "CSS3 Animation" Transitions I need to configure. But where/which one/how, to make it "shrink" like that?

--etcbbu

[Pablo]

You can do this with scroll transitions.

See these templates:
http://www.wysiwygwebbuilder.com/suppor ... louds.html
http://www.wysiwygwebbuilder.com/suppor ... ummer.html
http://www.wysiwygwebbuilder.com/suppor ... ummer.html

Tutorial:
http://www.wysiwygwebbuilder.com/scroll ... tions.html

[etcbbu]

Since I want to resize a Layer as someone scrolls, would it be this one that I will do:

Code: Select all

Example 2: Transform (rotate/scale) an object based on the scrollbar position.

?

And will I do the same Three Transitions for all of the objects that exist, up in that header? Like, will I have to do it for these objects on the page https://talsichristianschoolfoundation.org/test/ :

- That Layer at the top, itself
- That image on the top left that says, "a logo will be here"
- That menu on the right

?

[Pablo]

And will I do the same Three Transitions for all of the objects that exist, up in that header?

Correct

Did you check out the templates?

[etcbbu]

I did, and I am having trouble finding an object in the Templates that would be a good mirror of what it is I'm trying to do, which is make that "Header" object that is appended to the top of the page shrink a little bit, as they user scrolls off of the top of the page.

I tried utilizing the various "Transition" settings exactly how you have that spinning-text-object on this Tutorial, by looking in that page in the Template and mimic'ing the Transition commands that were there, but it simply doesn't work:

http://www.wysiwygwebbuilder.com/suppor ... ions2.html

Is mine going to have some of the "" settings set to "Top" because my object is one that is appended to the top of the page? It is a Page-Header object that is set to scroll with the page; is that going to create a problem? Shouldn't my Page-Header object be able to be resized with these Transitions? I know I have seen menus on other sites do this.

[etcbbu]

At this moment, am getting the top Layer to fade, if you check it out:

https://talsichristianschoolfoundation.org/test/

But what about shrinking its size?

[Pablo]

The templates I suggested all have a 'shrinking header'.
This functionality was implemented using scroll transition.
I thin you will have to experiment with all the option yourself and find out which one works bets for you.
Unfortunately, I cannot make an example for every possible combination. For me that may also take a few hours.

[etcbbu]

I am trying some of the other "Property" values like "Height", but that doesn't seem to change the Page Object movement activity at all. Like, I'll set one of the Transitions properties to "Header" and "Value" set to "2"; and then "Header" and "Value" set to "1", and the Page Header object doesn't move at all.

Also--is there a way to make the menu -NOT-Transition even though it is a child of the Page Header Object? I don't mind the Logo and the Page Header object, themselves, changing size, but I'd like the menu to stay-put at it's size/opacity/positions, etc.

[Pablo]

I am trying some of the other "Property" values like "Height", but that doesn't seem to change the Page Object movement activity at all.

For some elements like menu, the height is determined by the size of the text + padding. Setting the height of the element's container will not have any effect.
You will need to 'scale' (transform) the element.

Also--is there a way to make the menu -NOT-Transition even though it is a child of the Page Header Object?

No, I do not think that is possible.

[BaconFries]

This may be of help to you see answers from Pablo and filmphotog
viewtopic.php?f=5&t=71870&p=359140
Also
viewtopic.php?f=28&t=80548