Navbar Resize on Scroll....

[gwpriester]

I would probably move on to Plan B.

[Acorn]

I have had a go and just about manage it with a Navbar that is Sticky at Top but initial position is down the page a bit. A Trigger object, half-way down the page.

A Reveal animation on the Trigger for the initial large icon. It hides a smaller icon that is Sticky at Top.

I used a Fade In of around a second but Xara fails to ease such animations out so you get a fast shutter effect on reversing.

Overall, the effect is not pleasant so i would use jQuery and CSS3 to do it properly.

Acorn

[Tazz]

I have had a go and just about manage it with a Navbar that is Sticky at Top but initial position is down the page a bit. A Trigger object, half-way down the page.

A Reveal animation on the Trigger for the initial large icon. It hides a smaller icon that is Sticky at Top.

I used a Fade In of around a second but Xara fails to ease such animations out so you get a fast shutter effect on reversing.

Overall, the effect is not pleasant so i would use jQuery and CSS3 to do it properly.

Acorn

Ahhhh, that's a shame. I sure wish there was an easier way. So as gwpriester stated, might want a Plan B.

Well thank you to both of you for offering a look into this.

Regards,
Tazz

[Egg Bramhill]

Here's something I've been looking at. Javascript checks the 'y' value of the vertical scrollbar. Once it exceeds 200px the logo image changes to a smaller logo. As Acorn states the change is instant, but I'm sure instead of switching images it should be able to set a resize of the original image to act in a smoother transformation. Apologies about my code

[Tazz]

Here's something I've been looking at. Javascript checks the 'y' value of the vertical scrollbar. Once it exceeds 200px the logo image changes to a smaller logo. As Acorn states the change is instant, but I'm sure instead of switching images it should be able to set a resize of the original image to act in a smoother transformation. Apologies about my code

WOW, that's it...sure it's instant but...that's the idea. So. in theory, you could make the placeholder that triggers the change invisible, or make it any other graphic on the page? But it has to match the "y" value....
No need for apology, good heavens!!! As always you are awesome! Time to play around with it! Again thank you for all the help. I really like to make site's with a little bit bigger logo, centered. I also like the logo to stay at the top when you scroll, but obviously not that big and taking up space for content, so I love the effect where is decreases in size and moves out of the way, but remains visible...I ALWAYS like the things that are DANG near impossible to do haha

Tazz

[Egg Bramhill]

Thanks for the comments Tazz. I'm sure Acorn and Siran can improve on this greatly, I'm no coder.

Here's my latest version. An ongoing project, firstly I need to hide the 'hidden' objects on page load.

[Acorn]

Thanks for the comments Tazz. I'm sure Acorn and Siran can improve on this greatly, I'm no coder.
Here's my latest version. An ongoing project, firstly I need to hide the 'hidden' objects on page load.

Egg, the code is useful.

I suggest changing the hiddent Class to one of varying the opacity:

> 200 - document.getElementById("tg-large").style.opacity = 0;<= 200 - document.getElementById("tg-large").style.opacity = (200 - scrollTop) / 200;

This softens the transition a little.

Acorn

P.S. var d is redundant.

[Egg Bramhill]

Cheers Acorn. My coding is just a mash-up of code I grab from w3schools dot com. I'm really pleased when I get a positive result Often I can't really follow the coding, hence the redundant var d, which I knew wasn't required. Often I get code to work, save the xar, then alter the code and everything goes tits-up. I'm never sure if Xara's undo feature undo's code amendments. I don't believe it does ???

I'm very visually oriented so much coding goes over my head if it's not got a demo, thus my leaning toward w3school dot com in which I can alter the code and see the results within their demos. I find stackoverflow dot com often has the answers to my questions but unfortunately I don't know how to implement the code supplied

[Acorn]

Cheers Acorn. My coding is just a mash-up of code I grab from w3schools dot com. I'm really pleased when I get a positive result Often I can't really follow the coding, hence the redundant var d, which I knew wasn't required. Often I get code to work, save the xar, then alter the code and everything goes tits-up. I'm never sure if Xara's undo feature undo's code amendments. I don't believe it does ???
I'm very visually oriented so much coding goes over my head if it's not got a demo, thus my leaning toward w3school dot com in which I can alter the code and see the results within their demos. I find stackoverflow dot com often has the answers to my questions but unfortunately I don't know how to implement the code supplied

Egg, I would have overjoyed at having W3Schools as a resource when I was younger; JavaScript and CSS are such large subjects it is daunting to get started. The advantage I may have is I know, usually, when a thing can be done and sometimes even how. Knowing a thing is possible is 90% of the battle.

Always happy for you or ask if you get stuck.

Acorn

[Egg Bramhill]

Thank you very much Acorn