The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Logo Sliding

+2
SLGray
Raze
6 posters

Go down

Solved Logo Sliding

Post by Raze 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
Raze
Forumember

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

Back to top Go down

Solved Re: Logo Sliding

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

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


Logo Sliding Slgray10

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

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Logo Sliding

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

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

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

Back to top Go down

Solved Re: Logo Sliding

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

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


Logo Sliding Slgray10

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

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Logo Sliding

Post by Raze 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
Raze
Forumember

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

Back to top Go down

Solved Re: Logo Sliding

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

the logo moved.. well..u need codes for it..
maijiyeon
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 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
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Solved Re: Logo Sliding

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

lol it's css not script bwi
avatar
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 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
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Solved Re: Logo Sliding

Post by Guest 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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Logo Sliding

Post by robot_boy18 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);
}
avatar
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 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
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Solved Re: Logo Sliding

Post by Guest 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);
}
avatar
Guest
Guest


Back to top Go down

Solved Re: Logo Sliding

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

The codes didn't make my logo slide Sad
Raze
Raze
Forumember

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

Back to top Go down

Solved Re: Logo Sliding

Post by Guest 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);
}
avatar
Guest
Guest


Back to top Go down

Solved Re: Logo Sliding

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

Thanks Johnny it worked.
Raze
Raze
Forumember

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

Back to top Go down

Solved Re: Logo Sliding

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

Topic solved
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Back to top

- Similar topics

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