effet Coverflow

Version imprimable

19/11/2008, 16h49
stanley

effet Coverflow

Bonjour à tous,

Je galère depuis pas mal de jours à cause d'un souci sur un effet de type Coverflow.

Bon, pour l'info, j'ai utilisé la librairie Javascript MooTools et l'outil MooFlow pour créer mon effet.

Le rendu est très joli, vous pouvez ce que j'ai pu faire ici : http://www.webdispo.com/mooflow

Mon problème, est l'espace blanc qu'il y a au dessus de l'animation, je veux dire que le conteneur de l'animation est trop grand, j'ai beau essayé de modifier les fichiers CSS, mais ça n'a rien donné, je voudrais en fait que le conteneur se limite à la taille des images + leur reflet et que je puisse économiser l'espace blanc qu'il y a en dessus.

Je cherche à faire cela car je dois insérer cet effet dans la partie contenu de mon site, donc en haut, y a le header + menu de navigation, je ne voudrais pas qu'il ya bcp d'espace avant de voir l'effet coverflow.

Si quelqu'un peut étudier le code de ce mooflow pour voir comment arranger ce problème, je lui en serais très reconnaissant.

Merci

Salut,

Utilisateur Mooflow, je me suis déjà penché sur cette question.

Pour réduire la taille du conteneur, tu dois réduire la taille des images en hauteur.

Pour cela, rien de plus simple, dans l'option d'instanciation, par défaut "factor: 115"

Il te suffit de mettre par exemple factor à 85

par exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
window.addEvent('domready', function(){
 
        var mf = new MooFlow($('MooFlow'), {
          useSlider: false,
          useAutoPlay: false,
          useCaption: false,
          useResize: true,
          useMouseWheel: true,
          useKeyInput: true,
          useViewer: false,
          startIndex: 8,
          bgColor:'transparent',
          reflection: 0.4,
          factor: 85,
          onClickView: function(obj){
            Milkbox.showThisImage(obj.href, obj.alt);
          }
        });
 
        navArrowSlider(
          'nav_wrap',
          '#nav_wrap ul li',
          'active_nav',
          '20px',
          '20'
        );
 
      });

Suffit de lire la doc' quoi =)

20/11/2008, 14h50
Lost In Translation

Et après réfléxion...

Tu peux réduire la hauteur du conteneur en utilisant heightRatio.
Par exemple, 1000px (width) * 0.4 (heightRation) = 400px

Donc si tu veux qu'il fasse 200px de hauteur... passe HeightRation à 0.2
21/11/2008, 11h19
stanley

Merci pour ta réponse, mais je pense que tu n'as pas très bien compris ma question ou bien que j'ai mal détaillé.

Si je change l'attribut factor, c'est la taille de mes images qui est réduite, et moi je veux éviter ça.

De même que pour HighRatio, si je rends ça à 200 Px, c'est vrai que le conteneur devient plus petit en hauteur, mais mes images sont rongées.

Moi ce que je veux, c'est garder la même taille des images, mais en positionnant tout l'effet coverflow sur le top de la page, c'est à dire enlever tout l'espace blanc en dessus de l'effet.

Alors, si on est mesure de changer la taille du conteneur, comme je l'ai dit en haut, les images sont rongées, mais il doit y avoir un moyen pour les repositionner vers le haut non ?
21/11/2008, 11h27
stanley

Bon j'ai trouvé la solution, mais je ne sais pas si c'est "propre" comme solution.

j'ai changé l'attribut offsetY, je l'ai mis à -150 et ça a très bien fonctionné.

Bon du moment que ça a marché, je mets résolu.

Merci à toi :yaisse2: