Modify CSS3 animation with Javascript

Question

First of all, here is the basic code for the site I need help with: check bottom for edit

I'd like some help with the animation itself, because if I'm at div 1 and press any key, it works like a charm. But if I'm at div 3 and want to go to div 2, for example, it first loads div 1 and then goes to div 2. I know why it does it, but I can't think of a way to go around it. Any ideas?

I'd also like to pause the function from inputs if the animation is already playing (so you can't spam numbers and mess up the animation). How could I do that in an easy way?

Thanks!

EDIT

Due to a few very nice guys asking for me not being lazy, OP delivers: http://jsfiddle.net/G4PXj/7

Also; http://codepen.io/anon/pen/zJsBH

Also, press HTML-box, then 2,3 or 4 and wait a few seconds for the animation to load into FOV.

HTML:

<div id="fourth" class="hidden">Fourth box
    <button onClick="fubar('first');">First page</button>
</div>
<div id="third" class="hidden">Third div</div>
<div id="second" class="hidden">Som text in the second</div>
<div id="first">Some content
    <button onClick="fubar('second');">Second page</button>
</div>

Style:

@charset "utf-8";
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#first {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    color: #fff;
    box-shadow: 0 0 40px #333;
    background-color: #000;
}
#second {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: green;
}
#third {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: red;
}
#fourth {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: blue;
}
.hidden {
    display: none;
}
.test {
    -moz-animation-name: wat;
    -webkit-animation-name: wat;
    -moz-animation-duration: 4s;
    -webkit-animation-duration: 4s;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    z-index: 100;
    display: block;
}
@-moz-keyframes wat {
    0% {margin-left:-3000px;}
    60% {margin-left: 200px;}
    100% {margin-left: 0;}
}
@-webkit-keyframes wat {
    0% {margin-left:-3000px;}
    60% {margin-left: 200px;}
    100% {margin-left: 0;}
}

Javascript:

function clearAll() {
    document.getElementById('first').className = '';
    document.getElementById('second').className = '';
    document.getElementById('third').className = '';
    document.getElementById('fourth').className = '';
}

function troll(objectID) {
    document.getElementById(objectID).className += ' test';
}

function fubar(objectID) {
    clearAll();
    troll(objectID);
}

function KeyCheck(e) {
    var KeyID = (window.event) ? event.keyCode : e.keyCode;
    switch (KeyID) {

    case 49:
        clearAll();
        troll('first');
        break;

    case 50:
        clearAll();
        troll('second');
        break;

    case 51:
        clearAll();
        troll('third');
        break;

    case 52:
        clearAll();
        troll('fourth');
        break;
    }
}
document.onkeyup = KeyCheck;

Desn't do anything on Firefox for me, just a black background. — elclanrs, Oct 01 '12 at 21:41
-1 for laziness. If it's ok for you to be lazy in asking, then it's ok for me to be lazy in answering. — Matt Ball, Oct 01 '12 at 21:43
@Linus Stengård: Instead of jsfiddle you can use http://codepen.io/pen/ with prefix-free for lazy code. — elclanrs, Oct 01 '12 at 21:46
I went ahead and added a new link which is not so lazy (with -webkit- added), and @elclanrs, thanks, I'll look into that! — Linus, Oct 01 '12 at 21:49
the fiddle dose not work, js errors, try this one http://jsfiddle.net/G4PXj/7/ — cuzzea, Oct 01 '12 at 21:52
Hi! You should add your code to your post in case of the content of your jsfiddle changes or disappears. Adding the code to your post also ensures that the content of your code will remain available in the future. — Littm, Oct 02 '12 at 02:57
@Littm Added code to post just to be sure, thanks for the tip! — Linus, Oct 02 '12 at 14:49

score 0 · Accepted Answer · edited May 23 '17 at 12:18

You could keep track of the previous page so that its z-index remains.

// CSS
.page{
  z-index: 0;
  // your other page settings
}
.previous{
  z-index: 99;
}
.test{
  z-index: 100;
  // your animation settings
}

Code :

document.getElementById('button1').onclick = function(){ gotoPage('first'); }
document.getElementById('button2').onclick = function(){ gotoPage('second'); }
var previous, current;

function gotoPage(id){
    // simplified className manipulation
    if(previous) previous.className = 'page';
    previous = current;
    if(previous) previous.className = 'page previous';
    current = document.getElementById(id);
    current.className = 'page test';
}

// key detection, etc.

jQuery version :

// JS
$('#button1').click(function(){ gotoPage('first'); });
$('#button2').click(function(){ gotoPage('second'); });
var $previous, $current;

function gotoPage(id){
  if($previous) $previous.removeClass('previous');
  $previous = $current;
  if($previous) $previous.removeClass('test').addClass('previous');
  $current = $('#' + id).addClass('test').removeClass('hidden');
}

// key detection, etc.

Fiddle : http://jsfiddle.net/G4PXj/9/

This ensures a pages layout with the following z-indexes : 100 for current (i.e. the animated page, you want it to be displayed above all others), 99 for previous (the page you are leaving : display above all the others, but still behind the animated page) and 0 for the rest, which are pages unrelated to the animation.

The gotoPage() function sets the page you are leaving (i.e. current) to previous, and the page you want to reach (i.e. document.getElementById(id)) to current. The layout then applies to these new pages settings.

As for pauses, here is a great example in this related question : How to pause and resume CSS3 animation using JavaScript?

Thanks, this did the job perfectly! Although I'm not that into jQuery, and I don't really understand how it does the job... Do you care explaining how the function works? Mostly $previous I'm confused about... — Linus, Oct 02 '12 at 14:37
No problem. I edited my answer with non-jQuery code. Think of it as "layers", where 2 pages (the one you are leaving and the animated one) are displayed above the rest. — Crogo, Oct 02 '12 at 15:22

Modify CSS3 animation with Javascript

1 Answers1