Welcome to TalkGraphics.com
Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21
  1. #11
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    35,658

    Default Re: Navbar Resize on Scroll....

    I would probably move on to Plan B.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  2. #12
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    8,537

    Default Re: Navbar Resize on Scroll....

    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
    Acorn - My currently active Xara software: occasionally serviced XDPX, purposely unserviced XDPX12 & XDPX11 (32/64-bit), unserviced XWD Premium 15 & 12, XPGD10, X3D7 and lots of 'permanently-owned' licences back through time (to CC's Artworks)

  3. #13

    Default Re: Navbar Resize on Scroll....

    Quote Originally Posted by Acorn View Post
    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

  4. #14
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,461

    Default Re: Navbar Resize on Scroll....

    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
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  5. #15

    Default Re: Navbar Resize on Scroll....

    Quote Originally Posted by Egg Bramhill View Post
    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

  6. #16
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,461

    Default Re: Navbar Resize on Scroll....

    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.
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  7. #17
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    8,537

    Default Re: Navbar Resize on Scroll....

    Quote Originally Posted by Egg Bramhill View Post
    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.
    Acorn - My currently active Xara software: occasionally serviced XDPX, purposely unserviced XDPX12 & XDPX11 (32/64-bit), unserviced XWD Premium 15 & 12, XPGD10, X3D7 and lots of 'permanently-owned' licences back through time (to CC's Artworks)

  8. #18
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,461

    Default Re: Navbar Resize on Scroll....

    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

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  9. #19
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    8,537

    Default Re: Navbar Resize on Scroll....

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - My currently active Xara software: occasionally serviced XDPX, purposely unserviced XDPX12 & XDPX11 (32/64-bit), unserviced XWD Premium 15 & 12, XPGD10, X3D7 and lots of 'permanently-owned' licences back through time (to CC's Artworks)

  10. #20
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,461

    Default Re: Navbar Resize on Scroll....

    Thank you very much Acorn
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •