Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smoothen out character prepend

    Hey Guys,

    I wanted to prepend a character to menu items when the mouse will hove over them. An example of this is seen on the website of Minivegas, here: http://minivegas.net/

    When you hover over a menu item at the top a slash appears in front. There seems to happen a couple of things to smoothen out the effect of prepending the character. I was looking for a similarly smooth way of adding a character in front of my menu items.

    Can anybody help me out on how to do this? I'm also unable to find out exactly how they did it on the Minivegas website.

    Anybody any ideas?

    Thanks in advance!

    Regards,
    Roy

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    This is how minivegas did it

    1. on mouseenter, prepend the content of the link with a span containing the backslash with a font-size of 0px
    2. animate the font-size to 14px in about 200 milliseconds
    3. on mouseleave, animate the font-size back to 0px in about 200 milliseconds and then remove the span

    See example here (Hint: When you hover the mouse over the example page you will see the button "Edit in jsbin.com" on the top right corner. You can use this button to see the full source (HTML/CSS/Javascript) of the example)

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply!

    That's a nice trick as well, though it looks a bit different. I don't know why?

    I was thinking about creating a div that is containing the fixed size slash and set its overflow to hidden en animate its width from zero to the width of the character. Is there any way to get the width of a character with javascript?

    Would this work?

    Regards,
    Roy

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    This would also work

    Example here

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!

    Two great things for me to play with! Once I've got this thing running I'll definitely try and post the outcome of it here. Maybe you have a tip or two about my version!

    Thanks again!

    Regards,
    Roy

  • #6
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So!

    I've implemented a version.
    Here it is:

    http://www.colorbleed.nl/dev2/

    Any tips on the functionality on it (or maybe even on the slideshow I created) are welcome!

    Thanks again.

    Regards,
    Roy


  •  

    Tags for this Thread

    Posting Permissions

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