PDA

View Full Version : Animated moving background trouble & Scrollto jitters in Chrome/IE


JonNoH
03-15-2010, 05:55 AM
Hey guys, been not that long :)

Almost finished with redesign, got a couple more things and then these snags.

http://www.cloudtopstudios.com/test

First and foremost problem -

My airplane window. All I'm lookin for it to do is go from left to right and loop, that's it. I got the idea from this tutorial: http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/

also don't knock my sky background its basically just a placeholder right now till I get this animation working :thumbsup:

I cannot use the backgroundposition plugin as it throws my gallery out of whack. I explained this to a programmer friend of mine and asked if he could come up with it. Couldn't be but a few lines of code is what I'm thinking. He came back with this

<html>
<head>
<title>John's Window</title>
<style type="text/css">
#theWindow
{
height: 553px;
width: 436px;
background-image: url("planesky.jpg");
background-position: 0 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready( function() {
animateWindow();
});

function animateWindow()
{
$("#theWindow")
.css("background-position","800 -80")
.animate(
{"background-position":"0 -80"}
, 70000
, 'linear'
, animateWindow);
}
</script>
</head>
<body>
<div id="theWindow">
<img src="planewindow.png" alt="View through a window" />
</div>
</body>
</html>

it worked in Chrome (the browser he uses sure enough) but not FF and I don't even know about IE. However, after poppin it into my site I couldnt even get it to work in chrome, and all I did was rename "#theWindow" to "#sky" and use another div with bg instead of an img (personal preference).

Anyway after sending me this he promptly went to bed. :(

My second problem is less drastic but a nuisance I need resolved as it takes away from the pleasantry of reading on the move in Chrome and IE. My scrollto performance in these browsers is killing me and the same on any computer. I dont get it and cant find anything on it. Is it just too much jquery?
I need to keep my long transitions.

thanks for reading and triple thanks up front if you can help.

JonNoH
03-15-2010, 01:40 PM
update

works in IE.

????

JonNoH
03-16-2010, 12:04 AM
guess Ill just do it in flash then.... :(

JonNoH
03-23-2010, 10:52 PM
so I have no use for it anymore as I went flash and added to the original idea, but, someone released a tutorial today that's pretty much a copy of what I was doing. I figured I would come back here and post a link for anyone who might stumble across this thread in the future looking for a similar solution.

http://www.queness.com/post/2607/create-background-scrolling-effect-with-jquery