Member Avatar for cpat258

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
  • 134 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by cpat258

Recommended Answers

All 4 Replies

Member Avatar for stbuchok

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

Member Avatar for cpat258

I need to use javascript

Edited by cpat258
Member Avatar for stbuchok

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.

Member Avatar for cpat258

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.