Bonjour,

J'aimerais savoir si l'écriture ci-dessous est la bonne. Surtout pour l'une des lignes <sizes> où je précise un intervalle entre deux tailles d'écran. Je ne sais pas si on peut le faire car je n'ai trouvé aucun exemple le précisant. Et enfin faut-il bien toujours commencer par la plus petite taille de fichier ou l'ordre n'a que peu d'importance ?


<img
				srcset="
					img/bubble_20x20.png 20w,
					img/bubble_25x25.png 25w,
					img/bubble_30x30.png 30w,
					img/bubble_40x40.png 40w,
					img/bubble_50x50.png 50w,
					img/bubble_60x60.png 60w
				"
				sizes="
					(max-width: 599px) 20px,
					(min-width: 600px) and (max-width: 999px) 25px,
					(min-width: 1000px) 30px
				"
			src="img/bubble_60x60.png" alt="" />


Merci.
Merci beaucoup à vous deux, j'aime beaucoup vos deux solutions ! Je vais plutôt opter pour celle de _laurent qui me semble plus simple niveau code, mais les deux fonctionnent très bien !
Je n'avais pas pensé à la transformation skew, c'est mille fois plus simple que les éléments svg que j'essayais d'utiliser et qui se déformaient à chaque variation de taille de l'input.

Je ne pouvais pas vous fournir mon code car mon projet n'en est qu'au stade de maquette actuellement, mais ce sera implémenté sur un formulaire via Wordpress Smiley cligne

A une prochaine fois !
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
Bonjour à tous,

Déjà merci de vouloir m'aider, en effet je n'y connait presque rien.
Pour résumer je souhaite récupérer des données depuis l'API http://developers.pioupiou.fr/api/live/
et intégrer les valeurs de la balise 127
https://www.openwindmap.org/PP127 et cela dans une page déjà existante de notre site internet, code que je vous ai transmis un peu plus haut.
Pensez vous cela réalisable?
Merci encore pour votre aide
Yvan
Modifié par vanvan68 (17 Jun 2021 - 11:47)
Pour info, le code suivant, plus compact, se comporte de la même façon :

@keyframes avant {
0% { opacity:0; content:'Le'; } 7.1428571428571% { opacity:1; }
14.285714285714% { opacity:0; content:'délimite'; } 21.428571428571% { opacity:1; }
28.571428571429% { opacity:0; content:'articule'; } 35.714285714286% { opacity:1; }
42.857142857143% { opacity:0; content:'discours'; } 50% { opacity:1; }
57.142857142857% { opacity:0; content:'en'; } 64.285714285714% { opacity:1; }
71.428571428571% { opacity:0; content:'signifiantes'; } 78.571428571429% { opacity:1; }
85.714285714286% { opacity:0; content:'ou'; } 92.857142857143% { opacity:1; }
}
Bonsoir,

cette question est corrélée à celle intitulée Morphing.


@keyframes avant {
0% { content:'Le'; } 7.1428571428571% { opacity:1; } 14.285714285714% { opacity:0; }
14.285714285714% { content:'délimite'; } 21.428571428571% { opacity:1; } 28.571428571429% { opacity:0; }
28.571428571429% { content:'articule'; } 35.714285714286% { opacity:1; } 42.857142857143% { opacity:0; }
42.857142857143% { content:'discours'; } 50% { opacity:1; } 57.142857142857% { opacity:0; }
57.142857142857% { content:'en'; } 64.285714285714% { opacity:1; } 71.428571428571% { opacity:0; }
71.428571428571% { content:'signifiantes'; } 78.571428571429% { opacity:1; } 85.714285714286% { opacity:0; }
85.714285714286% { content:'ou'; } 92.857142857143% { opacity:1; } 100% { opacity:0; }
}


Contrairement à mon attente, "délimite" surgit tout d'un coup, et non progressivement comme je m'y attendrais. Une idée ?
Bonjour à tous,

J'utilise symfony 5.1 pour créer un portail.
J'utilise formbuilder pour gérer des formulaires permettant de mettre des actualités en ligne.
Le formulaire fonctionne très bien mais je rencontre deux problèmes bien ennuyeux dans l'affichage.
1 - Le bouton mis à droite du champ de sélection d'un fichier est nommé browse et je souhaiterais pouvoir mettre Choisir à la place.

2 - Lorsque un fichier est sélectionné rien ne s'affiche dans le champ (le input type='file'), c'est assez troublant. Pourtant lorsque je valide mon formulaire le fichier choisi est bien pris en compte.

Voici mon code dans le Form :

->add('image', FileType::class, ['required' => false,
'data_class' => null,
'help' => 'Vous devez sélectionner une image',
'row_attr' => ['placeholder' => 'Sélectionnez un fichier'],
])
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
Bonjour,

voici ce que j'ai mis en place sur un site pour faire apparaître ou disparaître au scroll du texte enfermé dans une div, avec une transition douce dans l'opacité. On peut aussi choisir de le déplacer, comme tu fais sur l'exemple. Par rapport à ce que je donne plus bas et ton but, tu vas devoir fortement adapter, mais c'est aussi l'intérêt de ce forum, donner des pistes.

Le gros avantage du JavaScript que j'utilise, c'est que si on monte et on descend sur la page, la div disparaît et apparaît de nouveau chaque fois. Alors que sur de très nombreux sites, et l'exemple que tu donnes, l'effet ne se produit qu'une fois, jusqu'au rechargement de la page. C'est assez frustrant.
Une partie de mon code (trouvé sur le net et adapté à mon projet) :
<div class="text-box">

.text-box {
  	tout ce qu'il faut, couleurs, marges, etc.
  	....
     	opacity:.2;
    	transition:opacity 1.4s ease-in-out;}

.text-box.scrolled {
	opacity:.85;}

<script>
	function showIt() {
  const toBeShown = document.querySelectorAll(".text-box"); 
  const halfScreen = window.innerHeight / 1.8;
  toBeShown.forEach((item, i) => {
    const scrolled = (window.scrollY + window.innerHeight);// - (item.offsetHeight/2);

    if (item.offsetTop - window.scrollY < halfScreen) {
      item.classList.add('scrolled');
    } else {
      item.classList.remove('scrolled');
    }
  })
}
window.addEventListener('scroll', showIt);
      </script>

Quand aux performances par rapport au scroll, je n'ai pas poussé les tests jusque là, je ne peux pas m'avancer. Google page speed me donne de très bonnes performances de vitesse mais ce test ne permet pas de mesurer l'effet d'un scroll de la page.
Bonsoir, je suis en train de m'arracher les cheveux (ceux qui restent), j'ai créé un diaporama d'arrière fond pour un site que je suis en train créé, il fonctionne très bien quand je l'utilise sous wamp et je charge les mêmes fichiers sur mon hébergeur et quand je vérifie le bon fonctionnement, le diaporama ne fonctionne plus, est-ce quelqu'un peu m'aider. Merci d'avance.
* Définition des polices fournies par Rénovation Laguillon */
 
@font-face
{
    font-family: 'contbold';src:url('fonts/contb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
@font-face
{
    font-family: 'contmedium';src:url('fonts/contm.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
@font-face
{
    font-family: 'contlight';src:url('fonts/contl.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
/* Eléments principaux de la page */
 
 
 
body{background-color: #fff;font-family: 'contbold', Arial, sans-serif;color: #cc6600height: 100vh;background-position: center center;background-size: cover;background-repeat: no-repeat;backface-visibility: hidden;animation: slideBg 18s linear infinite 5s;animation-timing-function: ease-in-out;background-image: url('../diapo/1.jpg');}
 
#bloc_page{width: 100%;margin: auto;}
 
section h1, footer h1, nav a{font-weight: normal;text-transform: uppercase;}
 
/* Header */
 
header{display: flex;justify-content: space-between;align-items: flex-end;width: 100%;position: fixed;height: 100px;top: 0;left: 0;background-color: rgba(000, 000, 000, 0.4);}
 
#titre_principal{display: flex;flex-direction: column;}
 
#logo{display: flex;flex-direction: row;align-items: baseline;width: 100px;height: 100px;float: right;}
 
#logo img{width: 100%;height: 100%;}
 
/* Navigation */
nav{width: auto;margin: 0 auto;margin-top: -20%;padding-bottom: 24px;}
 
nav ul{list-style-type: none;display: flex;}
 
nav li{margin-right: 15px;}
 
nav ul li {
    display: inline;
        list-style-type: circle;
}
 
nav a{font-size: 1.3em;color: #fff;text-decoration: none;font-size: 2.1em;text-shadow: 2px 2px 4px black;}
 
nav a:hover{color: #cc6600;border-bottom: 3px solid #cc6600;}
 
 
 
/* diaporama fond ecran */
 
/*#carroussel{width: 100%;height: 100vh;background-position: center center;background-size: cover;background-repeat: no-repeat;backface-visibility: hidden;animation: slideBg 18s linear infinite 5s;animation-timing-function: ease-in-out;background-image: url('../diapo/1.jpg');top: 0;left: 0;}*/
@keyframes slideBg{
 
     0%{background-image: url('../diapo/1.jpg');background-size: cover;}
 
    25%{background-image: url('../diapo/2.jpg');background-size: cover;}
 
    50%{background-image: url('../diapo/3.jpg');background-size: cover;}
 
    75%{background-image: url('../diapo/4.jpg');background-size: cover;}
 
    100%{background-image: url('../diapo/5.jpg');background-size: cover;}
}
 
/* Position texte */
article{width: 600px;height: 375px; margin: 0 auto; margin-top: 115px;padding-left: 25px;padding-right: 25px;padding-top: 20px;padding-bottom: 20px;background-color: rgba(000, 000, 000, 0.4);overflow: auto;scrollbar-visibility: hidden;}
article p {width: 100%;margin: auto;font-family: contmedium;color: #fff;text-shadow: 2px 2px 4px black;font-size: 1.6em;text-align: justify;}
 
article::-webkit-scrollbar {
    display: none;  /* Chrome Safari */
}
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  overflow-y:scroll;
  overflow-x:hidden;
}
 
/* postion texte contact */
.contact p {width: 100%;margin: auto;font-family: contmedium;color: #fff;text-shadow: 2px 2px 4px black;font-size: 1.4em;text-align: left;}
.contact ul li{color: #fff;font-family: 'contlight'; font-size: 20px;}
.contact a{color : #cc6600;text-decoration: none;}
/* Format pied de page */
footer{position: fixed;width: 100%;text-align: center;margin-top: 30px;bottom: 0;height: 70px;clear:both;font-family: 'contlight';color: #fff;font-size: 12px;background-color: rgba(000, 000, 000, 0.4);left: 0;}
footer a{text-decoration: none;color: #2980B9;}


Voici le lien du site provisoire : https://amiral-pc-test.000webhostapp.com/index.php afin de visualiser le souci.
Et l'eau kerlutinoec,

Quand j'ai appris l'existence de cet objet, j'ai été très enthousiasmé. Et puis j'ai vite déchanté. Le projet sur lequel j'ai la responsabilité actuellement, j'ai des observers un peu partout. Ces derniers sont codés à la main et je n'utilise pas d'intersectionObserver. Coder un observer, c'est très simple :
- 2 objets (subject/observer)
- 4 méthodes (add/rm/notify/update)
- gestion d'une collection (observers)
- implémentation d'une closure (callback)

J'ai eu trop d'ennuis avec (quand tu dois livrer un projet avec des délais courts et que cet objet t'amène son lot de bugs, tu perds vite patience). Non merci, pour la perte de temps.... De toutes manières, cet objet est encore en phase expérimentale. Donc, tu risques la pléthore de bugs.
Modifié par niuxe (15 Jun 2021 - 11:11)
Merci de ta réponse
header -> ne rien écrire du tout durant le déroulement du programme, j'aimerais évider dans ce contexte.
En fait il s'agit de deux programmes d'administration du site, actuellement je lance manuellement le 1 puis le 2, je me disais que ce serait pratique de les enchaîner automatiquement
Tant qu'à modifier le code, je peux aussi bien aller à la chasse aux classes et fonctions dupliquées.
Je verrai quand il fera moins chaud! Smiley baille
On n’est jamais à l’abri d’une panne, mais on devrait pouvoir alerter l’utilisateur.
L’utilisateur comprend que le site soit hors service mais là c’est seulement certaines pages…
Je n’aurais peut-être pas dû changer mon design et introduire une database au lieu de mes bons vieux fichier xml Smiley cligne
du coup je pense pas qu'il y ai un moyen de simplifier une jointure ou un concat si cest ça que tu cherches.

la jointure est fait pour récupèrer des champs d'une autre table via une clé et le concat est fait pour concaténer plusieurs champs. Soit tu utilise l'un, soit tu utilise l'autre, les deux n'ont aucun rapport en soit.

Après si il faut créer un moyen d'utiliser l'un ou l'autre suivant une règle précise, tu peux toujours utiliser un case. on utilisera un case dans l'exemple suivant :

Je dois faire une jointure si l'id est > 10
Je dois faire une concaténation si l'id < 10
alors je fais un case sql.

Modifié par JENCAL (14 Jun 2021 - 14:14)
Salut

Soit 2 <div> en mode table avec des ordonnancements légèrement différents :
https://codepen.io/kerlutinoec/pen/jOBQQad
<div style="position: relative; overflow-x: hidden; margin: 0 0 15vw 0;">
	<div class="figs">
	<figure>
	<img	src="image1.jpg" alt="" height="350" width="350"
			class="maxheight">
	</figure>
	<figure style="vertical-align: bottom; border-spacing: 0;">
	<p class="textesurimage textesurimageD">
	Le premier texte
	</p>
	<img	src="image2.jpg" alt="" height="125" width="350">
	</figure>
	</div>
</div>

<div style="position: relative; overflow-x: hidden; margin: 0 0 15vw 0;">
	<img	src="image3.jpg" alt="" height="250" width="500"
			style="width: 100%;" class="maxheight">
	<div class="figs">
	<figure>
	<img	src="image4.jpg" alt="" height="205" width="305"
			style="vertical-align: bottom;">
	</figure>
	<figure style="vertical-align: middle; background-color: #758C92;">
	<p class="textesurimage textesurimageD">
	Le deuxième texte
	</p>
	</figure>
	</div>
</div>


Le CSS :
.figs { display: table; border-spacing: .2vw 0; }
figure { position: relative; display: table-cell; }
figure img { width: 49.7vw; }

.maxheight { height: auto; max-height: 100vh; object-fit: cover; }
.textesurimage { 
	transform: translateX(-100%); 
	overflow: hidden; 
	width: 50%; 
	bottom: 0; 
	left: 5vw; 
	text-align: left; 
	font-size: 2.5em; 
	text-shadow: 1px 1px 1px #000; 
	}
.textesurimageD { 
	transform: translateX(100%); 
	width: 100%; 
	text-align: center; 
	}
	@media screen and (max-width:1200px) { .textesurimage{font-size: 1.75em;line-height: 1.125em;} }
.animtext { transform: translateX(0); transition: transform 1s ease; }


L'apparition du texte est géré par Intersection Observer :
const callback = (entries, observer) => { entries.forEach((entry) => {
    if (entry.isIntersecting) { entry.target.classList.add("animtext") } } ) };
const options = { root: null, rootMargin: '0px', threshold: 0 };
const myObserver = new IntersectionObserver(callback, options);
const txtList = document.querySelectorAll(".textesurimage");
txtList.forEach(txt => { myObserver.observe(txt); });



Pourquoi le deuxième texte veut bien s'animer mais pas le premier ???

PS : le plus étrange c'est que sur mac ça marche (Firefox, Chrome, Safari) et pas sur PC (ni Firefox, ni Chrome)

PS2 : seule la présence de 'image2' créé le problème (sous windows) ; sans elle ça marche !
Modifié par kerlutinoec (14 Jun 2021 - 16:18)
Merci de ta réponse
Le site est reparti tout seul comme un grand sans que j’aie changé quoi que ce soit au code ou aux données. Ça marche d’habitude sans problème depuis deux ans.
Je ne peux pas mettre des var_dump dans du code en exploitation.
Quand je faisais du développement système dans des cas similaires je lançais un timeout de 30 secondes ou 1 mn pour vérifier que cette f… opération était terminée mais je ne crois pas qu’on puisse faire ça en php
Salut,

le mieux est encore de tester ton new PDO dans un var_dump pour voir vraiment ce qu'il en ressort. et même de tester tes $this -> host etc..

var_dump(new PDO("mysql:host={$this -> host};dbname={$this ->   dbname};charset=utf8", 
                $this -> dbuser,  $this -> dbpw)); die;

Modifié par JENCAL (14 Jun 2021 - 11:33)
50 Dernières réponses