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

All WYSIWYG Web Builder support issues that are not covered in the forums below.
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
Post Reply
User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Sat Jun 09, 2018 5:42 am

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
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com


User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Thu Jun 14, 2018 1:31 am

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

?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13980
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Thu Jun 14, 2018 6:13 am

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?

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Thu Jun 14, 2018 4:36 pm

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.
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Thu Jun 14, 2018 4:37 pm

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?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13980
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Thu Jun 14, 2018 5:19 pm

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.

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Thu Jun 14, 2018 5:27 pm

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.
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13980
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Thu Jun 14, 2018 5:31 pm

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.

User avatar
BaconFries
 
 
Posts: 4165
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries » Thu Jun 14, 2018 5:32 pm

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

Post Reply

Who is online

Users browsing this forum: No registered users and 17 guests