CODEWITHSUNDEEP
jqueryhtmlclasscss3d
daviestar
daviestar

Reputation: 4641

JQuery <html> class to trigger 3D transforms

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.

Upvotes: 0

Views: 335

Answers (2)

bobthyasian
bobthyasian

Reputation: 943

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.

Upvotes: 0

Zeb Rawnsley
Zeb Rawnsley

Reputation: 2220

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

Upvotes: 1

Related Questions