js et html problème de coordination Fermé

Question

bonjour, je viens vers vous car apprenant l'html pour débuté , je voudrais faire sur un site un fond d'éran avec comment particularité d avoir un fond qui est animé et qui bouge avec le curseur de la souris. Comme d'habitude le plus gros du boulot est déjà tout fait par des experts ^^ ( pas pour me déplaire), le problème est que je n arrive pas a ce que cela marche dans mon fond d'écran voici comment je veux le placer voici le scrip en question

CsGuessr

filou dodu

et voici le script ( a noté pour le html que j ai esséye de le mettre avant ou apres body et que cela ne changeais rien // Init Statsvar stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.body.appendChild(stats.domElement);/*! Mantis.js / jQuery / Zepto.js plugin for Constellation * @version 1.2.2 * @author Acauã Montiel <***@***> * @license http://acaua.mit-license.org/ */(function ($, window) { var $window = $(window); /** * Makes a nice constellation on canvas * @constructor Constellation */ function Constellation (canvas, options) { var $canvas = $(canvas), context = canvas.getContext('2d'), defaults = { star: { color: 'rgba(255, 255, 255, .5)', width: 1, randomWidth: true }, line: { color: 'rgba(255, 255, 255, .5)', width: 0.2 }, position: { x: 0, y: 0 }, width: window.innerWidth, height: window.innerHeight, velocity: 0.1, length: 100, distance: 120, radius: 150, stars: [] }, config = $.extend(true, {}, defaults, options); function Star (){ this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (config.velocity - (Math.random() * 0.5)); this.vy = (config.velocity - (Math.random() * 0.5)); this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width; } Star.prototype = { create: function(){ context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); context.fill(); }, animate: function(){ var i; for (i = 0; i < config.length; i++) { var star = config.stars[i]; if (star.y < 0 || star.y > canvas.height) { star.vx = star.vx; star.vy = - star.vy; } else if (star.x < 0 || star.x > canvas.width) { star.vx = - star.vx; star.vy = star.vy; } star.x += star.vx; star.y += star.vy; } }, line: function(){ var length = config.length, iStar, jStar, i, j; for (i = 0; i < length; i++) { for (j = 0; j < length; j++) { iStar = config.stars[i]; jStar = config.stars[j]; if ( (iStar.x - jStar.x) < config.distance && (iStar.y - jStar.y) < config.distance && (iStar.x - jStar.x) > - config.distance && (iStar.y - jStar.y) > - config.distance ) { if ( (iStar.x - config.position.x) < config.radius && (iStar.y - config.position.y) < config.radius && (iStar.x - config.position.x) > - config.radius && (iStar.y - config.position.y) > - config.radius ) { context.beginPath(); context.moveTo(iStar.x, iStar.y); context.lineTo(jStar.x, jStar.y); context.stroke(); context.closePath(); } } } } } }; this.createStars = function (){ var length = config.length, star, i; context.clearRect(0, 0, canvas.width, canvas.height); for (i = 0; i < length; i++) { config.stars.push(new Star()); star = config.stars[i]; star.create(); } star.line(); star.animate(); }; this.setCanvas = function (){ canvas.width = config.width; canvas.height = config.height; }; this.setContext = function (){ context.fillStyle = config.star.color; context.strokeStyle = config.line.color; context.lineWidth = config.line.width; }; this.setInitialPosition = function (){ if (!options || !options.hasOwnProperty('position')) { config.position = { x: canvas.width * 0.5, y: canvas.height * 0.5 }; } }; this.loop = function (callback) { callback(); this.rAF = window.requestAnimationFrame(function (){ stats.begin(); this.loop(callback); stats.end(); }.bind(this)); }; this.handlers = { window: { mousemove: function(e){ config.position.x = e.pageX - $canvas.offset().left; config.position.y = e.pageY - $canvas.offset().top; }, resize: function (){ window.cancelAnimationFrame(this.rAF); } } }; this.bind = function (){ $window .on('mousemove', this.handlers.window.mousemove) .on('resize', this.handlers.window.resize.bind(this)); }; this.unbind = function (){ $window .off('mousemove', this.handlers.window.mousemove) .off('resize', this.handlers.window.resize); } this.init = function (){ this.setCanvas(); this.setContext(); this.setInitialPosition(); this.loop(this.createStars); this.bind(); }; } function instantiate(element, options) { var c = new Constellation(element, options); c.init(); } $.fn.constellation = function (options) { return this.each(function (){ $window.on('resize', () => { instantiate(this, options); }); instantiate(this, options); }); };})($, window);// Init plugin$('canvas').constellation({ star: { width: 3 }, line: { color: 'rgba(255, 255, 255, .5)' }, length: (window.innerWidth / 6), radius: (window.innerWidth / 5)}); de plus pour le css j ai bien mis la bonne forme il me semble ( si des gens veulent poussé le voici) @font-face { font-family: 'dayposterblackregular'; src: url('police/DAYPBL__-webfont.eot'); src: url('police/DAYPBL__-webfont.eot?#iefix') format('embedded-opentype'), url('police/css/police/DAYPBL__-webfont.woff2') format('woff2'), url('police/DAYPBL__-webfont.woff') format('woff'), url('police/DAYPBL__-webfont.ttf') format('truetype'), url('police/DAYPBL__-webfont.svg#dayposterblackregular') format('svg'); font-weight: normal; font-style: normal;}p{ color: rgb(13, 177, 241); font-family: 'dayposterblackregular' ; }h1 { color:rgb(158, 106, 165); font-family: 'dayposterblackregular' ; background-color: rgb(17, 20, 20); width: 300px}#intro{ text-decoration: underline;}body { overflow: hidden; background: #111; }mark{ /* La couleur de fond prend le pas sur celle de toute la page */ background-color: red; color: black;}nav { display: flex;}#menu_nav{ list-style-type: none; display: flex; margin: 0 auto;}nav li{ margin-right: 15%; justify-content: flex-end;}nav a{ font-size: 1.5em; color: rgba(226,173,0,255); padding-bottom: 5px; text-decoration: none; background-color: rgb(43,44,43); padding:5%; border-radius: 30px;}nav a:hover{ font-size: 1.7em; color: cadetblue; background-color: whitesmoke; border-radius: 40px;} voila un grand merci a celui qui saura me dire ou est mon erreur ^^ j ai essayé des heures durant de résoudre mon problème avant de m en retourné a vous , cordialement

jordane45 · Answer

Bonjour,

Pour commencer, merci de reposter ton code en précisant, dans les balises de code, le langage concerné ..
html pour le html .. css pour le css et js pour le javascript.
Explications ( à lire entièrement !) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite,
ça ne marche pas... ce n'est vraiment suffisant.
As tu vérifié dans la console de ton navigateur si tu n'avais pas des erreurs ?

A noter qu'on ne place rien en dehors des balises <head></head> ou <body></body>.
Tes imports de JS doivent se trouver JUSTE AVANT la balise de fin de ton body .. donc juste au dessus de </body> (et pas en dessous !)

Et puis.. tu sembles avoir simplement pris un script trouvé sur le net .. il serait bien de nous dire où tu l'as récupéré.... souvent on trouve, sur le site de l'auteur.. une documentation et des exemples... (il faudrait commencer par là je pense..)

nyouz · Answer

bonjour merci pour les indications , voici les information complémentaire et les codes dans les bon language l html

CsGuessr

filou dodu

le css @font-face { font-family: 'dayposterblackregular'; src: url('police/DAYPBL__-webfont.eot'); src: url('police/DAYPBL__-webfont.eot?#iefix') format('embedded-opentype'), url('police/css/police/DAYPBL__-webfont.woff2') format('woff2'), url('police/DAYPBL__-webfont.woff') format('woff'), url('police/DAYPBL__-webfont.ttf') format('truetype'), url('police/DAYPBL__-webfont.svg#dayposterblackregular') format('svg'); font-weight: normal; font-style: normal; } p { color: rgb(13, 177, 241); font-family: 'dayposterblackregular' ; } h1 { color:rgb(158, 106, 165); font-family: 'dayposterblackregular' ; background-color: rgb(17, 20, 20); width: 300px } #intro { text-decoration: underline; } body { overflow: hidden; background: #111; } mark { /* La couleur de fond prend le pas sur celle de toute la page */ background-color: red; color: black; } nav { display: flex; } #menu_nav { list-style-type: none; display: flex; margin: 0 auto; } nav li { margin-right: 15%; justify-content: flex-end; } nav a { font-size: 1.5em; color: rgba(226,173,0,255); padding-bottom: 5px; text-decoration: none; background-color: rgb(43,44,43); padding:5%; border-radius: 30px; } nav a:hover { font-size: 1.7em; color: cadetblue; background-color: whitesmoke; border-radius: 40px; } et le javascript trouver sur https://codepen.io/acauamontiel/pen/abpLEG // Init Stats var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); /*! * Mantis.js / jQuery / Zepto.js plugin for Constellation * @version 1.2.2 * @author Acauã Montiel <***@***> * @license http://acaua.mit-license.org/ */ (function ($, window) { var $window = $(window); /** * Makes a nice constellation on canvas * @constructor Constellation */ function Constellation (canvas, options) { var $canvas = $(canvas), context = canvas.getContext('2d'), defaults = { star: { color: 'rgba(255, 255, 255, .5)', width: 1, randomWidth: true }, line: { color: 'rgba(255, 255, 255, .5)', width: 0.2 }, position: { x: 0, y: 0 }, width: window.innerWidth, height: window.innerHeight, velocity: 0.1, length: 100, distance: 120, radius: 150, stars: [] }, config = $.extend(true, {}, defaults, options); function Star (){ this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (config.velocity - (Math.random() * 0.5)); this.vy = (config.velocity - (Math.random() * 0.5)); this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width; } Star.prototype = { create: function(){ context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); context.fill(); }, animate: function(){ var i; for (i = 0; i < config.length; i++) { var star = config.stars[i]; if (star.y < 0 || star.y > canvas.height) { star.vx = star.vx; star.vy = - star.vy; } else if (star.x < 0 || star.x > canvas.width) { star.vx = - star.vx; star.vy = star.vy; } star.x += star.vx; star.y += star.vy; } }, line: function(){ var length = config.length, iStar, jStar, i, j; for (i = 0; i < length; i++) { for (j = 0; j < length; j++) { iStar = config.stars[i]; jStar = config.stars[j]; if ( (iStar.x - jStar.x) < config.distance && (iStar.y - jStar.y) < config.distance && (iStar.x - jStar.x) > - config.distance && (iStar.y - jStar.y) > - config.distance ) { if ( (iStar.x - config.position.x) < config.radius && (iStar.y - config.position.y) < config.radius && (iStar.x - config.position.x) > - config.radius && (iStar.y - config.position.y) > - config.radius ) { context.beginPath(); context.moveTo(iStar.x, iStar.y); context.lineTo(jStar.x, jStar.y); context.stroke(); context.closePath(); } } } } } }; this.createStars = function (){ var length = config.length, star, i; context.clearRect(0, 0, canvas.width, canvas.height); for (i = 0; i < length; i++) { config.stars.push(new Star()); star = config.stars[i]; star.create(); } star.line(); star.animate(); }; this.setCanvas = function (){ canvas.width = config.width; canvas.height = config.height; }; this.setContext = function (){ context.fillStyle = config.star.color; context.strokeStyle = config.line.color; context.lineWidth = config.line.width; }; this.setInitialPosition = function (){ if (!options || !options.hasOwnProperty('position')) { config.position = { x: canvas.width * 0.5, y: canvas.height * 0.5 }; } }; this.loop = function (callback) { callback(); this.rAF = window.requestAnimationFrame(function (){ stats.begin(); this.loop(callback); stats.end(); }.bind(this)); }; this.handlers = { window: { mousemove: function(e){ config.position.x = e.pageX - $canvas.offset().left; config.position.y = e.pageY - $canvas.offset().top; }, resize: function (){ window.cancelAnimationFrame(this.rAF); } } }; this.bind = function (){ $window .on('mousemove', this.handlers.window.mousemove) .on('resize', this.handlers.window.resize.bind(this)); }; this.unbind = function (){ $window .off('mousemove', this.handlers.window.mousemove) .off('resize', this.handlers.window.resize); } this.init = function (){ this.setCanvas(); this.setContext(); this.setInitialPosition(); this.loop(this.createStars); this.bind(); }; } function instantiate(element, options) { var c = new Constellation(element, options); c.init(); } $.fn.constellation = function (options) { return this.each(function (){ $window.on('resize', () => { instantiate(this, options); }); instantiate(this, options); }); }; })($, window); // Init plugin $('canvas').constellation({ star: { width: 3 }, line: { color: 'rgba(255, 255, 255, .5)' }, length: (window.innerWidth / 6), radius: (window.innerWidth / 5) }); concernant le navigateur , voici les erreurs qu il m'indiquent: Failed to load resource: net::ERR_FILE_NOT_FOUND DAYPBL__-webfont.woff2:1 Uncaught SyntaxError: Unexpected token '<' Js:1 merci pour les indications que tu m as déja indiqué^^ de plus je ne vois pas de doc sur le site ( lien plus haut

nyouz · Answer

bonjour voici les infomations que vous m avez demandez et merci pour les indications que vous m avez deja apporté , de plus je ne trouve pas de doc sur le JS , voici le lien https://codepen.io/acauamontiel/pen/abpLEG pour les erreurs du navigateur les voici : Failed to load resource: net::ERR_FILE_NOT_FOUND DAYPBL__-webfont.woff2:1 Uncaught SyntaxError: Unexpected token '<' Js:1 et ici tout le code avec les modification et vos indications: L html

CsGuessr

filou dodu

le css @font-face { font-family: 'dayposterblackregular'; src: url('police/DAYPBL__-webfont.eot'); src: url('police/DAYPBL__-webfont.eot?#iefix') format('embedded-opentype'), url('police/css/police/DAYPBL__-webfont.woff2') format('woff2'), url('police/DAYPBL__-webfont.woff') format('woff'), url('police/DAYPBL__-webfont.ttf') format('truetype'), url('police/DAYPBL__-webfont.svg#dayposterblackregular') format('svg'); font-weight: normal; font-style: normal; } p { color: rgb(13, 177, 241); font-family: 'dayposterblackregular' ; } h1 { color:rgb(158, 106, 165); font-family: 'dayposterblackregular' ; background-color: rgb(17, 20, 20); width: 300px } #intro { text-decoration: underline; } body { overflow: hidden; background: #111; } mark { /* La couleur de fond prend le pas sur celle de toute la page */ background-color: red; color: black; } nav { display: flex; } #menu_nav { list-style-type: none; display: flex; margin: 0 auto; } nav li { margin-right: 15%; justify-content: flex-end; } nav a { font-size: 1.5em; color: rgba(226,173,0,255); padding-bottom: 5px; text-decoration: none; background-color: rgb(43,44,43); padding:5%; border-radius: 30px; } nav a:hover { font-size: 1.7em; color: cadetblue; background-color: whitesmoke; border-radius: 40px; } le JS: // Init Stats var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); /*! * Mantis.js / jQuery / Zepto.js plugin for Constellation * @version 1.2.2 * @author Acauã Montiel <***@***> * @license http://acaua.mit-license.org/ */ (function ($, window) { var $window = $(window); /** * Makes a nice constellation on canvas * @constructor Constellation */ function Constellation (canvas, options) { var $canvas = $(canvas), context = canvas.getContext('2d'), defaults = { star: { color: 'rgba(255, 255, 255, .5)', width: 1, randomWidth: true }, line: { color: 'rgba(255, 255, 255, .5)', width: 0.2 }, position: { x: 0, y: 0 }, width: window.innerWidth, height: window.innerHeight, velocity: 0.1, length: 100, distance: 120, radius: 150, stars: [] }, config = $.extend(true, {}, defaults, options); function Star (){ this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (config.velocity - (Math.random() * 0.5)); this.vy = (config.velocity - (Math.random() * 0.5)); this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width; } Star.prototype = { create: function(){ context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); context.fill(); }, animate: function(){ var i; for (i = 0; i < config.length; i++) { var star = config.stars[i]; if (star.y < 0 || star.y > canvas.height) { star.vx = star.vx; star.vy = - star.vy; } else if (star.x < 0 || star.x > canvas.width) { star.vx = - star.vx; star.vy = star.vy; } star.x += star.vx; star.y += star.vy; } }, line: function(){ var length = config.length, iStar, jStar, i, j; for (i = 0; i < length; i++) { for (j = 0; j < length; j++) { iStar = config.stars[i]; jStar = config.stars[j]; if ( (iStar.x - jStar.x) < config.distance && (iStar.y - jStar.y) < config.distance && (iStar.x - jStar.x) > - config.distance && (iStar.y - jStar.y) > - config.distance ) { if ( (iStar.x - config.position.x) < config.radius && (iStar.y - config.position.y) < config.radius && (iStar.x - config.position.x) > - config.radius && (iStar.y - config.position.y) > - config.radius ) { context.beginPath(); context.moveTo(iStar.x, iStar.y); context.lineTo(jStar.x, jStar.y); context.stroke(); context.closePath(); } } } } } }; this.createStars = function (){ var length = config.length, star, i; context.clearRect(0, 0, canvas.width, canvas.height); for (i = 0; i < length; i++) { config.stars.push(new Star()); star = config.stars[i]; star.create(); } star.line(); star.animate(); }; this.setCanvas = function (){ canvas.width = config.width; canvas.height = config.height; }; this.setContext = function (){ context.fillStyle = config.star.color; context.strokeStyle = config.line.color; context.lineWidth = config.line.width; }; this.setInitialPosition = function (){ if (!options || !options.hasOwnProperty('position')) { config.position = { x: canvas.width * 0.5, y: canvas.height * 0.5 }; } }; this.loop = function (callback) { callback(); this.rAF = window.requestAnimationFrame(function (){ stats.begin(); this.loop(callback); stats.end(); }.bind(this)); }; this.handlers = { window: { mousemove: function(e){ config.position.x = e.pageX - $canvas.offset().left; config.position.y = e.pageY - $canvas.offset().top; }, resize: function (){ window.cancelAnimationFrame(this.rAF); } } }; this.bind = function (){ $window .on('mousemove', this.handlers.window.mousemove) .on('resize', this.handlers.window.resize.bind(this)); }; this.unbind = function (){ $window .off('mousemove', this.handlers.window.mousemove) .off('resize', this.handlers.window.resize); } this.init = function (){ this.setCanvas(); this.setContext(); this.setInitialPosition(); this.loop(this.createStars); this.bind(); }; } function instantiate(element, options) { var c = new Constellation(element, options); c.init(); } $.fn.constellation = function (options) { return this.each(function (){ $window.on('resize', () => { instantiate(this, options); }); instantiate(this, options); }); }; })($, window); // Init plugin $('canvas').constellation({ star: { width: 3 }, line: { color: 'rgba(255, 255, 255, .5)' }, length: (window.innerWidth / 6), radius: (window.innerWidth / 5) });

Js et html problème de coordination

3 réponses

Discussions similaires