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.
