Jump to content

Lightning

Members
  • Content Count

    4
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Lightning

  • Rank
    Newbie
  1. Lightning

    jQuery keyframes animation for range slider

    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?
  2. Lightning

    jQuery keyframes animation for range slider

    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.
  3. Lightning

    jQuery keyframes animation for range slider

    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/ 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.
  4. 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.
×