web-dev-qa-db-fra.com

Comment fondre en entrée / sortie plusieurs textes en utilisant CSS / jQuery comme sur Droplr?

J'ai vu ce type d'animation sur un site Web juste au moment où les images-clés CSS3 ont commencé à prendre de l'ampleur, mais je n'ai pas pu le trouver ni le reproduire en utilisant CSS ou jQuery, et voici où j'ai pensé que certains d'entre vous pourraient aider.

J'ai animé ce que j'espère réaliser et je l'ai intégré ci-dessous. Je crois que cela peut être codé en utilisant les nouvelles images clés CSS3 ou .animate () de jQuery; fonctionnalité. Je ne sais pas. J'ai essayé tout ce que je sais, mais en vain.

Voici l'animation GIF de ce que je voulais:

GIF animation where the text "I am" is static and the Word "invincible" fades out, the Word "awesome" fades in, the Word "awesome" fades back out, and the Word "invincible" fades back in, in an infinite loop.

Je viens de remarquer, http://droplr.com/ utilise une transition très similaire sur leur page d'accueil, mais avec quelques effets coulissants. Et les données (mots) qui apparaissent sont toutes aléatoires, tout le temps. J'aimerais savoir comment c'est possible!

cssanimationphotoshoptransitiongif
15
Amruth Pillai

Je sais que cette question est résolue, mais j'ai pensé que cela pourrait être utile pour quelqu'un d'autre, alors j'ai décidé de partager xD

Je cherchais quelque chose de plus doux que la suggestion qui a été présentée ici, après avoir passé un peu de temps à chercher, j'ai fait ma propre solution

Ici, nous devrons penser un peu en termes de chronologie d'une image clé, dans ce cas, le texte ne sera affiché que lorsque l'autre a déjà terminé son animation de fondu

div{
  posititon: relative;
}
.js-nametag{
  position: absolute;
}
.js-nametag:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.js-nametag:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}
  <p class="js-nametag">Leandro de Lima</p>
  <p class="js-nametag">Game Master</p>
7
Leandro Lima

DÉMO

Une solution possible avec du CSS pur!

@-webkit-keyframes fade-in{
from{
    opacity:1;
    top:0px;
}
to{
    opacity:0;
    top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}
14
rkpasia

Quelques recherches et expérimentations approfondies sur Google m'ont amené au point où je peux répondre à ma propre question, et juste à temps aussi!

Si l'un d'entre vous souhaite savoir comment cela peut être fait, consultez cet extrait de CodePen que j'ai écrit: http://codepen.io/AmruthPillai/pen/axvqB

6
Amruth Pillai

Quelque chose comme ça:

Démo JSFiddle

[~ # ~] html [~ # ~] 

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

[~ # ~] css [~ # ~] 

.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

jQuery 

$(document).ready(function() {

    // run the fade() function every 2 seconds
    setInterval(function(){
        fade();
    },2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade(){
        $("span").fadeToggle(300);
    }

});

Remarque : cela ne fonctionne qu'avec le basculement de 2 mots, il pourrait être préférable d'avoir un tableau de mots et d'écrire une fonction pour les parcourir et les appliquer l'animation `fadeIn/fadeOut.

Edit : Voici une solution pour plusieurs mots - https://stackoverflow.com/a/2772278/2470724 il utilise un array pour stocker chaque mot, puis les parcourir.

Edit 2 : Solution non matricielle: http://jsfiddle.net/kMBMp/ Cette version passe en boucle à travers un un-ordered list qui a display:none dessus

5
Nick R

L'approche la plus faible est probablement d'utiliser le plug-in Morphext jQuery:

https://github.com/MrSaints/Morphext

Il est alimenté par animate.css, il est donc facile de changer le style d'animation du texte.

Si vous recherchez quelque chose d'un peu plus puissant (peut spécifier des animations ET et non animer uniquement du texte), il existe un spin-off appelé Morphist:

https://github.com/MrSaints/Morphist

1
Tony He