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 - 1: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 - 2: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 : 51554
Reputation : 3524
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 - 3: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 - 3: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 : 51554
Reputation : 3524
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 - 3: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 - 3: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 - 3: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 - 3: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 - 4: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 - 4: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 - 4: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 - 9: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 - 9: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 - 5: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 - 10: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 - 13: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 - 13: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