Ajouter un div texte qui "slide" dans un diaporama

**dhillig** · 15/11/2015, 18h02

Bonsoir à tous,
J'ai un diaporama fonctionnant via l'opacité (pas de slider) dont voici le script (malmené par mes soins, pardon à son EXCELLENT auteur ) :

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
<script>
var bgfade = '#bgfadewrap'; // variable globale
function background_init() {
  $(bgfade).css({'height':$(window).height()+'px','width':$(window).width()+'px'});
}
function background_anim() {
  var bg_H = $(bgfade).height();
  $(bgfade+' > div h1').first().css({'margin-top':(bg_H/0)+'px','opacity':'1','font-size':'100px'}).animate({'margin-top':'-'+(bg_H/0)+'px','opacity':'0','font-size':'100px'}, 2500);
    $(bgfade+' > div').first().appendTo(bgfade).fadeOut(2000);
    $(bgfade+' > div').first().fadeIn(2000);
    $(bgfade+' > div h1').first().css({'margin-top':(bg_H*0/0)+'px','opacity':'0','font-size':'100px'}).animate({'margin-top':(bg_H/0)+'px','opacity':'1','font-size':'100px'}, 2500);
    setTimeout(background_anim, 5000); // 5 secondes
}
$(window).on('load', function(){
  $(bgfade+' > div').hide();
  background_init();
  background_anim();
});
$(window).on('resize', function(){
  background_init();
});
</script>

Je souhaiterais qu'un div (hidden) slide vers la gauche lors de l'affichage de la photo, et se "referme" pour afficher un second div texte correspondant à la seconde photo etc...
Dans mon cas, #Polina correspond au texte que je souhaiterais voir "slider" (#bgfade1 affiche la première photo de mon diaporama)

Code html :

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

1
2
3
4
5
6
7
  <div id="bgfade1">
    <div id="polina">
<h1>Polina</h1>
<p><Encore une page test</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
</div></div>

Cela est-il possible en partant du script d'origine ?
Merci pour votre aide et bonne soirée,
dh

**dhillig** · 16/11/2015, 22h48

Bonsoir à tous,
je manière d'une façon différente la question posée hier.
Je sus parti de ce code (un pur bonheur) :
http://codepen.io/jreaux62/pen/aOvemE
A la place du texte qui descend en s'agrandissant... puis remonte en se rapetissant, je souhaiterai que l'animation s'ouvre sur une div cachée (#polina) qui s'ouvre sur la droite (slide) pendant la transition, et se referme (slide) de la même manière.
La seule animation désiré est cette div cachée (qui contient photos etc...) et apparaît lorsque l'image du diaporama s'affiche pour disparaître au profit d'une autre).
Entre hier et aujourd'hui, j'ai bien tenté de lier figure/Figcaption aux images du diaporama... Une catastrophe

Quelqu'un peut-il m'expliquer le codepen cité plus haut, à quoi correspondent ces chiffres/lettres/données/valeurs (je n'y comprends rien) ?
Peut-être qu'avec ces infos, pourrais-je arriver à ce que je désire ???
Bonne soirée à vous et merci,
dh

Invité · 17/11/2015, 09h30

Bonjour,

avec slide :

http://codepen.io/jreaux62/pen/EVrdOM

N.B. étudie les différences avec le code précédent.

Code html :

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
<div id="bgfadewrap">
  <div id="bgfade1">
    <div>
      <h1>Hello The World</h1>
      <p><Encore une page test</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
    </div>
  </div>
  <div id="bgfade2">
    <div>
      <h1>Life is Great</h1>
      <p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
    </div>
  </div>
  <div id="bgfade3">
    <div>
      <h1>Enjoy & Smile</h1>
      <p>Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</p>
    </div>
  </div>

Code css :

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
#bgfadewrap { text-align:center; }
#bgfadewrap, #bgfadewrap > div {
	z-index:-1;
	top:0; left:0; bottom:0; right:0; 
	width:100%; height:100%;
}
#bgfadewrap {
	position:fixed;
	background:#000;
}
#bgfadewrap > div {
	position:absolute;
	background-size:cover;
	display:none;
}
#bgfade1 {
  background-image:url('http://res1.windows.microsoft.com/resbox/en/windows/main/3245d978-ad9e-4cb2-be29-3332206fecce_5.jpg');
}
#bgfade2 {
  background-image:url('http://res2.windows.microsoft.com/resbox/en/windows/main/de1927c3-06a3-4ea1-b699-dbdaae3e5d32_5.jpg');
}
#bgfade3 {
  background-image:url('http://res1.windows.microsoft.com/resbox/en/windows/main/9ce62f36-1ed9-48dc-a417-ab6cab263d46_5.jpg');
}
 
/* bloc de texte qui SLIDE */
#bgfadewrap > div > div {
  position:absolute; 
  width:100%; padding:0; 
  top:0; left:-100%; /*position initiale */
}
#bgfadewrap > div > div h1 { 
  text-align:center; font-size:400%; color:rgba(0,0,0,0.5); 
  margin:2% 20%;
}
#bgfadewrap > div > div p { 
  text-align:center; font-size:140%; color:rgba(0,0,0,0.8); 
  margin:0 20%;
}

Code javascript :

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
var bgfade = '#bgfadewrap'; // variable globale
function background_init() {
  $(bgfade).css({'height':$(window).height()+'px','width':$(window).width()+'px'}); // on donne au background les dimensions de la fenêtre
}
function background_anim() {
  var bg_H = $(bgfade).height();
  $(bgfade+' > div > div').first().css({'opacity':'1','left':'0'}, 3000).animate({'opacity':'0','left':'100%'}, 3000); // texte précédent
    $(bgfade+' > div').first().appendTo(bgfade).fadeOut(2000);
    $(bgfade+' > div').first().fadeIn(2000);
    $(bgfade+' > div > div').first().css({'opacity':'0','left':'-100%'}, 3000).animate({'opacity':'1','left':'0'}, 3000); // texte suivant
    setTimeout(background_anim, 6000); // 6 secondes
}
$(window).on('load', function(){
  $(bgfade+' > div').hide();
  background_init();
  background_anim();
});
$(window).on('resize', function(){
  background_init();
});

**dhillig** · 17/11/2015, 18h34

Bonsoir jreaux62,
Merci pour ta précieuse aide et et ta sympathie (et patience) !!!

Bon, résolu mais je n'y arrive pas

Le but étant que le titre (pardon, le div chez moi, mais ça ne change rien) défile de droite à gauche - stagne au centre - puis retourne à droite.
Dans ton cas, il défile de gauche à droite - stagne au centre - puis termine à droite.
Bon, j'ai déjà réussi (dans ce dernier exemple, et je ne sais pas comment

), à le faire revenir au point de départ (il défile de gauche à droite - stagne au centre - puis retourne à gauche).
Une logique m'échappe (grandement au niveau du js). Mais je vais comparer les codepen pour tenter de comprendre (y'a du boulot

Je te tiens au courant. Encore un GRAND MERCI et bonne soirée,
dh

Invité · 17/11/2015, 18h52

1/ L'animation de la div se situe dans ces 2 lignes :

Code :

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

1
2
3
4
5
6
7
8
function background_anim() {
 
    $(bgfade+' > div > div').first().css({'opacity':'1','left':'0'}, 3000).animate({'opacity':'0','left':'100%'}, 3000); // texte précédent
 
 
    $(bgfade+' > div > div').first().css({'opacity':'0','left':'-100%'}, 3000).animate({'opacity':'1','left':'0'}, 3000); // texte suivant
 
}

Pour faire repartir à droite, c'est sur la 1ère (texte précédent), à remplacer par : http://codepen.io/jreaux62/pen/pjGMbv

Code :

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

    $(bgfade+' > div > div').first().css({'opacity':'1','left':'0'}, 3000).animate({'opacity':'0','left':'-100%'}, 3000); // texte précédent

'left':'-100%' : ça repart à droite.

2/ Pour que ça "stagne" plus longtemps :

Code :

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

    setTimeout(background_anim, 10000); // 10 secondes

Tu peux faire des recherches

: "jQuery animate()", "jQuery first()",... pour comprendre les fonctions.
Plus spécifiquement sur : http://api.jquery.com/

**dhillig** · 18/11/2015, 20h38

Bonsoir jreaux62,
Désolé pour cette réponse tardive

Ça fonctionne à 300% ! MERCI... GREAT !!! Moi qui cherchais le lien entre les CSS et le js

Bref, le js est complètement indépendant (dans ce cas : margin etc...) et donc "tout simple" : 0, -100%...

Tout simple... avec tes explications

Tu peux faire des recherches : "jQuery animate()", "jQuery first()",... pour comprendre les fonctions.
Plus spécifiquement sur : http://api.jquery.com/

J'ai acheté le livre d'Eric Sarrion (jQuery 1.7 & jQuery UI) mais j'ai du mal à m'y plonger

Une fois la logique JQuery comprise, cela ira mieux

Je me faisais aussi toute une montagne de ce code suite à un de tes codepen publié dans cette discussion :

Code :

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

1
2
3
4
    $(bgfade+' > div h1').first().css({'margin-top':(bg_H/4)+'px','opacity':'1','font-size':'600%'}).animate({'margin-top':'-'+(bg_H/2)+'px','opacity':'0','font-size':'1800%'}, 2500); // texte précedent
    $(bgfade+' > div').first().appendTo(bgfade).fadeOut(2000);
    $(bgfade+' > div').first().fadeIn(2000);
    $(bgfade+' > div h1').first().css({'margin-top':(bg_H*2/3)+'px','opacity':'0','font-size':'100%'}).animate({'margin-top':(bg_H/4)+'px','opacity':'1','font-size':'600%'}, 2500); // texte suivant

H/4 ? H/2 ? H*2/3 ????
ENCORE MERCI POUR TON AIDE ! BONNE SOIREE

dh (re

)

Ajouter un div texte qui "slide" dans un diaporama

jQuery

Discussions similaires

Partager

Partager