The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Logo Sliding

View previous topic View next topic Go down

Solved Logo Sliding

Post by Raze on November 5th 2011, 2:18 am

As of here > http://demo.nicetheme.com/forum?theme_id=179315
If you put mouse on logo it slides to the right.
How could I get that :o

Raze
Forumember

Male Posts : 406
Reputation : 12
Language : English, HTML, CSS

Back to top Go down

Solved Re: Logo Sliding

Post by SLGray on November 5th 2011, 3:56 am

When I visited the skin, the logo did not move.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Logo Sliding

Post by Raze on November 5th 2011, 4:05 am

Did you put your mouse on the logo?
or it might not move for internet explorer

Raze
Forumember

Male Posts : 406
Reputation : 12
Language : English, HTML, CSS

Back to top Go down

Solved Re: Logo Sliding

Post by SLGray on November 5th 2011, 4:07 am

It did move when I used Opera, but did not when I used Internet Explorer.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Logo Sliding

Post by Raze on November 5th 2011, 4:08 am

Well yea
I want to get my logo to move like that.
But I can't figure out the right code

Raze
Forumember

Male Posts : 406
Reputation : 12
Language : English, HTML, CSS

Back to top Go down

Solved Re: Logo Sliding

Post by maijiyeon on November 5th 2011, 4:40 am

the logo moved.. well..u need codes for it..

maijiyeon
Forumember

Female Posts : 145
Reputation : 3
Language : Ipoh
Location : T-ara KPOP

http://jiyeonworldwide.forumtl.com/

Back to top Go down

Solved Re: Logo Sliding

Post by LGforum on November 5th 2011, 4:42 am

Look into jQuery animate() function. Wink

Code:

$(logo id).mouseover(function() {
 $(this).animate() {
 the stuff you want it to do
 }
});

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Logo Sliding

Post by robot_boy18 on November 5th 2011, 4:49 am

lol it's css not script bwi

robot_boy18
Forumember

Male Posts : 107
Reputation : 7
Language : English
Location : Greenville, South Carolina, USA

http://en.fmvi.org/

Back to top Go down

Solved Re: Logo Sliding

Post by LGforum on November 5th 2011, 5:08 am

I'd love to see you do that with CSS...

CSS can move things on mouseOver, but it can't animate things.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Logo Sliding

Post by Guest on November 5th 2011, 5:46 am

http://w3schools.com/cssref/css3_pr_transition.asp

That's how the logo hover was done on that theme.

Guest
Guest


Back to top Go down

Solved Re: Logo Sliding

Post by robot_boy18 on November 5th 2011, 5:47 am

It can, take a look at my example:
Code:
#logo {
    -moz-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    background-position: left center;
    background-repeat: no-repeat;
    height: 100px;
    position: relative;
    text-align: left;
    top: 15px;
}
#logo:hover {
    -moz-transform: translate(60px);
}

robot_boy18
Forumember

Male Posts : 107
Reputation : 7
Language : English
Location : Greenville, South Carolina, USA

http://en.fmvi.org/

Back to top Go down

Solved Re: Logo Sliding

Post by LGforum on November 5th 2011, 10:26 am

Razz I take it back! I do apologise.

man i need to look into more CSS3. I'm living in the past.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Logo Sliding

Post by Guest on November 5th 2011, 10:38 am

Code:

#logo, #i_logo {
    -moz-transition-duration: 1s;
    -moz-transition-property: -moz-transform;}
#logo, .#i_logo:hover {
    -moz-transform: translate(60px);
}

Guest
Guest


Back to top Go down

Solved Re: Logo Sliding

Post by Raze on November 6th 2011, 6:23 am

The codes didn't make my logo slide Sad

Raze
Forumember

Male Posts : 406
Reputation : 12
Language : English, HTML, CSS

Back to top Go down

Solved Re: Logo Sliding

Post by Guest on November 6th 2011, 11:23 am

Here you go:

Code:

#pun-logo {
    -moz-transition-duration: 1s;
    -moz-transition-property: -moz-transform;}
#pun-logo:hover {
    -moz-transform: translate(60px);
}

Guest
Guest


Back to top Go down

Solved Re: Logo Sliding

Post by Raze on November 6th 2011, 2:39 pm

Thanks Johnny it worked.

Raze
Forumember

Male Posts : 406
Reputation : 12
Language : English, HTML, CSS

Back to top Go down

Solved Re: Logo Sliding

Post by Nera. on November 6th 2011, 2:40 pm

Topic solved

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum