0

What i have to do is make a slider and that slider controls the speed of a spinning box. How to get the slider to control the speed with javascript?

<!DOCTYPE html>

<style>

.twirl { -webkit-animation:bluespin 3s linear infinite }

@-webkit-keyframes bluespin {
    from { -webkit-transform:rotate(25deg); }
    to   { -webkit-transform:rotate(400deg); background:red;}
    }
#test { width:100px; height:100px; background:black; margin-left: 50px; }

</style>

<div id="test" class="twirl" >Hello</div>
<br><br>

<label>Rotation Speed</label> <input name="Priority" type="range" min ="1" max ="5" value="1" step="1" /><br>
2
Contributors
4
Replies
7
Views
5 Years
Discussion Span
Last Post by cpat258
-1

Change the speed. In .twirl, the 3s is the speed, so whenever you change the slider, change the speed.

1

Yeah, so where is your problem then. I've told you what you need to do. If you are too lazy to look on Google, that's not my fault. I'm not going to give you the code for an assignment, but I will guide you. You need to search to see how to modify the animations speed using JavaScript, so Google that. You could also just set the style attribute every time the sldier is changed. Also, it is in the rules of the forum to not ask for help on assignments without showing that you've tried to do the work. So far I see no JavaScript what so ever.

0

Im sorry, here this is as far as i could get

<!DOCTYPE html>

<style>

.twirl { -webkit-animation:bluespin 3s linear infinite }

@-webkit-keyframes bluespin {
    from { -webkit-transform:rotate(25deg); }
    to   { -webkit-transform:rotate(400deg); background:red;}
    }
#test { width:100px; height:100px; background:black; margin-left: 50px; }

</style>
<script>
private var hSliderValue : float = 0.0;
private var myAnimation : AnimationState;

function Start(){
    myAnimation = animation["MyClip"];
}

function LateUpdate() {
    myAnimation.time = hSliderValue;
    myAnimation.enabled = true;

    animation.Sample();
    myAnimation.enabled = false;
}

function OnGUI() {
    hSliderValue = GUILayout.HorizontalSlider (hSliderValue, 0.0, myAnimation.length,GUILayout.Width(100.0f));
}
</script>
<div id="test" class="twirl" >Hello</div>
<br><br>

<label>Rotation Speed</label> <input name="Priority" type="range" min ="1" max ="5" value="1" step="1" /><br>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.