CSS & JS - Fixation et scroll d'une image en background

Question

Bonjour,

D'un le cadre d'un projet personnel, je suis en face d'un petit problème.
Avec les touches gauche & droite, je peux déplacer une boite à droite et à gauche sur une map (qui est le background !) !

La map est plus grande que ma fenetre (du style 2000 pixels) et donc dès que je bouge ma boite, eh bien la map va aussi vers la droite .... donc du coup je perds de vue la boite jusqu'à ce qu'elle ai fait tout le chemin ..

Ce que j'aimerais:
1 . Avoir un background fixé (j'ai testé background-position: fixed; c'est très mauvais x))
2. Quand ma boite bouge vers la droite, si elle se situe entre le millieu et la droite, on bouge le background en conséquence ...
3. De meme, pour les mouvements à gauche !
4. nb: Quand mon perso arrive entre le millieu et la gauche & si la map est deja scrollé toute à gauche, ben on arrete de scroll !


Quelqu'un à une idée comment faire ca ? ;o

nico

DakM · Answer

Ajout:

Quand je met background-attachment:fixed ben ma boite n'apparait plus (meme si elle a z-index:100)

PetoleTeam · Answer

Bonjour,
une seule question comment est la structure de ton document ?
body -> avec image en background
div  -> avec le personnage
où
div -> avec image en background
div -> avec le personnage

;O)

DakM · Answer

La structure est

body 
-- div avec image
---- autres trucs dans la map
-- div avec perso
-- (autres possibles perso (yen a pas encore !)

PetoleTeam · Answer

voir peut être dans la gestion des touches le "stoppage" de la propagation de l'événement pour qu'il ne se propage pas à la page...

;O)

DakM · Answer

Je pense utiliser la propriété:
style="crop(top,right,bottom,left)" qui permet de sortir un rectangle sur une image

Bonne idée?

DakM · Answer

Ahh merci PetoleTeam, mon fond d'image est maintenant tranquilement fixé !

Mais j'aimerais pouvoir faire bouger le fond en fonction de la où est mon perso.
J'ai une fonction pour obtenir le clip:rect(top, right, bottom, left) ... que voilà:

après quelques opérations de math j'ai

image = l'image que j'aimerais couper

image.setStyle({'clip': clip.evaluate(vars)});

J'ai fais un alert(clip.evaluate(vars)); et c'est bon les valeurs .. mais l'image ne se coupe pas ! :(

Comment faire pour la couper ??? :(

PetoleTeam · Answer

Bonjour,
si le background est un vrai background, pas un div que l'on met en arrière plan, tu peux toujours le déplacer en modifiant sa valeur CSS via le javascript

exemple de fonction :
//------------------------------------------
function SetBackgroundPosition( id_, x_, y_){
  var Obj = document.getElementById( id_);
  if( Obj)
    Obj.style.backgroundPosition = x_ +"px " +y_ +"px";
}

;O)

CSS & JS -> Fixation et scroll d'une image en background

7 réponses

Votre réponse

Discussions similaires