making HTML 5 elements move in from side

When my page loads, is it possible for my HTML elements (textbox, div, section, article) , etc to be made to load in a moving manner, maybe fly-in from right?

are these effect possible?
RTKHOTAsked:
Who is Participating?
 
Julian HansenCommented:
Yes you can use javascript to do this or preferably JQuery to animate the elements.

Something like this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.offscreen').animate({left: 0}, 5000, function() {
	$(this).css({position: 'relative', top: 'auto', left: 'auto'});
  })
});
</script>
<style type="text/css">
form {
  position: relative;
  width: 400px;
  overflow: hidden;
  border: 1px solid #ececec;
  height: 400px;
}
div.offscreen {
	position: absolute;
	left: 600px;
}
</style>
</head>
<body>
<form>
	<div class="offscreen" id="textbox">
		<input type="text" name="firstname" id="firstname" />
		<textarea name="firstname" id="comment" rows="4" cols="40">
		</textarea>
	</div>
</form>
</body>
</html>

Open in new window

0
 
RTKHOTAuthor Commented:
i am having difficulties with scrollbars and mispositioning of elements. i have attached my code in the file below.

Can you please make the <article id=artGameRules> section fly in from right (or left) but without causing any browser scrollbars to appear
Splash.txt
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.