28172 sujets

CSS et mise en forme, CSS3

[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( !!!
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
Bonsoir,

j'ai jeté l'éponge quant à faire le morphing en pur css. Voici le résultat :

$script = "
let phrase='Le phrasé délimite et articule le discours musical en unités signifiantes';
let mots=phrase.split(space);
let size=mots.length;

let sex=2;
$('style').innerHTML+='own span { transition:opacity'+space+sex+'s; }';

for(let n=0; n<size; n++)
{
let span=$('own').tax('span',n%2);

setTimeout(function(){ span.css('opacity',1).html(mots[n]); },n*sex*1000);
setTimeout(function(){ span.css('opacity',0); },(n+1)*sex*1000);
}
" ;

echo tag( VIDE, "span" ).tag( VIDE, "span" ).tag( $script, "script" ) ; 
include "Modules/gooey.part" ; 



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

own { filter:url(#gooey); }
own span { font-size:20ex; top:1ex; position:absolute; left:0; right:0; text-align:center; opacity:0; }



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

https://labo.pariswebschool.fr
Meilleure solution
Sujet clos
Aller à