Animation de texte sur des images d'un carrousel

Version imprimable

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:

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

27/01/2014, 09h43
blinkman04

Quel genre d'animation vise tu ? =)
27/01/2014, 11h27
Paul Reed Smith

Bonne question, j'ai sauté un paragraphe :lol: ç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
27/01/2014, 11h52
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:

$('#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/
27/01/2014, 12h42
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 !
27/01/2014, 12h49
blinkman04

De rien =)

Il suffit d'attacher cela à un évènement et hop le tour est joué
27/01/2014, 17h11
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 !