JQuery <html> class to trigger 3D transforms

Question

I am looking for a nice method to cue css3 3d transforms, by adding classes to the html tag using JQuery. I have a menu like this:

<ul>
    <li class="menu1"><a href="#">Item 1</a></li>
    <li class="menu2"><a href="#">Item 2</a></li>
    <li class="menu3"><a href="#">Item 3</a></li>
    <li class="menu4"><a href="#">Item 4</a></li>
    <li class="menu5"><a href="#">Item 5</a></li>
    <li class="menu6"><a href="#">Item 6</a></li>
</ul>

For example if '.menu1 a' is clicked, I'd like to add the class 'show1' to the html tag. 'show2' if '.menu2 a' is clicked etc.

However for my transitions to work correctly I also need another class to be added, then removed after a set time like 3 seconds. So if '.menu1 a' is clicked, the html class would be 'show1 zoom' for 3 seconds, then just 'show1'. And if '.menu2 a' is clicked, the html class would be 'show2 twirl' for example.

I don't mind setting the name of the transition (zoom, twirl, etc.) manually in the script, but if it's easier/neater I could use a system of classes on the li, like 'menu1 p-show1 t-zoom'.

I have a half-working example here. If you inspect the html tag (click gear beside html) and change the html class from 'show1' to 'show2 zoom' you will see the desired transition, which should be the cube rotating to the correct side (.show2) and also a fancy transition (.zoom) on top. Everything is working correctly except the .js which I can't get working at all!

New demo here.

Can I get a list of all the classes? (I'm too lazy to go through the demo css) — bobthyasian
– bobthyasian, Commented Dec 15, 2012 at 11:42
If you mean the 'system of classes' bit I mention above, see these as an example of all classes: 'menu1 p-show1 t-zoom' 'menu2 p-show2 t-spin-light' 'menu3 p-show3 t-stutter' 'menu4 p-show4 t-flatten' 'menu5 p-show5 t-wander' 'menu6 p-show6 t-open'. P stands for position, which side of the cube is facing front, T stands for transition name. I can add these to the HTML and they could be picked up by the script and injected into the html tag? — daviestar
– daviestar, Commented Dec 15, 2012 at 12:01
Ok, and the transitions are the ones that are removed after 3 seconds? It took me a few minutes to figure out how it all worked. Plus the vodka doesn't help. Lol — bobthyasian
– bobthyasian, Commented Dec 15, 2012 at 12:05

Zeb Rawnsley · Accepted Answer · 2012-12-15 23:49:37Z

1

Old CodePen Demo

P.S. I think those transitions are awesome!

EDIT:

Code changes to fix the pre-3second click transition bug:

var currentShow, currentTransition, currentTimeout;

$('.menu ul li a').click(function() {
    var $this = $(this);
    var $li = $this.closest('li');
    var index = $li.attr('class').replace(/menu/, '');
    var $html = $li.closest('html');

    $html.removeClass(currentShow);

    if (currentTransition) {
        $html.removeClass(currentTransition);
        clearTimeout(currentTimeout);
        setTimeout(function () {
            DoTransition(index, $html); 
        },50);
    } else {
        DoTransition(index, $html); 
    }

});

function DoTransition(index, $html) {
    currentShow = 'show'.concat(index);
    currentTransition = GetTransitionString(index);

    $html.addClass(currentShow + ' ' + currentTransition);

    currentTimeout = setTimeout(function() {
        $html.removeClass(currentTransition);
        currentTransition = null;
    }, 3000);
}

function GetTransitionString(index) {
    var transition;

    switch (parseInt(index)) {
        case 1:
            transition = 'zoom';
            break;
        case 2:
            transition = 'zoom';
            break;
        case 3:
            transition = 'zoom';
            break;
        case 4:
            transition = 'zoom';
            break;
        case 5:
            transition = 'zoom';
            break;
        case 6:
            transition = 'zoom';
            break;
    }

    return transition;
}

Updated CodePen Demo

edited Dec 15, 2012 at 23:49

answered Dec 15, 2012 at 8:50

Zeb Rawnsley

2,2201 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

daviestar Over a year ago

i have the demo here. it does everything i need it to do, thanks! :) right now there is a bug where clicking the next item within 3 seconds doesn't trigger the 'zoom' transition, but that is my fault as they are currently all set to 'zoom' until i make more transitions. i have a strange issue- i can't click on sides 3-6, not to do with the js, i think it's to do with the 3d rotation.. any ideas? new question?

Zeb Rawnsley Over a year ago

@daviestar thanks for the feedback, I've made some code changes in my answer to fix the pre-3second click transition bug, let me know if it works well for you.

daviestar Over a year ago

I updated the demo here. Thanks, this is working perfectly :) Now I get to have fun making more transitions and backgrounds! Not sure if I should make this my accepted answer as both scripts work well and have pros and cons. Your solution is more stable in my testing.

Zeb Rawnsley Over a year ago

@daviestar I like "Thanks, this is working perfectly :)" - Good luck with the rest of your project.

user1726343 Over a year ago

@daviestar You should accept the answer that works best (in this case this one).

|

bobthyasian · Accepted Answer · 2012-12-16 03:24:38Z

0

Here's a condensed version:

$('.menu ul li a').click(function() {
    var i = $(this).parent('li').index() + 1, 
       mc = $(this).parent('li').attr('class'),
      trg = $(this).closest('html'),
       cc = trg.attr('class'),
       newclass;
       switch (i) {
           case 1: var effect = 'zoom';
               break;
           case 2: var effect = 'spin-light';
               break;
           case 3: var effect = 'stutter';
               break;
           case 4: var effect = 'flatten';
               break;
           case 5: var effect = 'wander';
               break;
           case 6: var effect = 'open';
               break;                               
       }
      newclass = mc+' show'+i+' '+effect+' -webkit-';
      trg.attr('class', newclass).delay(3000).queue(function(){$(this).removeClass(effect);$(this).dequeue();}); 
});

I researched for a long time into the CSS animation issue. Only sides 1 and 2 have clickable menus. For some reason the other sides are having issues. Right clicking and inspecting element takes me to the cube wrapper. From the research I've done, I'm guessing it has to do with ::before and ::after More Info

I hope this all helps.

edited Dec 16, 2012 at 3:24

answered Dec 15, 2012 at 14:40

bobthyasian

9436 silver badges17 bronze badges

9 Comments

daviestar Over a year ago

Thanks! For some reason it's not working for me - the body class is changing to 'menu2 show2' instead of 'show2 zoom' when clicking on the 2nd menu item. Should I edit the html? I'm still stumped on the clicking issue.. I tried :before and :after hacks but no dice. 1 and 2 are front and back sides - meaning they still have x and y of 500px in 2D when the page loads, but the other 4 sides are invisible before the rotation.. my guess is the problem comes from this.

bobthyasian Over a year ago

Are you sure about the classes? It's applied to the <HTML> tag just as you asked, 'menu1 show1 zoom' (there's also '-webkit-' used by that other js). And then 3 seconds after it's applied the effect class is removed, in this case 'zoom'. Or did you not want the menu class applied too?

daviestar Over a year ago

You can have a look at it here. Apologies if it's a n00b js issue caused by me :)

bobthyasian Over a year ago

The last two lines are the 'meat'. newclass = mc+' show'+i+' '+effect+' -webkit-'; <- this is what classes get applied, remove mc+ to take off the menu class. trg.attr('class', newclass).delay(3000).removeClass(effect); <- this is what applies the classes, notice the delay(3000), that waits 3 seconds and then proceeds to remove the effect class (like zoom). No need to apologize, I initially misunderstood. As for the CSS animation, that's not my forte.

daviestar Over a year ago

is it working for you? it doesn't apply 'zoom' or other transition names for me :( fixed the clicking bug - added perspective: 5000px; to .cube_wrap.

|

Collectives™ on Stack Overflow

JQuery <html> class to trigger 3D transforms

2 Answers 2

7 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related