How do I make Page Header "Shrink" as user scrolls?
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
How do I make Page Header "Shrink" as user scrolls?
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
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
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Re: How do I make Page Header "Shrink" as user scrolls?
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
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
Re: How do I make Page Header "Shrink" as user scrolls?
Since I want to resize a Layer as someone scrolls, would it be this one that I will do:
?
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
?
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
?
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Re: How do I make Page Header "Shrink" as user scrolls?
CorrectAnd will I do the same Three Transitions for all of the objects that exist, up in that header?
Did you check out the templates?
Re: How do I make Page Header "Shrink" as user scrolls?
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.
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.
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Re: How do I make Page Header "Shrink" as user scrolls?
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?
https://talsichristianschoolfoundation.org/test/
But what about shrinking its size?
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Re: How do I make Page Header "Shrink" as user scrolls?
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.
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.
Re: How do I make Page Header "Shrink" as user scrolls?
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.
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.
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization
www.ktravisj.com
Re: How do I make Page Header "Shrink" as user scrolls?
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.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.
You will need to 'scale' (transform) the element.
No, I do not think that is possible.Also--is there a way to make the menu -NOT-Transition even though it is a child of the Page Header Object?
- BaconFries
-
- Posts: 5154
- Joined: Thu Aug 16, 2007 7:32 pm
Re: How do I make Page Header "Shrink" as user scrolls?
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
viewtopic.php?f=5&t=71870&p=359140
Also
viewtopic.php?f=28&t=80548