IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Faire apparaitre une texte en fonction de l'image d'un tourniquet d'image


Sujet :

CSS

  1. #1
    Membre éprouvé

    Profil pro
    Inscrit en
    Janvier 2010
    Messages
    981
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2010
    Messages : 981
    Points : 1 028
    Points
    1 028
    Billets dans le blog
    36
    Par défaut Faire apparaitre une texte en fonction de l'image d'un tourniquet d'image
    Bonjour à tous,

    J'ai un tourniquet d'images (merci ambrosialaure pour le code complet

    Et mon objectif d'associer un texte différent à chaque image et de la faire apparaitre/disparaitre en fonction de la position de l'image associée

    J'espère avoir été clair....

    Il faut a priori charger ga.js dont on peut trouver le code ici. Je ne sais absolument pas si c'est essentiel mais comme sur certaines fusées, il y a des boulons dont on ne sait pas quoi ils servent mais comme ça fonctionne ... on y touche pas


    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="conteneur">
    	<div style="animation-play-state: running;" id="parent" onmouseover="PauseAnim();" onmouseout="LectureAnim();">
    		<div class="diapositive diapo1"></div>
    		<div class="diapositive diapo2"></div>
    		<div class="diapositive diapo3"></div>
    		<div class="diapositive diapo4"></div>
    		<div class="diapositive diapo5"></div>
    		<div class="diapositive diapo6"></div>
    		<div class="diapositive diapo7"></div>
    		<div class="diapositive diapo8"></div>
    	</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
    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
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    	#conteneur{
    		margin:0px auto;
    		width:550px;
    		height:300px;
    		border:solid 1px white;
    		position:relative;
    		perspective:800px;
    		perspective-origin:10% 50%;
    		-webkit-perspective:600px;
    		-webkit-perspective-origin:10% 50%;
    		-moz-perspective:800px;
    		-moz-perspective-origin:10% 50%;
    		-o-perspective:800px;
    		-o-perspective-origin:10% 50%;
    	}
     
    	.diapositive{
    		position:absolute;
    		height:180px;
    		width:180px;
    		opacity:0.9;
    		border:solid 2px white;
    		border-radius:8px;
    		top:75px;
    		left:250px;
    		background-size:cover;
     
    		transform-origin:0% 50%;
    		-webkit-transform-origin:0% 50%;
    		-moz-transform-origin:0% 50%;
    		-o-transform-origin:0% 50%;
    	}
     
    	.diapo1{
    		transform:rotateY(0deg);
    		-webkit-transform:rotateY(0deg);
    		-moz-transform:rotateY(0deg) translateZ(1px);
    		-o-transform:rotateY(0deg);
    		background:url(http://itglobalsolution.fr/freelance/images/galerie_amoa.gif);
    	}
    	.diapo2{
    		transform:rotateY(45deg);
    		-webkit-transform:rotateY(45deg);
    		-moz-transform:rotateY(45deg) translateZ(2px);
    		-o-transform:rotateY(45deg);
    		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-29_1391009851.jpg);
    	}
    	.diapo3{
    		transform:rotateY(90deg);
    		-webkit-transform:rotateY(90deg);
    		-moz-transform:rotateY(90deg) translateZ(3px);
    		-o-transform:rotateY(90deg);
    		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390420661.jpg);
    	}
    	.diapo4{
    		transform:rotateY(135deg);
    		-webkit-transform:rotateY(135deg);
    		-moz-transform:rotateY(135deg) translateZ(4px);
    		-o-transform:rotateY(135deg);
    		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390398904.jpg);
    	}
    	.diapo5{
    		transform:rotateY(180deg);
    		-webkit-transform:rotateY(180deg);
    		-moz-transform:rotateY(180deg) translateZ(-4px);
    		-o-transform:rotateY(180deg);
    		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390398495.jpg);
    	}
    	.diapo6{
    		transform:rotateY(225deg);
    		-webkit-transform:rotateY(225deg);
    		-moz-transform:rotateY(225deg) translateZ(-3px);
    		-o-transform:rotateY(225deg);
    		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390373173.jpg);
    	}
    	.diapo7{
    		transform:rotateY(270deg);
    		-webkit-transform:rotateY(270deg);
    		-moz-transform:rotateY(270deg) translateZ(-2px);
    		-o-transform:rotateY(270deg);
    		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-18_1390065946.jpg);
    	}
    	.diapo8{
    		transform:rotateY(315deg);
    		-webkit-transform:rotateY(315deg);
    		-moz-transform:rotateY(315deg) translateZ(-1px);
    		-o-transform:rotateY(315deg);
    		background-image:url(http://ambrosialaure.free.fr/citations/2013-12-28_1388239014.jpg);
    	}
     
    	#parent{
    		position:absolute;
    		animation:tourne 16s linear infinite;
    		transform-origin:250px 50%;
    		transform-style: preserve-3d; 
    		-webkit-animation:tourne 16s linear infinite;
    		-webkit-transform-origin:250px 50%;
    		-webkit-transform-style: preserve-3d; 
    		-moz-animation:tourne 16s linear infinite;
    		-moz-transform-origin:250px 50%;
    		-moz-transform-style: preserve-3d; 
    		-o-animation:tourne 16s linear infinite;
    		-o-transform-origin:250px 50%;
    		-o-transform-style: preserve-3d; 
    	}
     
    	@keyframes tourne{
    		from{transform:rotateY(0deg); }
    		to{transform:rotateY(360deg); }
    	}
    	@-webkit-keyframes tourne{
    		from{-webkit-transform:rotateY(0deg); }
    		to{-webkit-transform:rotateY(360deg); }
    	}
    	@-moz-keyframes tourne{
    		from{-moz-transform:rotateY(0deg);}
    		to{-moz-transform:rotateY(360deg); }
    	}
    	@-o-keyframes tourne{
    		from{-o-transform:rotateY(0deg); }
    		to{-o-transform:rotateY(360deg); }
    	}

    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    	function PauseAnim() {
    	   document.getElementById('parent').style.animationPlayState='paused';
    	   document.getElementById('parent').style.MozAnimationPlayState='paused';
    	   document.getElementById('parent').style.WebkitAnimationPlayState='paused';
    	   document.getElementById('parent').style.OAnimationPlayState='paused';
    	}
     
    	function LectureAnim() {
    	   document.getElementById('parent').style.animationPlayState='running';
    	   document.getElementById('parent').style.MozAnimationPlayState='running';
    	   document.getElementById('parent').style.WebkitAnimationPlayState='running';
    	   document.getElementById('parent').style.OAnimationPlayState='running';
    	}
    Mal nommer un objet, c'est ajouter au malheur de ce monde, car le mensonge est justement la grande misère humaine, c'est pourquoi la grande tâche humaine correspondante sera de ne pas servir le mensonge
    Poésie 44, n° 17 - Albert Camus

    Mes réponses vous ont aidés, un clic sur leur pouce vert
    Bonjour chez vous

  2. #2
    Membre du Club
    Homme Profil pro
    Autodidacte
    Inscrit en
    Octobre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Octobre 2015
    Messages : 44
    Points : 59
    Points
    59
    Par défaut
    Je crois que la démarche la plus simple serait de créer un div qui contient les paragraphes correspondants aux images du caroussel, puis d'animer le bloc sous la forme d'un slide vertical avec la même durée que le caroussel et d'utiliser par exemple la fonction step() pour faire défiler "en mode diapo". Et ensuite d'ajouter dans les fonctions javascript du carrousel les instructions de mise en pause et de reprise de l'animation texte pour que ça reste synchronisé.

    ga.js est inutile pour le caroussel.

    Sans le step() ça donnerai un truc dans le genre du code ci dessous. A noter qu'il est pour 11 lignes de texte ce qui permet de configurer le slide sur des tranches de 10%, pour 8 lignes correspondant aux images il faut faire les calculs. Les h1 font 30px de haut on décale donc le bloc titles de 30px tout le 10% du temps de l'animation.

    C'est à peaufiner, je suis pas spécialiste, en l'état l'adaptation du javascript ne fonctionne pas...

    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
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
     
    <!DOCTYPE html>
    <html>
    <head>
    <style>
     
    @keyframes slide {
        0%  {top:   0px;}
        10% {top: -30px;}
        20% {top: -60px;}
        30% {top: -90px;}
        40% {top:-120px;}
        50% {top:-150px;}
        60% {top:-180px;}
        70% {top:-210px;}
        80% {top:-240px;}
        90% {top:-270px;}
        100%{top:-300px;}
    }
     
    .titlesOverlay {
      overflow: hidden;
      float: left;
      width: 300px;
      height: 30px;
    }
     
    .titles {
      animation: slide 10s ease-in-out infinite;
      position: relative;
      display: block;
    }
     
    h1 {
      display:block;
      box-sizing: border-box;
      margin:0;
      padding:0;
      height:30px;
      line-height: 30px;
      font-size:20px;
    }
    </style>
    </head>
    <body>
     
    <header>
          <div class="titlesOverlay">
            <div class="titles" onmouseover="PauseAnim();" onmouseout="LectureAnim();">
              <h1>Première image</h1>
              <h1>Deuxième image</h1>
              <h1>Troisième image</h1>
              <h1>Quatrième image</h1>
              <h1>Cinquième image</h1>
              <h1>Sixième image</h1>
              <h1>Septième image</h1>
              <h1>Huitième image</h1>
              <h1>Neuvième image</h1>
              <h1>Dixième image</h1>
              <h1>Onzième image</h1>
            </div>
          </div>
    </header>
     
    <script>
    function PauseAnim() {
               document.getElementById('parent').style.animationPlayState='paused';
    	   document.getElementById('parent').style.MozAnimationPlayState='paused';
    	   document.getElementById('parent').style.WebkitAnimationPlayState='paused';
    	   document.getElementById('parent').style.OAnimationPlayState='paused';
     
    	   document.getElementsByClassName('titles').style.animationPlayState='paused';
    	   document.getElementsByClassName('titles').style.MozAnimationPlayState='paused';
    	   document.getElementsByClassName('titles').style.WebkitAnimationPlayState='paused';
    	   document.getElementsByClassName('titles').style.OAnimationPlayState='paused';
    }
     
    function LectureAnim() {
    	   document.getElementById('parent').style.animationPlayState='running';
    	   document.getElementById('parent').style.MozAnimationPlayState='running';
    	   document.getElementById('parent').style.WebkitAnimationPlayState='running';
    	   document.getElementById('parent').style.OAnimationPlayState='running';
     
    	   document.getElementsByClassName('titles').style.animationPlayState='running';
    	   document.getElementsByClassName('titles').style.MozAnimationPlayState='running';
    	   document.getElementsByClassName('titles').style.WebkitAnimationPlayState='running';
    	   document.getElementsByClassName('titles').style.OAnimationPlayState='running';
    }
    </script>
    </body>
    </html>

Discussions similaires

  1. Réponses: 5
    Dernier message: 01/07/2010, 19h02
  2. [XL-2003] faire apparaitre un label en fonction d'un choix d'une combobox
    Par revemane dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 11/06/2009, 21h00
  3. Fonction include, faire apparaitre une source
    Par midnnight dans le forum Langage
    Réponses: 2
    Dernier message: 26/03/2009, 05h21
  4. [Mail] Faire apparaitre une fonction
    Par MadSoldier dans le forum Langage
    Réponses: 4
    Dernier message: 23/11/2008, 15h07
  5. [debutant]faire apparaitre une zone avec du texte
    Par Emcy dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/02/2007, 09h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo