Mood script for XenForo?

[Dismounted]

With CSS 3... It would be possible to create something like this... But I am still not sure I like it...

I think we're getting closer. Also time to put on my "coding hat" and the need to be able to gracefully degrade from that position (which is just displaying it in "full view", plain and simple, I think).

 

[James]

With CSS 3... It would be possible to create something like this... But I am still not sure I like it...

I like the way it kinda sticks out, I'm not sure if that's something suitable... it looks okay in my own personal opinion but I don't have an eye for beauty

It's possible with CSS3 transitions but I think only webkit browsers have them installed at the minute? I remember FireFox implementing it but it wasn't fully functional.

Don't forget that the forum comes with jQuery by default so it's easier to do animations

 

[Cezz]

I think we're getting closer. Also time to put on my "coding hat" and the need to be able to gracefully degrade from that position (which is just displaying it in "full view", plain and simple, I think).

That would be easy to do... You would place it in its default position and then use CSS3, to move it out of view and angle it like that... There wouldn't be any need for JS either which would be nice... just hover effects.

 

[James]

That would be easy to do... You would place it in its default position and then use CSS3, to move it out of view and angle it like that... There wouldn't be any need for JS either which would be nice... just hover effects.

-webkit-transition: -webkit-transform 0.5s ease-in;
-webkit-transform: rotate(-45deg);

That should work fine... for Chrome, assuming the mood is underneath the postbit at the bottom

*tests now*

 

[James]

UPDATE:

someElement:hover{
-webkit-transition: -webkit-transform 0.5s ease-in;
-webkit-transform: rotate(-45deg);

Confirmed to work fine. Rotates 45degrees anti-clockwise in Chrome

 

[Cezz]

I like the way it kinda sticks out, I'm not sure if that's something suitable... it looks okay in my own personal opinion but I don't have an eye for beauty

It's possible with CSS3 transitions but I think only webkit browsers have them installed at the minute? I remember FireFox implementing it but it wasn't fully functional.

Don't forget that the forum comes with jQuery by default so it's easier to do animations

I don't think animations would be needed, just the ability to angle the image I am sure that most of the newer browsers can do this, and those that can't we can just display as normal (Or use JS) either one

 

[James]

May as well use JS as a fallback for incompatible browsers, makes sense with the jQ framework!

 

[Cezz]

The -webkit-transform I am most interested in... Don't really care for the transition so much, though if the browser supports it why not... I am sure that firefox supports transform CSS3 but not transition.

 

[James]

-webkit-transform is awesome. I use it mainly with transitions to perform nice transitional effects (opacity changes, rotations). I think it'd work well with the animations already existing on XF.

See here:
http://webkit.org/blog/130/css-transforms/
https://developer.mozilla.org/en/CSS/-moz-transform

 

[Dismounted]

I believe Firefox supports some kind of rotation (i.e. transform) in 3.5+. But I'll have to (re)test that out myself.

 

[James]

@Dismounted, I posted above
https://developer.mozilla.org/en/CSS/-moz-transform

 

[Dismounted]

Guess I was late to the party again.

 

[Cezz]

@Dismounted, I posted above
https://developer.mozilla.org/en/CSS/-moz-transform

What I love is when used with a block of text etc it is still a block of text and this is awesome... ... Still inexable and still can be highlighted and copied... CSS3 along with HTML5 canvas tag is going to change the web

 

[Dismounted]

The stuff canvas can do is AMAZING. I can't explain how awesome it is. Too bad I'm not much of a design artist, as much as I'd like to be. I'm "just" the programmer...

 

[Disjunto]

With CSS 3... It would be possible to create something like this... But I am still not sure I like it...

make it come out from under the avatar

 

[Cezz]

make it come out from under the avatar

Hmmm that is an even nicer idea... I like that one..

 

[James]

If you wanted it to come out of the avatar, you could have something like a rotate-out on the right of the avatar (showing only the icons - move them to the right) then if you hover over the rotate, it slides out completely to view the full thing.

 

[Cezz]

If you wanted it to come out of the avatar, you could have something like a rotate-out on the right of the avatar (showing only the icons - move them to the right) then if you hover over the rotate, it slides out completely to view the full thing.

Mock-up so that I can see what you are thinking...

 

[James]

If only I had the graphic skills. *finds previous mockup*

Instead of it sliding out you could have a rotate transition that moves it from behind the avatar to the position in the mockup but then when you hover over the bit that sticks out, it will slide out to the right to reveal the full bar (you're only going to hover over it if you want to know what it's about).

Again, positioning isn't great (could probably preset a few different positions) but it's a thought.

 

[Peggy]

This would be great... but.... where would you put the selector?