CODEWITHSUNDEEP
javascripthtml
user34537
user34537

Reputation:

smoothly move character on and off screen HTML

An Example of the problem

Randomly i have a character on screen. He starts offscreen and smoothly moves onto the screen. However i have the problem with it moving offscreen. Right now i put him in the body using jquery. When it gets to the right side i plan to remove him by checking the width and waiting until he is completely out of screen (just before he is out of screen half his body should be painted). The problem is when he moves to the right the width gets larger and i see a scrollbar appear.

How do i make a character not affect the width, have its body partially painted (on the right side, left side is not an issue) and know when it is completely out of sight?

Upvotes: 0

Views: 855

Answers (2)

nathan gonzalez
nathan gonzalez

Reputation: 11987

function MoveCode(){
    var l = $('.ball').css("left");
    $('.ball').css("left", (parseInt(l) + 8) + "px");
    setTimeout(MoveCode, 160);
}

$('body').append('<div style="width:100%; overflow:hidden;"><img class="ball" src="http://michaelreid.typepad.com/.a/6a00e54edabd838833011168a00f09970c-800wi"/></div>');
MoveCode()

just wrap your image in a div so you have something to set the overflow:hidden on without screwing with the page.

Upvotes: 2

Lee
Lee

Reputation: 13542

Just set overflow:hidden; on your html element:

html {
   overflow:hidden;
}

jsfiddle example

Upvotes: 1

Related Questions