Sujet Précédent Sujet Suivant

Fond d'écran Html en Java

Résolu
Sorestudent8 - 13 janv. 2024 à 18:59
 Sorestudent8 - 14 janv. 2024 à 16:16

Bonjour/Soir,

Je dois crée un site pour SNT et j'ai un problème,

j'ai un bout de code en java dans mon html que je voudrais faire passer à l'arrière plan et le faire grossir pour en faire un fond.

pourriez vous m'aider ou trouver une alternative s'il vous plait?

Merci d'avance.

Ps: Voila l'aperçu (et les nombres défilent)

Et Voila le code.

<center><canvas style="max-width: 100%; height:auto;" width="1358" height="612"></canvas></center>
				<script>
var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
letters = letters.split('');
var fontSize = 10,
    columns = canvas.width / fontSize;
var drops = [];
for (var i = 0; i < columns; i++) {
  drops[i] = 1;
}
function draw() {
  ctx.fillStyle = 'rgba(0, 0, 0, .1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < drops.length; i++) {
    var text = letters[Math.floor(Math.random() * letters.length)];
    ctx.fillStyle = '#0f0';
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
    drops[i]++
    if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
      drops[i] = 0;
    }
  }
}
setInterval(draw, 33);
</script>
A voir également:

3 réponses

Réponse 1 / 3
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié le 13 janv. 2024 à 21:47

Salut tu peux faire un truc comme ca ! 

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    html, body {
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    overflow: hidden;
    background-attachment: fixed
    }

    #projector {
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    }
   </style>
  </head>
  <body>
    <canvas id="projector">
      Your browser does not support the Canvas element.
    </canvas>
    <script>
       var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
    letters = letters.split('');
    var fontSize = 10,
    columns = canvas.width / fontSize;
    var drops = [];
    for (var i = 0; i < columns; i++) {
    drops[i] = 1;
    }
    function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, .1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < drops.length; i++) {
    var text = letters[Math.floor(Math.random() * letters.length)];
    ctx.fillStyle = '#0f0';
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
    drops[i]++
    if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
      drops[i] = 0;
    }
    }
    }
    setInterval(draw, 33);

    </script>
  </body>
</html>

 tu voulais dire javascript plutot que java :-)

A+
1
Réponse 2 / 3
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié le 14 janv. 2024 à 08:22

re

cela dit je te conseille plutôt de mettre une vidéo en background ,moins lourd sur l UC  et pas besoin de canvas ! qui risque de te poser des problèmes pour ajouter du contenu si tu ne maîtrise pas bien son utilisation !

un truc comme ça

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    #background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    }

    h1, h2{
    color: white;
    font-family: Georgia, serif;
    font-weight: bold;
    text-align: center;
    }

    h1 {
    font-size: 6rem;
    margin-top: 30vh;
    }

    h2 {
    font-size: 3rem;
    }
    /*  option bouton
    #btnVideo {
    color: #8dffa2;
    font-size: 1.5rem;
    background: 0;
    border: 0;
    margin-left: 50%;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-weight: bold;
    transform: translateX(-50%);
    }*/
    </style>
  </head>
  <body>
    <video id="background-video" autoplay="" loop="" muted="">
      <source src="http://radservebeer.free.fr/videomatrix/matrix.m4v" type="video/mp4">
      <source src="http://radservebeer.free.fr/videomatrix/matrix.webm" type="video/webm">
    </video>
    <div class="contenu">
      <h1>
        A toi de trouver la bonne Video
      </h1>
      <h2>
        Bon courage
      </h2>
       <!--  option bouton play pause
       <button id="btnVideo" onclick="playAndPause()">Pause II</button>
       -->
    </div>
  </body>
  <!--option bouton play pause

    <script>
   var video = document.getElementById("background-video");

   var btn = document.getElementById("btnVideo");
   function playAndPause () {

     if (video.paused) {

       video.play();

       btn.innerHTML = "Pause II";

     } else {

       video.pause();

       btn.innerHTML = "Play ▶";

     }

   }
   </script> */-->
</html>

 A toi de l adapter a tes besoin ce n est qu un exemple ! 

PS: ne laisse pas les liens vers les vidéo je ne vais pas les laisser longtemps en ligne   c est juste pour l exemple télécharge les si tu veux !

a+
1
Sorestudent8
Modifié le 14 janv. 2024 à 12:43

Bonjour,

merci Beaucoup pour ton aide, j'ai réussi à remplir ma page avec le JavaScript mais je n'arrive toujours pas à le faire basculer au second plan car je voudrais en faire une sorte de fond pour ma page.

Mais merci tout de même.

PS: j'ai choisit de faire un fond en JavaScript (je me suis trompé dans le message précédent) car j'en ait fait un dans une autre page (je fais un site qui renvoi à d'autre pages) et je voulais me diversifier.

Et merci encore 

1
Réponse 3 / 3
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié le 14 janv. 2024 à 15:09

salut

il faut que tu utilise la propriété css z-index: pour placer les élément sur différent plan plus la valeur est élevé plus l élément est au dessus! c est le principe de L' ordre d'empilement des éléments sauf si la position de l élément  déclaré est

position : static;

en clair
z-index:2  sera au dessus de  z-index:1 et  z-index:3  au dessus des 2 autre ect ect ! mais on peux aussi mettre des z-index: negatif 

petite page pour debuter simplement   qui va te faire comprendre visuellement l utilisation de cette propriete  z-index:

regarde comme le canvas était déclare  position: absolute; j ai  juste ajouté

 z-index:-999;  

sur le css du canvas  et rajoute la div texte sur mon premier exemple et le texte est au dessus

-999 permet d être a peu près sur que tout sera au dessus du canvas !

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    html, body {
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    overflow: hidden;
    background-attachment: fixed
    }

    #projector {
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-999;
    }

    div.texte {
      color:  #FFFFFF;
       text-align: center;
    }
   </style>
  </head>
  <body>
    <canvas id="projector">
      Your browser does not support the Canvas element.
    </canvas>
    <div class="texte">
 <h2>un texte </h2>
    </div>
    <script>
       var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
    letters = letters.split('');
    var fontSize = 10,
    columns = canvas.width / fontSize;
    var drops = [];
    for (var i = 0; i < columns; i++) {
    drops[i] = 1;
    }
    function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, .1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < drops.length; i++) {
    var text = letters[Math.floor(Math.random() * letters.length)];
    ctx.fillStyle = '#0f0';
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
    drops[i]++
    if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
      drops[i] = 0;
    }
    }
    }
    setInterval(draw, 33);

    </script>
  </body>
</html>

a+
1
Sorestudent8
14 janv. 2024 à 16:16

Re-Bonjour,

j'ais réussi et ais compris l'utilité du z-index donc merci beaucoup pour ton aide et au revoir.

Tout mes remerciement

Arthur.

0

Discussions similaires

TELECHARGER DES JEUX JAVA
undertaker3 -
neogenesis -

1 réponse
Fond d'écran rogné et zoomé
DeeJay-TheBot -
DeeJay-TheBot -

2 réponses
telecharger des jeux java
benboudjema -
benboudjema -

2 réponses