Comment améliorer cette équation mathématique de type JS Parallax?

J'ai quelques problèmes avec cette équation. Essentiellement, je voudrais que la division artboard (grid) se positionne sur le bord du navigateur lorsque le curseur se trouve à moins de 200px du bord. Cela peut facilement être fait en réglant la position en regardant les coordonnées de la souris, mais je voudrais qu'il soit fluide. C'EST À DIRE. Si la souris est à 199px du bord gauche, le lVal devrait lentement décrémenter jusqu'à ce que le bord de l'objet du plan de travail soit aligné avec le bord du chrome.Comment améliorer cette équation mathématique de type JS Parallax?

Pour l'instant, j'ai ce travail pour le bord gauche, mais je ne peux pas comprendre comment le faire avec le droit sans causer un léger bruit.

Veuillez revoir mon exemple ci-dessous.

http://dev.nimmbl.com/sampler/#

winSize[] = document window size (y,x) 

2940 = width of artboard object 


    function moveArtboard(e){  

    var t = docbody.offset(), space = 400, lVal, tVal; 

    lVal = Math.round((space/2) + (e.pageX - t.left) * (winSize[1] - (2940 + space))/winSize[1]); 
    tVal = Math.round((space/2) + (e.pageY - t.top) * (winSize[0] - (1200 + space))/winSize[0]); 

    if(lVal >= 0){ 
     artboard.obj.css({ 
      "left": 0, 
      "top": tVal 
     }); 
    } else if(lVal + -winSize[1] <= -2940){ 
     artboard.obj.css({ 
      "left": "auto", 
      "right": 0, 
      "top": tVal 
     }); 
    } else { 
     artboard.obj.css({ 
      "left": lVal, 
      "top": tVal 
     }); 
    } 

}

Source

2011-04-07 chris

Je pense comme ça. Il y a un cadre invisible qui se trouve dans la fenêtre qui représente 80% de la taille de la victoire. Le cadre doit être centré et la distance entre le cadre et le bord est la valeur qui devrait être utilisée comme un multiplicateur. Mon objectif est d'afficher la boîte de gauche ou de droite sans que l'utilisateur ne défile tout le long du bord du navigateur chrome. – chris

Je trouve toujours des équations comme celui-ci plus facile à traiter lorsque vous réglez la position de la souris pour être un% de ce que vous voulez:

var percent = Math.min(1, Math.max(0, e.pageX - 200)/(winSize[1] - 400)); 
var lVal = -percent * (2940 - winSize[1]); 
var tVal = Math.round((space/2) + (e.pageY - t.top) * (winSize[0] - (1200 + space))/winSize[0]); 

artboard.obj.css({ 
    left : lVal, 
    top : tVal 
});

Les deux Math fonctions sont gardez la valeur de 0 à 1 quand elle est proche du bord. percent est maintenant un nombre de 0-1, il suffit de multiplier par beaucoup de place avec laquelle vous devez travailler.

Je suis assez sûr que c'est vrai, laissez-moi savoir si ce n'est pas parfait, ne l'ai pas testé.

J'ai aussi une fonction Math.constrain j'ai écrit pour des cas comme celui-ci:

Math.constrain = function(num, min, max){ 
    return num < min ? min : num > max ? max : num; 
} 

var percent = Math.constrain((e.pageX - 200)/(winSize[1] - 400), 0, 1);

Source

2011-04-07 18:18:22

Désolé, mais les maths ne sont pas mon fort, j'ai bricolé avec ça pendant quelques jours. Comment pourrais-je l'utiliser dans mon script actuel? – chris

Edited ma réponse, juste essayer de remplacer la plupart de votre code (après la ligne 'var t = ...') avec mon premier bloc de code –

Cela a fonctionné comme un charme! Je vous remercie!!!! Alors, comment cela fonctionne-t-il exactement? hahah – chris

Merci mec!

function moveArtboard(e) 
{ 
var t = docbody.offset(), 
    space = 400, 
    percent = Math.min(1, Math.max(0, e.pageX - (space/2))/(winSize[1] - space)), 
    vPercent = Math.min(1, Math.max(0, e.pageY - (space/2))/(winSize[0] - space)), 
    lVal = -percent * (2940 - winSize[1]), 
    tVal = -vPercent * (1200 - winSize[0]); 

artboard.obj.css({ 
    left : lVal, 
    top : tVal 
}); 
}

Source

2011-04-07 19:11:53 user697409

Comment améliorer cette équation mathématique de type JS Parallax?

Répondre

Questions connexes