Need help with assignment!!

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

3 Days

Discussion Span

1 Year Ago

Last Updated

6

Views

cpat258

Newbie Poster

11 posts since Apr 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

-1

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

stbuchok

Practically a Posting Shark

876 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

1 Year Ago

0

I need to use javascript

cpat258

Newbie Poster

11 posts since Apr 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

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.

stbuchok

Practically a Posting Shark

876 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

1 Year Ago

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>

cpat258

Newbie Poster

11 posts since Apr 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

Need help with assignment!!

This article has been dead for over three months: Start a new discussion instead