I am trying to get something like this, but with my html divs containing sentences instead of css squares. I am trying to make the sentences start at a random position and move randomly on the page. I tried calling my html divs instead of creating new ones in javascript; I don't know if it is the correct way.. Is it possible ? I am not used to javascript, I am starting using it.
My html code:
<html>
<head>
<title>Niveau 1</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class='d1'>
<p><a href="niveaux/niveau2/niveau2.html">quoi maintenant ?</a></p>
</div>
<div class='d2'>
<p><a href="niveaux/niveau2/niveau2.html">quand maintenant ?</a></p>
</div>
<div class='d3'>
<p><a href="niveaux/niveau2/niveau2.html">qui maintenant ?</a></p>
</div>
<div class='d4'>
<p><a href="niveaux/niveau2/niveau2.html">où maintenant ?</a></p>
</div>
<div class='d5'>
<p><a href="niveaux/niveau2/niveau2.html">aller de l'avant, appeler ça aller, appeler ça de l'avant</a></p>
</div>
<div class='d6'>
<p><a href="niveaux/niveau2/niveau2.html">longuement, brièvement, c'est égal</a></p>
</div>
<div class='d7'>
<p><a href="niveaux/niveau3/niveau3.html">quelle liberté</a></p>
</div>
<div class='d8'>
<p><a href="niveaux/niveau4/niveau4.html">quelque fois je me dis toi, si c'est moi qui parle</a></p>
</div>
</body>
</html>
My javascript code:
$(document).ready(function(){
animateDiv('.d1');
animateDiv('.d2');
animateDiv('.d3');
animateDiv('.d4');
animateDiv('.d5');
animateDiv('.d6');
animateDiv('.d7');
animateDiv('.d8');
});
function makeNewPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(myclass){
var newq = makeNewPosition();
$(myclass).animate({ top: newq[1], left: newq[0] }, 15000, function(){
animateDiv(myclass);
});
};
}
My css code:
height: 100%;
width: 100%;
margin: none;
padding: none;
background-color: black;
}
* {
cursor: none;
}
div.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8 {
position:fixed;
font-size: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
cursor: none;
color: transparent;
text-shadow: 0px 0px 5px #ffffff;
}
a {
text-decoration: none;
color: transparent;
}
a:visited {
text-decoration: none; color: transparent;
}
a:hover {
color: none;
text-decoration:none;
cursor:crosshair;
text-shadow: 0px 0px 3px #ffffff
}
Aucun commentaire:
Enregistrer un commentaire