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 Sat 5 Nov 2011 - 2:18

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 Sat 5 Nov 2011 - 3:56

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 : 51408
Reputation : 3519
Language : English
Location : United States

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

Back to top Go down

Solved Re: Logo Sliding

Post by Raze Sat 5 Nov 2011 - 4:05

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 Sat 5 Nov 2011 - 4:07

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 : 51408
Reputation : 3519
Language : English
Location : United States

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

Back to top Go down

Solved Re: Logo Sliding

Post by Raze Sat 5 Nov 2011 - 4:08

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 Sat 5 Nov 2011 - 4:40

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 Sat 5 Nov 2011 - 4:42

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 Sat 5 Nov 2011 - 4:49

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 Sat 5 Nov 2011 - 5:08

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 Sat 5 Nov 2011 - 5:46

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 Sat 5 Nov 2011 - 5:47

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 Sat 5 Nov 2011 - 10:26

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 Sat 5 Nov 2011 - 10:38

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 Sun 6 Nov 2011 - 6:23

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 Sun 6 Nov 2011 - 11:23

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 Sun 6 Nov 2011 - 14:39

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. Sun 6 Nov 2011 - 14:40

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