[Résolu] Morphing

Bonjour !

Je travaille sur le code d'un morpheur; le voilà :
<?php

$phrase = "Le traitement de vos données personnelles, telles que vos adresses IP et vos données de navigation" ;
$mots = explode( SPACE, $phrase ) ;
$size = count( $mots ) ;
$style_lines = array() ;
$html_lines = array() ;

for( $n=0; $n<$size; $n++ )
{
$nth = $n+1 ;
$delai = 2.5*$nth ;
$style_lines[] = "#morpharea span:nth-of-type($nth){ animation-delay:$delai"."s; }" ;
$html_lines[] = tag( $mots[$n], "span" ) ;
}

echo tag( $style_lines, "style" ) ;
echo tag( $html_lines, "div id=\"morpharea\"" ) ;

?>
/* Laboratoire/Style/Pages/css-morphing.css */

#morpharea
{
position: relative;
background-color: #000;
color: #fff;
font-size:15ex;
filter: contrast(250%) blur(0);
height:33vh;
width:50vw;
margin-top:1ex;
}

#morpharea span
{
display:block;
position: absolute;
left: 50%;
top:5%;
transform: translate(-50%);
animation:morpher 5s;
opacity:0;
}

@keyframes morpher
{
0%, to { filter: blur(1em); opacity: 0; }
33%, 67% { filter: blur(0px); opacity: 1; }
}

Avez-vous des idées d'améliorations ?

Bonsoir,

j'ai travaillé sur le truc; voilà où j'en suis :

$phrase = "C'est du morphing, ou du fondu-enchainé, bordel, ce script ?" ;
$mots = explode( SPACE, $phrase ) ; $size = count( $mots ) ; $duree = 5 ;

$style_lines = array( "#morpharea span { animation-duration:$duree"."s; }" ) ;
$html_lines = array() ;
     
for( $n=0; $n<$size; $n++ )
{
$nth = $n+1 ; $delai = $duree*$n/2 ; 
$style_lines[] = "#morpharea span:nth-of-type($nth) { animation-delay:$delai"."s; }" ;
$html_lines[] = tag( $mots[$n], "span" ) ;
}

echo tag( $style_lines, "style" ) ;
echo tag( $html_lines, "div id=\"morpharea\"" ) ;

/* Laboratoire/Style/Pages/svg-letter-morphing.css */

#morpharea { position:relative; margin-top:5ex; }

#morpharea span { position:absolute; font-size:15ex; animation-name:fonenc;
width:100%; text-align:center; opacity:0; font-family:'Segoe Script';}

@keyframes fonenc { 50% { opacity:1; } to { opacity:0; } }

Cela fonctionne bien, sauf que c'est pas du morphing, c'est du fondu-enchaîné :o( !!!

Pour les curieux : https://labo.pariswebschool.fr

Bonjour !

Je voudrais vous faire part de l'état d'avancement de mes travaux (qui n'est pas satisfaisant) :

$chaine = "Le phrasé délimite et articule le discours musical en unités signifiantes plus ou" ;
$mots = explode( SPACE, $chaine ) ; $size = count( $mots ) ; 
$pas = .88 ; $deltaetape = 50 * $pas / ( $size - 1 ) ; $duree = $deltaetape * ( $size * 2 + 3 ) ; 
 
echo IC.commenter( "\$deltaetape:$deltaetape%" ) ; 

$style_lines = array( "own hr::before, own hr::after { animation-duration:$duree"."s; }" ) ;
$avant_lines = array( "@keyframes avant {" ) ;
$apres_lines = array( "@keyframes apres {" ) ;

for( $n=0, $etape=0; $n<$size ; $n++ )
{
$content = addslashes( $mots[$n] ) ; $ligne = array() ;
$ligne[] = "$etape% { content:'$content'; }" ;
$etape += $deltaetape ; $ligne[] = "$etape% { opacity:1; }" ;
$etape += $deltaetape ; $ligne[] = "$etape% { opacity:1; }" ;
$etape += $deltaetape ; if( $etape <= 100 ) $ligne[] = "$etape% { opacity:0; }" ;
$line = join( SPACE, $ligne ) ;
$n % 2 ? $apres_lines[] = $line : $avant_lines[] = $line ;
$etape -= $deltaetape ;
}

$avant_lines[] = $apres_lines[] = FEAC ;
echo tag( $style_lines, "style" ).tag( $avant_lines, "style" ).tag( $apres_lines, "style" ) ;

<hr />

<svg>
  <filter id="gooey">
    <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur"></feGaussianBlur>
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -8" result="gooey"></feColorMatrix>
    <feComposite in="SourceGraphic" in2="gooey" operator="atop"></feComposite>
  </filter>
</svg>

/* Laboratoire/Style/Pages/morphing-revamp.css */

own hr { font-size:20ex; margin-top:.5ex; border:none; }

own hr::before, own hr::after 
{ content:''; position:absolute; left:0; right:0; text-align:center; opacity:0; animation-fill-mode:forwards; }

own hr::before { animation-name:avant; }
own hr::after { animation-name:apres; }

Si vous voulez faire des suggestions.

https://labo.pariswebschool.fr/?morphing-revamp