Name of code : Site espace
Categorie : Site examples
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, ">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
body{
font-family: 'Orbitron', sans-serif;
}
a {
text-decoration: none;
color: #aeaeae;
transition: 0.7s;
}
a:hover{
color: #cb970e;
}
</style>
</head>
<body style="margin: 0px; touch-action: none;background:black">
<div style="position: absolute; width: 100%;">
<div style="color: #aeaeae;background: #8f8f8f59;display: flex;align-items: center;">
<div style="width: 30%;display: flex;justify-content: center;">
<div style="background-image: url(https://thomasbarron.fr/images/logo.png);background-repeat: no-repeat;background-size: cover;width: 70px;height: 70px;filter: brightness(50%) grayscale(100%);"></div>
<h1>THOMAS</h1>
</div>
<div style="display: flex;align-items: center;justify-content: space-evenly;width: 70%;">
<a href="#">Home</a><a href="#">Infos</a><a href="#">Contact</a>
</div>
</div>
<div style="font-family: 'Orbitron', sans-serif;
margin: 70px;
padding: 20Px;
color: #aeaeae;
background: #8f8f8f59;
display: flex;
align-items: center;
flex-direction: column;
font-size: smaller;"
>
<h2>L'espace</h2>
<p>L'espace est un vaste domaine qui englobe tout ce qui existe au-delà de notre planète, y compris les étoiles, les planètes, les galaxies et les phénomènes cosmiques.</p>
<p>Les êtres humains ont longtemps été fascinés par l'espace, et ont cherché à l'explorer depuis des milliers d'années. Les premiers télescopes ont été inventés au début du 17ème siècle, et depuis lors, nous avons envoyé des sondes spatiales, des satellites et des astronautes dans l'espace pour en apprendre davantage sur cet univers mystérieux.</p>
<p>L'espace est rempli de phénomènes fascinants, tels que les trous noirs, les supernovae et les étoiles à neutrons. Il est également le lieu de naissance de nouvelles étoiles et de planètes en formation, et contient des milliards de galaxies, chacune avec des milliards d'étoiles et de planètes potentielles.</p>
<p>Mais l'espace est également un environnement hostile pour les êtres humains, avec des températures extrêmes, un manque d'air et de l'eau, et une forte radiation. C'est pourquoi les astronautes doivent être entraînés et équipés spécialement pour survivre dans l'espace.</p>
</div>
<div style="color: #aeaeae;background: #8d8d8dad;display: flex;align-items: center;">
<div style="display: flex;align-items: center;justify-content: space-evenly;width: 100%;">
<a href="#">Home</a><a href="#">Infos</a><a href="#">Contact</a>
</div>
</div>
</div>
</body>
<script>
let camera
let scene
let renderer
let material
let mouseX = 0
let mouseY = 0
let windowHalfX = window.innerWidth / 2
let windowHalfY = window.innerHeight / 2
init()
animate()
function init () {
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 5, 2000)
camera.position.z = 500
scene = new THREE.Scene()
scene.fog = new THREE.FogExp2(0x0000ff, 0.001)
const geometry = new THREE.BufferGeometry()
const vertices = []
const size = 2000
for ( let i = 0; i < 20000; i ++ ) {
const x = (Math.random() * size + Math.random() * size) / 2 - size / 2
const y = (Math.random() * size + Math.random() * size) / 2 - size / 2
const z = (Math.random() * size + Math.random() * size) / 2 - size / 2
vertices.push(x, y, z)
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
material = new THREE.PointsMaterial({
size: 2,
color: 0xffffff,
})
const particles = new THREE.Points(geometry, material)
scene.add(particles)
renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
document.body.style.touchAction = 'none'
document.body.addEventListener('pointermove', onPointerMove)
window.addEventListener('resize', onWindowResize)
}
function onWindowResize () {
windowHalfX = window.innerWidth / 2
windowHalfY = window.innerHeight / 2
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
}
function onPointerMove (event) {
mouseX = event.clientX - windowHalfX
mouseY = event.clientY - windowHalfY
}
function animate () {
requestAnimationFrame(animate)
render()
}
function render () {
camera.position.x += (mouseX * 2 - camera.position.x) * 0.02
camera.position.y += (-mouseY * 2 - camera.position.y) * 0.02
camera.lookAt(scene.position)
renderer.render(scene, camera)
scene.rotation.x += 0.001
scene.rotation.y += 0.002
}
</script>
</html>