Fond d'écran Html en Java
RésoluSorestudent8 -
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>
- Waptrick fond ecran
- Waptrick - Télécharger - Divers TV & Vidéo
- Waptrick java football - Télécharger - Jeux vidéo
- Waptrick jeux - Télécharger - Jeux vidéo
- Double ecran - Guide
- Comment mettre une vidéo en fond d'écran - Guide
3 réponses
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+
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+
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
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+
