Jump to content

Recommended Posts

Posted

Hi!

I started learning web design about 4 months ago. I want to become a professional web developer. I learned some html and css and I know enough to make a "static"(?) website. I started learning Javascript but can't quite put it together yet. Then I thought I will try to learn some php because it might be easier than Javascript to get my head around programming logic and then make Javascript more understandable when I go back to it. (Php is making more sense to me than Javascript, I think). A couple of days ago my sister (graphic designer) asked me whether I could do the programming for one of her designs but the client wants a lot of animation in her home page. Things like a swing that swings when you hover over it, a phone that shakes as if it's ringing and a flag that moves in the wind also when you hover it and all of these are also the links to the other pages. So I figured out how to do this in css3 but sadly this is not going to work obviously because so few browsers supports it at the moment. The I came across jstween and was sure that that will fix my problem but now I am stuck with this.

 

<!DOCTYPE html>

<html>

<head>

 

<style type="text/css">

#target {

position: relative;

left: 300px;

top: 100px;

width: 100px;

height: 100px;

display: block;

}

</style>

<script type="text/javascript" src="scripts/jquery-1.10.1.js"></script>

<script type="text/javascript" src="scripts/jstween-1.1.js" ></script>

 

 

<script type="text/javascript">

$( '#target' ).tween({

rotate:{

start: 0,

stop: 360,

time: 0,

duration: 2,

effect:'easeInOut'

}

});

 

$.play();

 

</script>

</head>

 

<body>

 

 

<img src="images/swing.png" id="target" />

 

 

</body>

</html>

 

I have been reading on the internet for two days trying to figure out why this won't work and I am still convinced that it is some stupid small mistake on my part. Or that I am missing something with the css. Please help!

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...