déplacer doucement le caractère sur et hors écran HTML

Question

An Example of the problem

Au hasard, j'ai un caractère à l'écran. Il commence hors écran et se déplace doucement sur l'écran. Cependant, j'ai le problème avec le déplacement hors écran. En ce moment je l'ai mis dans le corps en utilisant jquery. Quand il arrive sur le côté droit, je prévois de l'enlever en vérifiant la largeur et en attendant qu'il soit complètement hors de l'écran (juste avant qu'il ne soit hors de l'écran, la moitié de son corps devrait être peinte). Le problème est quand il se déplace vers la droite, la largeur devient plus grande et je vois une barre de défilement apparaît.

Comment est-ce que je fais un caractère n'affecte pas la largeur, a son corps partiellement peint (du côté droit, côté gauche n'est pas un problème) et sait quand il est complètement hors de vue?

Answer 1

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() 

simplement envelopper votre image dans un div afin que vous avez quelque chose à régler le overflow: hidden sans vissage avec la page .

Answer 2

Il suffit de définir overflow:hidden; sur votre élément html:

html { 
    overflow:hidden; 
} 

jsfiddle example