Js et html problème de coordination

nyouz -
nyouz - 19 mai 2022 à 19:54

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

<!DOCTYPE html>
<html>
    <head>
        <div id="base">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/Forme.css" />
        <link rel="icon" type="image/png" sizes="32x32" href="guessrlogo.png">
        <script src="Js/Name.js" > </script>  
        <title>CsGuessr </title>
        
    </head>

    <body>
        <header>
            <canvas></canvas>
            <nav class="menu nav">
                <img src="css/img/title.png"/>
                <ul id="menu_nav">  
                       
                    <li><a href="zzzzz">GuessIT</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                </ul>
            </nav>
        </header>
             <p style="text-align:center"> <img alt="pp" src="css/img/pp.png">  </p>
            
         


            <p id="intro"> <img alt="pp" src="css/img/pp.png" width="500" height="200" />  <br> filou dodu


        
            <footer></footer>
        
        
            
        
        
    </body>
                <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
                <script src="/Js/fond.js"></script>
</html>

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 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)});

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

Afficher la suite

A voir également:

Csguessr
Editeur html - Télécharger - HTML
Br html ✓ - Forum Webmastering
Espace html ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
Js/packed.agent.n ✓ - Forum Virus

3 réponses

Réponse 1 / 3

nyouz

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

<!DOCTYPE html
<html>
    <head>
        <div id="base">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/Forme.css" />
        <link rel="icon" type="image/png" sizes="32x32" href="guessrlogo.png">
        <script src="Js/Name.js" > </script>  
        <title>CsGuessr </title>
        
    </head>

    <body>
        <header>
            <nav class="menu nav">
                <img src="css/img/title.png"/>
                <ul id="menu_nav">  
                       
                    <li><a href="zzzzz">GuessIT</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                </ul>
            </nav>
        </header>
             <p style="text-align:center"> <img alt="pp" src="css/img/pp.png">  </p>
             <canvas></canvas>


            <p id="intro"> <img alt="pp" src="css/img/pp.png" width="500" height="200" />  <br> filou dodu


        
            <footer></footer>
        
        
            
            <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
            <script src="D:\travail\codage\NTF\Js"></script>
        
    </body>

</html>

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)
});

Réponse 2 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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..)

Réponse 3 / 3

nyouz

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

l html

<!DOCTYPE html
<html>
    <head>
        <div id="base">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/Forme.css" />
        <link rel="icon" type="image/png" sizes="32x32" href="guessrlogo.png">
        <script src="Js/Name.js" > </script>  
        <title>CsGuessr </title>
        
    </head>

    <body>
        <header>
            <nav class="menu nav">
                <img src="css/img/title.png"/>
                <ul id="menu_nav">  
                       
                    <li><a href="zzzzz">GuessIT</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                    <li><a href="zzzzz">soon</a></li>
                </ul>
            </nav>
        </header>
             <p style="text-align:center"> <img alt="pp" src="css/img/pp.png">  </p>
             <canvas></canvas>


            <p id="intro"> <img alt="pp" src="css/img/pp.png" width="500" height="200" />  <br> filou dodu


        
            <footer></footer>
        
        
            
            <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
            <script src="D:\travail\codage\NTF\Js"></script>
        
    </body>

</html>

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

Discussions similaires

la balise ou

Javascript Arrondi à 2 chiffres après la virgule

ou ou

Balise

Espace en HTML

Votre réponse

Discussions similaires