XF 1.2 Logo slide out on hover

[Matthew Hawley]

So I would like to have this

Then the logo come out to the right with animation and the navtabs move aswell.

I was thinking of using JQuery but I don't know much about JQuery. Any suggestions?

 

[TPerry]

@Matthew Hawley, if you haven't found this site, you may want to check it out. Some neat stuff there.
http://tympanus.net/codrops/category/tutorials/

 

[xIsabel38]

There are different types of geeks!?

 

[Matthew Hawley]

For clarification, I want the navtabs to move with the logo.

 

[Matthew Hawley]

@Matthew Hawley, if you haven't found this site, you may want to check it out. Some neat stuff there.
http://tympanus.net/codrops/category/tutorials/

I found that site yesterday!

 

[Shelley]

So...do you have any code?

No - I haven't had the time to create an example for you. I've outlined already how it can be done, I advise you to spend a few minutes and learn how it's done.

 

[Matthew Hawley]

Here is the code I'm using. Still gotta figure out the navTabs...

<i class="fa fa-code fa-3x" style="color:white;margin-top: 13px;margin-right:10px;">
                        <div class="logoImage fadeInLeft"><img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" /></div>
                    </i>

I put this in EXTRA.css

.fa-code:hover .logoImage { margin-top: -48px; margin-left: 35px; display: block; }

.logoImage { display: none; }

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
  
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-20px);
    }
  
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
  
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft
{
    margin-right: -16px;
        display: none;
    -webkit-animation-duration: .4s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: fadeInLeft;
    -moz-animation-duration: .4s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -moz-animation-name: fadeInLeft;
}

 

[x4rl]

If he's doing it via CSS and based upon hover he should be able to use the code to do it (I don't get real heavy into it but a lot of examples use

-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;

to do something similar.

That example that I pulled also uses some simple .js for it.

You don't need to add webkit/moz/khtml iirc xenforo alleviates the rewriting.