Forcer un fond html5 animé à prendre toute la largeur de l'écran en repsonsiv 
Autor: Elbe 2
Visitado 477,
Followers 1,
Compartido 0
Bonjour à tous !
Bonjour à l'équipe d'INCOMEDIA !
J'ai créé un fond animé en HTML5 encapsulé, que j'ai mis en second plan derrière un logo animé, un numéro de mobile, le hamburger du menu.
Tout fonctionne parfaitement.
Sauf que je n'arrive pas à forcer l'affichage pour obtenir un affichage à 100% de l'écran d'un terminal (smartphone, tablette, PC)
Un petit coup de main ?
Sachant que le même objet HTML5 inclu dans une page bénéficie de la fonction pleine largeur, ce qui n'est pas le cas ici...
Impatient de trouver une solution...
Avec mes remerciements...
Lionel
Publicado en
Salut Lionel,
Quelle est la taille définie sur ton objet HTML par rapport à la taille de la définition du site ? (Des fois que... ?).
Sinon possible de voir en ligne ou d'avoir le code pour tester ?
@Suivre,
J.P.
Autor
Hello Jean-Pierre !
Toujours fidèle au poste...
Mon site est en 1280 px...
J'ai déjà testé d'agrandir l'objet HTML à 1600 px mais il doit être intégré dans un conteneur fixe généré par le logiciel WX5...
Le but étant de contourner ce blocage...
Je veux bien t'envoyer le code mais il est conséquent...
J'espère qu'INCOMEDIA me répondra en plus de toi ?
Salut,
J'ai signalé ta demande au Support Incomedia pour avoir l'avis d'un technicien... Attendons son passage.
J.P.
Hello,
to clarify, what do you mean by "J'ai déjà testé d'agrandir l'objet HTML à 1600 px mais il doit être intégré dans un conteneur fixe généré par le logiciel WX5... " exactly?
Are you referring to the size of the object in the Header?
Could you provide the code, for example by attaching a text file to your reply if it is particularly long?
Thank you.
Online translation:
Bonjour,
pour clarifier, que voulez-vous dire exactement par : « J'ai déjà testé d'agrandir l'objet HTML à 1600 px mais il doit être intégré dans un conteneur fixe généré par le logiciel WX5... » ?
Parlez-vous de la taille de l'objet dans l’en-tête (Header) ?
Pourriez-vous fournir le code, par exemple en joignant un fichier texte à votre réponse si celui-ci est particulièrement long ?
Merci.
Il faut trouver le nom de l'objet utilisé via un Inspect sous Chrome par exemple
et ensuite essayer ce code dans les propriétés de la page
<style>
#nomdeObjet {
background-size: cover;
</style>
Autor
Bonjour Jean-Pierre, Éric & Axel !
Voici le code que j'ai mis dans un objet HTML, dans la section Modèle/En-tête, derrière le numéro de mobile & l'icône du Menu hamburger :
<div id="starfield-background" style="
width: 100vw; !important;
position: relative; 100vw; !important;
left: 50%;
transform: translateX(-50%);
display: block;
isolation: isolate;
background: radial-gradient(1280px 600px at 10% 10%, #12162a 0%, #0b0f1a 45%, #080b14 100%);
overflow: hidden;
height: 180px;
min-height: 100%; !important;
">
<canvas class="int-stars" style="position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;"></canvas>
<canvas class="int-flares" style="position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;"></canvas>
<script>
(function(){
const root=document.getElementById('starfield-background');
const starsCanvas=root.querySelector('.int-stars');
const flaresCanvas=root.querySelector('.int-flares');
const dpr=Math.min(window.devicePixelRatio||1,2);
let W=0,H=0,starsCtx,flaresCtx,rafId,last=performance.now(),dtGlobal=0;
let stars=[],flares=[],meteors=[],fireflies=[];
function setSize(){
const rect=root.getBoundingClientRect();
W=Math.max(1,Math.floor(rect.width));
H=Math.max(1,Math.floor(rect.height));
starsCanvas.width=W*dpr;starsCanvas.height=H*dpr;
flaresCanvas.width=W*dpr;flaresCanvas.height=H*dpr;
starsCtx=starsCanvas.getContext('2d');flaresCtx=flaresCanvas.getContext('2d');
starsCtx.setTransform(dpr,0,0,dpr,0,0);flaresCtx.setTransform(dpr,0,0,dpr,0,0);
}
function rand(min,max){return Math.random()*(max-min)+min;}
function choice(arr){return arr[Math.floor(Math.random()*arr.length)];}
function initStars(){
stars=[];
const densityFactor=0.0022;
const count=Math.floor(W*H*densityFactor);
for(let i=0;i<count;i++){
stars.push({x:rand(0,W),y:rand(0,H),r:rand(0.35,1.2),t:rand(0,Math.PI*2),tw:rand(2.2,6.4)});
}
}
function initFireflies(){
fireflies=[];
const count=Math.floor(Math.sqrt(W*H)/18);
for(let i=0;i<count;i++){
const speed=rand(10,28),angle=rand(0,Math.PI*2);
fireflies.push({x:rand(0,W),y:rand(0,H),r:rand(0.8,1.6),vx:Math.cos(angle)*speed,vy:Math.sin(angle)*speed,life:rand(4,9),age:0,flickerPhase:rand(0,Math.PI*2)});
}
}
function initFlares(){
flares=[];
const count=Math.floor((W+H)/40);
for(let i=0;i<count;i++){
flares.push({x:rand(0,W),y:rand(0,H),r:rand(2.0,5.0),phase:rand(0,Math.PI*2),intensity:rand(0.6,1.0),wobble:rand(0.5,1.2)});
}
}
function maybeSpawnMeteor(){
if(meteors.length>2)return;
if(Math.random()<0.006){
const side=choice(['left','right']);
const startX=side==='left'?-rand(40,120):W+rand(40,120);
const startY=rand(H*0.05,H*0.55);
const speed=rand(220,360);
const angle=side==='left'?rand(20,35):rand(145,160);
const rad=angle*Math.PI/180;
meteors.push({x:startX,y:startY,vx:Math.cos(rad)*speed,vy:Math.sin(rad)*speed,life:rand(1.2,2.0),age:0,trail:[],trailMax:18});
}
}
function drawStars(dt){
starsCtx.clearRect(0,0,W,H);starsCtx.save();
for(const s of stars){
s.t+=dt/s.tw;const flicker=0.62+0.38*Math.sin(s.t);
starsCtx.globalAlpha=0.75*flicker;starsCtx.fillStyle='#dfe6ff';
starsCtx.beginPath();starsCtx.arc(s.x,s.y,s.r,0,Math.PI*2);starsCtx.fill();
}
starsCtx.restore();
}
function drawFireflies(dt){
starsCtx.save();
for(let i=fireflies.length-1;i>=0;i--){
const f=fireflies[i];f.age+=dt;
if(f.age>f.life){
const speed=rand(10,28),angle=rand(0,Math.PI*2);
f.x=rand(0,W);f.y=rand(0,H);f.vx=Math.cos(angle)*speed;f.vy=Math.sin(angle)*speed;
f.life=rand(4,9);f.age=0;f.r=rand(0.8,1.6);f.flickerPhase=rand(0,Math.PI*2);
}
f.x+=f.vx*dt;f.y+=f.vy*dt;
if(f.x<-10)f.x=W+10;if(f.x>W+10)f.x=-10;if(f.y<-10)f.y=H+10;if(f.y>H+10)f.y=-10;
const flick=0.55+0.45*Math.sin(f.flickerPhase+f.age*2.0);
starsCtx.globalAlpha=0.5+0.5*flick;
const grad=starsCtx.createRadialGradient(f.x,f.y,0,f.x,f.y,3.2);
grad.addColorStop(0,'rgba(255,255,255,0.9)');grad.addColorStop(1,'rgba(200,210,255,0.0)');
starsCtx.fillStyle=grad;starsCtx.beginPath();starsCtx.arc(f.x,f.y,f.r+0.6*flick,0,Math.PI*2);starsCtx.fill();
}
starsCtx.restore();
}
function drawFlares(time){
flaresCtx.clearRect(0,0,W,H);flaresCtx.save();
for(const f of flares){
const beat=0.55+0.45*Math.sin(time*(0.7+0.35*f.wobble)+f.phase);
const len=f.r*(1.35+0.85*beat)*(0.9+0.3*f.intensity);const alpha=0.65+0.35*beat;
flaresCtx.globalAlpha=alpha;flaresCtx.strokeStyle='rgba(210,220,255,0.95)';flaresCtx.lineWidth=1.0;
flaresCtx.beginPath();
flaresCtx.moveTo(f.x-len,f.y);flaresCtx.lineTo(f.x+len,f.y);
flaresCtx.moveTo(f.x,f.y-len);flaresCtx.lineTo(f.x,f.y+len);
flaresCtx.moveTo(f.x-len,f.y-len);flaresCtx.lineTo(f.x+len,f.y+len);
flaresCtx.moveTo(f.x-len,f.y+len);flaresCtx.lineTo(f.x+len,f.y-len);
flaresCtx.stroke();
const coreR=Math.max(0.7,f.r*(0.5+0.5*beat));
flaresCtx.globalAlpha=0.92;flaresCtx.fillStyle='rgba(255,255,255,0.95)';
flaresCtx.beginPath();flaresCtx.arc(f.x,f.y,coreR,0,Math.PI*2);flaresCtx.fill();
}
flaresCtx.restore();
maybeSpawnMeteor();
drawMeteors(dtGlobal);
}
function drawMeteors(dt){
flaresCtx.save();
for(let i=meteors.length-1;i>=0;i--){
const m=meteors[i];m.age+=dt;if(m.age>m.life){meteors.splice(i,1);continue;}
m.x+=m.vx*dt;m.y+=m.vy*dt;m.trail.push({x:m.x,y:m.y});if(m.trail.length>m.trailMax)m.trail.shift();
for(let t=0;t<m.trail.length-1;t++){
const p=m.trail[t],q=m.trail[t+1],alpha=t/m.trail.length;
flaresCtx.strokeStyle=`rgba(200,210,255,${0.12+0.28*alpha})`;flaresCtx.lineWidth=1.0+0.6*alpha;
flaresCtx.beginPath();flaresCtx.moveTo(p.x,p.y);flaresCtx.lineTo(q.x,q.y);flaresCtx.stroke();
}
const headAlpha=0.85*(1-(m.age/m.life));flaresCtx.fillStyle=`rgba(255,255,255,${headAlpha})`;
flaresCtx.beginPath();flaresCtx.arc(m.x,m.y,2.2,0,Math.PI*2);flaresCtx.fill();
}
flaresCtx.restore();
}
function loop(now){
dtGlobal=Math.min(0.033,(now-last)/1000);last=now;
drawStars(dtGlobal);drawFireflies(dtGlobal);drawFlares(now/1000);
rafId=requestAnimationFrame(loop);
}
function resetAll(){
if(rafId)cancelAnimationFrame(rafId);
setSize();initStars();initFireflies();initFlares();
last=performance.now();rafId=requestAnimationFrame(loop);
}
resetAll();
let resizeTO;
window.addEventListener('resize',function(){clearTimeout(resizeTO);resizeTO=setTimeout(resetAll,120);},{passive:true});
document.addEventListener('visibilitychange',function(){
if(document.hidden){if(rafId)cancelAnimationFrame(rafId);rafId=null;}
else{last=performance.now();rafId=requestAnimationFrame(loop);}
});
})();
</script>
</div>
En dessous, dans la page Accueil, j'ai le même fond animé dans un objet HTML, dans lequel j'ai ajoué le titre du site & son slogan. Sur celui-ci, on a la possibilté de cocher Élargir pour que l'objet HTML couvre 100% de la largeur de l'écran utlisé en responsive, mais pas dans la section Modèle (d'ailleurs, ce serait pratique d'ajouter cette fonction dans la section Modèle, Éric), d'où mon problème à résoudre...
L'idée est d'unir les 2 fonds sans séparation entre les 2 objets HTML pour avoir un background unique en pleine largeur...
Espérant avoir été clair dans mes explications & trouver une solution grâce à votre aide...
Lionel
Hello Elbe,
thank you for providing the code.
You have two alternatives: you can increase the size of the HTML object so that it extends beyond the working area of the Header in the Template Content, or can make some additions to the code in order to override some directives set by default for the header, allowing the background to be extended.
ChatGPT or similar tools should be able to help for this kind of change if you describe the situation and provide your code as a basis.
I will report your feedback regarding the extend function.
I remain available.
Online translation:
Bonjour Elbe,
merci d’avoir fourni le code.
Vous avez deux possibilités : vous pouvez augmenter la taille de l’objet HTML afin qu’il dépasse la zone de travail de l’en-tête dans le contenu du modèle, ou bien effectuer quelques ajouts au code afin de remplacer certaines directives définies par défaut pour l’en-tête, ce qui permettra d’étendre l’arrière-plan.
ChatGPT ou des outils similaires devraient pouvoir vous aider pour ce type de modification si vous décrivez la situation et fournissez votre code comme base.
Je transmettrai votre retour concernant la fonction d’extension.
Je reste à votre disposition.
Autor
Bonjour Éric,
J'ai déjà testé & augmenté la taille de l'objet à 1600 px pour 1280 px de taille de site (comme précisé dans mon 1er message) & ça ne fonctionne pas...
J'espérais votre aide & non celle de ChatGpt, l'humain étant bien supérieur intellectuellement à L'IA ?
Ne serait-ce que des pistes de codes à ajouter ainsi que l'endroit où les positionner car c'est INCOMEDIA notre support & non une IA externe...
Dans l'attente...
Lionel
Hello Elbe,
I mentioned ChatGPT because we ordinarily do not provide support for external code.
Taking into account the situation, however, as this is due to a limitation occurring because the Extend function is only available in the pages, I'll make an exception, please check the code in the attached file.
Online translation:
Bonjour Elbe,
J’ai mentionné ChatGPT parce que nous ne fournissons normalement pas de support pour du code externe.
Compte tenu de la situation cependant, comme il s’agit ici d’une limitation liée au fait que la fonction d’extension n’est disponible que dans les pages, je vais faire une exception. Veuillez vérifier le code dans le fichier joint.
Autor
Bonjour Éric,
Merci pour votre professionnalisme...
Le code est fonctionnel à un détail près : il reste une bande de quelques px de large sur les 180 px de hauteur (du header) qui est blanche à droite ; elle apparaît d'ailleurs sur votre exemple joint (Portfolio).
Comment la faire disparaître au profit d'un affichage responsive 100% couvrant ?
Dans l'attente de votre retour d'informations & avec mes remerciements....
(It > Fr) ... afin que vous puissiez évaluer, veuillez publier le lien vers votre exemple en ligne...
1) ... si vous souhaitez utiliser l'arrière-plan animé de votre code uniquement comme arrière-plan de la ligne, vous pouvez procéder comme dans l'exemple d'Eric...
2) ... si vous souhaitez utiliser l'arrière-plan animé de votre code comme arrière-plan de la page entière, vous devez utiliser ma méthode DIV_CUSTOM...
3) ... si vous souhaitez utiliser l'arrière-plan animé de votre code comme arrière-plan de l'en-tête, vous devez utiliser ma méthode DIV_CUSTOM...
... d'après mon expérience, la méthode la plus simple pour intégrer des arrière-plans avec du code tiers consiste à utiliser ma méthode historique DIV_CUSTOM+IFRAME...
... cette méthode repose sur la création d'une page html_custom indépendante du site, contenant uniquement l'animation...
.
ciao
.
Hello,
apologies, I had not noticed, please check this attachment.
Online translation:
Bonjour,
Toutes mes excuses, je ne l’avais pas remarqué. Veuillez vérifier cette pièce jointe.
... 1) - 2) - 3) >> DIV_CUSTOM-K
.
Autor
Bonjour Éric & merci pour ce retour...
Le code est désormais parfaitement fonctionnel...uniquement en affichage ordinateur, pas en affichage tablette paysage & portrait, pas en affichage mobile paysage & portrait...
D'autre part, au scroll, le fond reste apparent mais figé à 1280 px / 180 px & les éléments complémentaires (logo animé & numéro de mobile ainsi que l'icône du menu) disparaissent de l'affichage...
Donc, le code n'est pas responsive...
Dans l'attente de votre avis...
Autor
Bonjour KolAsim !
Merci d'avoir pris le temps de chercher & proposer une solution qui fonctionne dans différents affichages.
Est-il possible d'avoir les codes pour les différentes parties proposées dans l'exemple en fichiers textes, comme l'a fait Éric ?
Ainsi, je pourrai tester en local, le site web étant en cours de réalisation & non-mis en ligne temporaire...
Avec mes remerciements...
Lionel
... Je ne suis pas sûr d'avoir bien compris votre question…
... Ma méthode, comme mentionné précédemment, repose sur l'utilisation de DIV_CUSTO et d'IFRAME pour simplifier au maximum l'intégration de code tiers...
... Dans ce cas précis, l'IFRAME importe la page html_custom > STARS(indépendant) contenant votre code, légèrement personnalisé. Vous pouvez la visualiser dans votre navigateur avec Ctrl+U, et la copier et la télécharger sur votre ordinateur pour la réutiliser...
... Cette page stelle.html a été intégrée au projet via l'option du programme, le dossier de destination par défaut étant «files»...
... Chemin relatif : files/stelle.html
... Lequel de mes quatre exemples vous intéresse le plus...?...
1> Stelle-FullPage
2> stelle-header
3> stelle-footer
4> stelle-riga
... Quoi qu'il en soit, mon code pour DIV_CUSTOM est clairement indiqué dans le code source de la page concernée, dans la section /HEAD du script, qui contient le commentaire facilement identifiable :
/* DIV_CUSTOM par KolAsim */
... Les codes sont presque identiques ; l'« z-index » peut varier selon le cas...
... Si vous publiez votre exemple en ligne, il sera plus facile de l'évaluer...
... Quoi qu'il en soit, si vous souhaitez le faire vous-même et si vous me précisez lequel des quatre codes vous intéresse particulièrement (ou pour une autre section), je le publierai pour vous directement ici...
...si vous avez besoin d'aide ou de précisions supplémentaires, n'hésitez pas à me le faire savoir...
.
ciao
.
Autor
Merci pour cette réponse rapide & claire, KolAsim...
En fait, l'ensemble des codes m'intéresse pour tester les différentes solutions sur les pages du site web...
Dans le code modifié d'Éric, le bandeau animé du ciel étoilé ne fonctionne qu'en affichage ordinateur pleine page avec, devant, les différents éléments cités dans mon précédent message.
Mais quand je scrolle vers le bas, le logo, le numéro de mobile & l'icône du menu disparaissent, seul le bandeau de 1280 px / 180 px reste collé en haut de l'écran, masquant d'autres éléments inclus dans des objets de la page (icônes, images, textes, etc...).
Le code modifié n'est donc pas responsive.
D'autre part, il ne fonctionne pas dans les autres modes d'affichage...
... J'ai utilisé votre code, mais il est impossible de l'évaluer sans voir votre exemple...
... Pour des tests en conditions réelles, vous pouvez exporter votre exemple vers un répertoire de test, comme je l'ai fait(*)...
... Si votre site est, par exemple, www.votresite.es/, créez un sous-dossier nommé «test» et exportez-y votre projet. Ensuite, publiez le lien ici:
www.votresite.es/test/
... Ainsi, vous pourrez effectuer les vérifications nécessaires, examiner les détails, éviter les malentendus et résoudre rapidement le problème...
(*) - Ou, comme beaucoup le font, exportez vers un espace web gratuit, tel qu'Altervista...
.
ciao
.
... Si vous souhaitez utiliser ma procédure pour appliquer la méthode DIV_CUSTO+IFRAME à la page d'accueil en tant qu'arrière-plan plein écran, comme dans mon exemple :
1) Téléchargez le fichier stelle.zip (stelle.html) joint;
2) Joignez ce fichier stelle.html au projet, en laissant "files" comme dossier de destination par défaut;
3) À l'étape 3, dans la section Accueil | Propriétés de la page (niveau expert), collez le code suivant:
<script>
$( document ).ready(function() {
/* DIV_CUSTOM by KolAsim */
stelleK = '<div id = "stelleK" class = "stelleK" style = "position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;"></div>';
iframeStelleK = '<iframe id = "iframeStelleK" src = "files/stelle.html" width = "100%" height = "150" style = "height:100%"></iframe>';
$("body").append(stelleK)
$( "#stelleK" ).append(iframeStelleK);
/*K*/});
</script>
<style>#imHeaderBg,#imFooterBg{opacity:0.5}</style>
... C'est terminé ! Vous pouvez l'essayer immédiatement...
.
ciao
.
... J'ai ajouté > stelle-header-2 à mon exemple...
... pas avec ma méthode DIV_CUSTOM+IFRAME...
... mais simplement avec le DIV_CUSTOM classique...
.