Discussion :

[Paul Reed Smith]

Bonjour à tous,

j'essaye en vain de trouver comment animer du texte (les titres et sous-titres) en javascript sur un carrousel d'images. Le carrousel fonctionne bien mais je m'évertue à faire bouger ces textes sur les images.

J'utilise le code d'un plugin pour le carrousel qui fonctionne parfaitement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// Set custom shortcut to avoid conflicts
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
 
    // Get the slideshow options
    var $slidespeed      = parseInt( meteorslidessettings.meteorslideshowspeed );
    var $slidetimeout    = parseInt( meteorslidessettings.meteorslideshowduration );
    var $slideheight     = parseInt( meteorslidessettings.meteorslideshowheight );
    var $slidewidth      = parseInt( meteorslidessettings.meteorslideshowwidth );
    var $slidetransition = meteorslidessettings.meteorslideshowtransition;
 
    // Setup jQuery Cycle
    $j('.meteor-slides').cycle({
        cleartypeNoBg: true,
        fit:           1,
        fx:            $slidetransition,
        height:        $slideheight,
        next:          '#meteor-next',
        pager:         '#meteor-buttons',
        pagerEvent:    'click',
        pause:         1,
        prev:          '#meteor-prev',
        slideExpr:     '.mslide',
        speed:         $slidespeed,
        timeout:       $slidetimeout,
        width:         $slidewidth
    });
 
    // Setup jQuery TouchWipe
    $j('.meteor-slides').touchwipe({
        wipeLeft: function() {
            $j('.meteor-slides').cycle('next');
        },
        wipeRight: function() {
            $j('.meteor-slides').cycle('prev');
        },
        preventDefaultEvents: false
    });
 
    // Add class to hide and show prev/next nav on hover
    $j('.meteor-slides').hover(function () {
        $j(this).addClass('navhover');
    }, function () {
        $j(this).removeClass('navhover');
    });
 
    // Set a fixed height for prev/next nav in IE6
    if(typeof document.body.style.maxWidth === 'undefined') {
        $j('.meteor-nav a').height($slideheight);
    }
 
    // Add align class if set in metadata
    $j('.meteor-slides').each(function () {
        meteormetadata = $j(this).metadata();
        if (meteormetadata.align == 'left') {
            $j(this).addClass('meteor-left');
        } else if (meteormetadata.align == 'right') {
            $j(this).addClass('meteor-right');
        } else if (meteormetadata.align == 'center') {
            $j(this).addClass('meteor-center');
        }
    });
 
});

Voici le plugin en action avec le css et html associés :
http://jsfiddle.net/EJ4A4

Si vous avez une idée, je suis preneur !
Merci d'avance

[blinkman04]

Quel genre d'animation vise tu ? =)

[Paul Reed Smith]

Bonne question, j'ai sauté un paragraphe ça serait par exemple faire bouger le titre de droite à gauche et les sous-titres de haut en bas jusqu'à leur position actuelle, dans ce style là : http://wowslider.com/html5-image-sli...ck-v-demo.html

[blinkman04]

Le plus simple si tu est familier avec jQuery (Et si tu ne l'est pas, c'est assez accessible) et voir du côté des fonction animate de jQuery.

Un exemple tout bête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#image').delay(0).animate({left: '-=90',opacity: 0}, 2500, function(){/*Animation complete.*/});

Le code ci dessus cible ta div id="image" avec une temporisation égale à 0ms puis les paramètre que tu veux, ici un déplacement de 90 px et une opacité qui passera à 0 à la fin. Bref tout est paramètrable à ta guise.

Documentation ici ---> http://api.jquery.com/animate/

[Paul Reed Smith]

Merci pour ta réponse, je viens d'essayer ton code et ça fonctionne, donc prometteur ! Je vais regarder le paramétrage plus en détail !

[blinkman04]

De rien =)

Il suffit d'attacher cela à un évènement et hop le tour est joué

[Paul Reed Smith]

Hello, je me trouve désormais face à un nouveau problème qui est celui du retour de l'animation à son état d'origine (état css d'origine) ainsi que celui de la répétition de l'animation. Car pour l'instant j'arrive certes à animer les éléments de texte mais ça ne le fait pas pour chaque image du carrousel. Aurais-tu une idée sur comment procéder ?

Voici le jsfiddle édité pour jouer avec le code :
http://jsfiddle.net/EJ4A4/1/
Merci !