Jump to content
Lightning

jQuery keyframes animation for range slider

Recommended Posts

Hello Everyone,

I'm a beginner in CSS, HTML and Java Script/jQuery. I actually do not code, but i found a solutiuon for my problem with a simple CSS animation. I did not know, that the @keyframes animation still has some difficult stuff. I know they are hardcoded, but i need the help of jquery for dynamic change of the keyframes-selector.

I have searched several threads for my problem. Some do sound similar to my, but i just can not apply it into my code, it does not work.

I am trying to code dynamic keyframes with jquery. I got the following code below in a code snippet. It does not apply the animation yet.

HTML code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>My Code</h1>
<hr>
<form>
  <span style="display:inline-block; height: 20px;"></span>
  <b><font size="4">amplitude:</font></b><br>
  <input type="range" id="amp" name="amplitude" oninput="myFunction2()"
  placeholder="0" min="156" max="484" value="320" step="1">
  <br>
  <span style="display:inline-block; height:20px;"></span>
  <b><font size="4">phase:</font></b><br>
  <input type="range" id="pha" oninput="myFunction()"
  name="phase" min="181" max="681" value="181" step="1">
  <br>
  <span style="display:inline-block; height:20px;"></span>
  <b><font size="4">phase2:</font></b><br>
  <input type="range" id="pha2" oninput="myFunction3()"
  name="phase2" min="681" max="1181" value="781" step="1">
</form>


<p id="print1"></p>
<p id="print2"></p>
<p id="print3"></p>
<p id="print4"></p>
<input class="toggle" type="checkbox">
<div id="up-triangle1"></div>
<div id="down-triangle1"></div>
<div id="rectangle1"></div>
<div class="arrow21"></div>
<div class="arrow22"></div>

</body>

CSS code:

body {background-color: wight;}

h1 {color: black;
    text-align: center;
    font-family: LM Roman 12;}

p  {font-family: LM Roman 12;
    font-size: 20px;}

.toggle{
	position: absolute;
	margin: -120px 150px;
  width: 300px;
	color: white;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	font-size: 2.5em;
	cursor: pointer;
  z-index: 5;
}
.toggle:after {
         position: absolute;
	       display: block;
	       padding: 10px 0;
         width: 300px;
	       border: 1px solid #76011b;
	       border-radius: 8px;
	       background: green;
	       content: "Start";
         z-index: 5;
}
.toggle:checked:after {
                       background: red;
                       content: "Stop";
}


.toggle:checked ~ #up-triangle1 {
                -webkit-animation-name: up-triangle; /* Safari 4.0 - 8.0 */
                -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                animation-name: up-triangle;
                animation-duration: 2s;
                animation-direction: forward;
                animation-iteration-count: 100;
                animation-timing-function: linear;

}

.toggle:checked ~ #down-triangle1 {
                -webkit-animation-name: down-triangle; /* Safari 4.0 - 8.0 */
                -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                animation-name: down-triangle;
                animation-duration: 2s;
                animation-direction: forward;
                animation-iteration-count: 100;
                animation-timing-function: linear;
}

.toggle:checked ~ #rectangle1 {
                 -webkit-animation-name: rectangle; /* Safari 4.0 - 8.0 */
                 -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                 animation-name: rectangle;
                 animation-duration: 2s;
                 animation-direction: forward;
                 animation-iteration-count: 100;
                 animation-timing-function: linear;
}

.toggle:checked ~ .arrow21 {
                  -webkit-animation-name: arrow21; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                  animation-name: arrow21;
                  animation-duration: 2s;
                  animation-direction: normal;
                  animation-iteration-count: 100;
                  animation-timing-function: linear;
}

.toggle:checked ~ .arrow22 {
                  -webkit-animation-name: arrow22; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                  animation-name: arrow22;
                  animation-duration: 2s;
                  animation-direction: reverse;
                  animation-iteration-count: 100;
                  animation-timing-function: linear;
}

#up-triangle1 {
   position: absolute;
   top: 320px;
   left: 168.5px;
   width: 0;
   height: 0;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 45px solid #01ADAB;
}

@keyframes up-triangle {
           0% {top:320px;}
           25% {top:420px;}
           75% {top:220px;}
           100% {top:320px;}
}

#down-triangle1 {
   position: absolute;
   top: 607px;
   left: 168.5px;
   width: 0;
   height: 0;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-top: 45px solid #01ADAB;
}

@keyframes down-triangle {
    0% {top:607px;}
    25% {top:707px;}
    75% {top:507px;}
    100% {top:607px;}
}

#rectangle1 {
   position: absolute;
   top: 365px;
   left: 181px;
   height: 242px;
   width: 5px;
   background-color: #01ADAB;
}

@keyframes rectangle {
    0% {top:365px;}
    25% {top:465px;}
    75% {top:265px;}
    100% {top:365px;}
}

.arrow21 {
   position: absolute;
   top: 540px;
   left: 181px;
   height: 332px;  /* 332 */
   width: 5px;
   background-color: #80D0CF;
}

@keyframes arrow21 {
    0% {top:320px;}
    25% {top:420px;}
    75% {top:220px;}
    100% {top:320px;}
}

.arrow22 {
   position: absolute;
   top: 320px;
   left: 681px;
   height: 332px;
   width: 5px;
   background-color: #80D0CF;
}

@keyframes arrow22 {
    0% {top:320px;}
    25% {top:420px;}
    75% {top:220px;}
    100% {top:320px;}
}

#print1 {
    position: absolute;
    top: 111px;
    left: 182px;
    width: 50px;
    height: 10px;
}

#print2 {
    position: absolute;
    top: 58px;
    left: 110px;
    width: 50px;
    height: 10px;
}

#print3 {
    position: absolute;
    top: 151px;
    left: 182px;
    width: 50px;
    height: 10px;
}

#print4 {
    position: absolute;
    top: 170px;
    left: 200px;
    width: 50px;
    height: 10px;
}

Java/jQuery code:

var supportedFlag = $.keyframe.isSupported();
$.keyframe.debug = true;
var start = temp;
var start_100 = temp + 100;
var start_200 = start_100 + 100;

<script type='text/javascript'>

$(document).ready(function(){
    $('.arrow21').resetKeyframe(function() {
      switch (animation) {
        case 'normal':
        $('.arrow21').animate({
        name: 'arrow21-move',
        '0%': start,
        '25%': start_100,
        '75%': start_200;,
        '100%': start
        });
    });
});

function play(animation) {
$('.arrow21').playKeyframe({
      switch (animation) {
        if document.getElementById("pha").value < 180 then
            case 'normal':
            name: 'arrow21-move',
            duration: "4s",
            timingFunction: 'linear',
            iterationCount: '100',
            direction: 'normal',
            fillMode: 'forwards',

});
break;
        else
            case 'reverse':
            $('.arrow21').playKeyframe({
            name: 'arrow21-move',
            duration: "4s",
            timingFunction: 'linear',
            iterationCount: '100',
            direction: 'reverse',
            fillMode: 'forwards',
          });


function pause() {
    $('.arrow21').pauseKeyframe();
}

function resume() {
    $('.arrow21').resumeKeyframe();
}


/* phase */
function myFunction() {
         x = parseInt(document.getElementById("pha").value);
         document.getElementsByClassName('arrow21')[0].style.left = x;
         document.getElementsByClassName('arrow21')[0].style.top = 460 + (80 * Math.sin(0.0111 * (x-20)));
         temp = 460 + (80 * Math.sin(0.0111 * (x-20)));
         document.getElementById("print1").innerHTML = Math.round((x - 181) / 2.78);
         document.getElementById("print4").innerHTML = 460 + (80 * Math.sin(0.0111 * (x-20)));
}

/* amplitude */
function myFunction2() {
         y = parseInt(document.getElementById("amp").value);
         document.getElementsByClassName('arrow21')[0].style.height = y;
         document.getElementById("print2").innerHTML = y;
         document.getElementsByClassName('arrow22')[0].style.height = y;
         document.getElementById("ball").style.top = y + 100;
}

/* phase2 */
function myFunction3() {
         z = parseInt(document.getElementById("pha2").value);
         document.getElementsByClassName('arrow22')[0].style.left = z;
         document.getElementById("print3").innerHTML = Math.round((z - 181) / 2.78);;
}

The animation with the Start Button (checkbox) works fine for me. This should also be the resume button to continue the animation, if it once started. The shapes are moving in a proper way.

My Problem is, i do not kwow how can i get the current value from amplitude and apply it as a start condition to the shape. It is a dynamic value because of the range slider. This value changes the top position of the shape. The animation must begin from this current value shown at print1.

So if you change the value, the animation should change either and start from the same value where the range slider is. I need an updated animation, so if the animation is running and the amplitude is changed, it should be directly updated. (or after clicking start/stop) This should be possible for each value you set at the range. Also the animation should change from normal to reverse at the edge of 180 from phase range.

How can i achieve this? I tried already something, maybe it just have to be slightly modified.

Thanks in advance.

Share this post


Link to post
Share on other sites

Do you have an example of this online somewhere?  Are you trying to change the values in the CSS rules to match the inputs?

Share this post


Link to post
Share on other sites

I have a jsfiddle. I do not know why my range slider crash. They work on my editor but not in the jsfiddle ?!
https://jsfiddle.net/0c35n9q8/2/

On 10/23/2018 at 8:38 PM, justsomeguy said:

Are you trying to change the values in the CSS rules to match the inputs?

Yes. I am trying to change with the help of jquery the CSS @keyframes rule. As CSS @keyframes are hard coded, i found the possibility to do it with jquery. But it does not work yet for me with my code above. The CSS keyframes of arrow21 are not needed actually. This shell work with jquery.

Edited by Lightning

Share this post


Link to post
Share on other sites

They work on my editor but not in the jsfiddle ?!

Well, they're not the same environment.  If you're only running things inside an HTML editor, that's not the best test either, it's always best to put it on a server and open it with a browser like anyone would normally do.  You might develop something that works in the editor environment but not an actual browser.

It looks like you're trying to use a jQuery plugin, but you aren't including that plugin.  Make sure you're checking for errors in your browser's developer console, it looks like jQuery.keyframes requires a plugin.

Share this post


Link to post
Share on other sites

Well, i do not know exactly how to include the Plugin. I thought, it has access to it, if i call it online from google. Can you please help me out with the code? Thanks in advance.

I use chrome to view the results of the coding, so outside the Editor. It does work there, that is confusing.

Share this post


Link to post
Share on other sites

You just need to include the plugin file after including jQuery.  You may need to download and host it yourself if there's not a public version to include.

Share this post


Link to post
Share on other sites

Hello,

so i managed to implement the plugin. I tried the following example from this website http://keyframes.github.io/jQuery.Keyframes/. It works fine in chrome. I now tried to implement it to my code afterwards, but it does not work. Because of the test with the link above, i am quite sure, that the problem is not with the plugin anymore. It must be somewhere in the syntax.
I minimized the code in JSFiddle https://jsfiddle.net/0c35n9q8/6/ just to get the jquery to work.

Anybody an idea?

Edited by Lightning
new link

Share this post


Link to post
Share on other sites

I don't think that code is going to work for anyone else, you're linking to a Javascript file on your personal computer.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×