Skip to content

Commit f687d2f

Browse files
johnstackjohnstack
committed
Initial upload
1 parent 7dc215c commit f687d2f

File tree

6 files changed

+359
-0
lines changed

6 files changed

+359
-0
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎background_colour_mouse_movement.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Mouse Movement Background</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
height: 100vh;
11+
transition: background-color 0.1s linear;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
font-family: sans-serif;
16+
color: #fff;
17+
}
18+
h1 {
19+
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<h1>Move your mouse!</h1>
25+
26+
<script>
27+
document.addEventListener('mousemove', function (e) {
28+
const x = e.clientX / window.innerWidth;
29+
const y = e.clientY / window.innerHeight;
30+
31+
// Blue tones (cool tones)
32+
const blueRed = Math.round(150 + x * 50); // 150–200
33+
const blueGreen = Math.round(180 + y * 40); // 180–220
34+
const blueBlue = Math.round(210 + x * 30); // 210–240
35+
36+
// Brown tones (warm tones)
37+
const brownRed = Math.round(180 + x * 40); // 180–220
38+
const brownGreen = Math.round(160 + y * 30); // 160–190
39+
const brownBlue = Math.round(130 + y * 20); // 130–150
40+
41+
// Blend between brown and blue tones
42+
const mixFactor = 0.5; // 0 = full brown, 1 = full blue
43+
const red = Math.round(brownRed * (1 - mixFactor) + blueRed * mixFactor);
44+
const green = Math.round(brownGreen * (1 - mixFactor) + blueGreen * mixFactor);
45+
const blue = Math.round(brownBlue * (1 - mixFactor) + blueBlue * mixFactor);
46+
47+
document.body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
48+
});
49+
</script>
50+
</body>

‎background_colour_time_of_day.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Time-Based Background</title>
7+
<style>
8+
body {
9+
transition: background-color 1s ease;
10+
color: white;
11+
font-family: sans-serif;
12+
text-align: center;
13+
padding-top: 20%;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<p>The background color changes based on the time of day.</p>
19+
20+
<script>
21+
function setBackgroundByTime() {
22+
const hour = new Date().getHours();
23+
let bgColor;
24+
25+
if (hour >= 6 && hour < 12) {
26+
// Morning
27+
bgColor = "#FFD580"; // light orange
28+
} else if (hour >= 12 && hour < 18) {
29+
// Afternoon
30+
bgColor = "#87CEEB"; // light blue
31+
} else if (hour >= 18 && hour < 21) {
32+
// Evening
33+
bgColor = "#FFA07A"; // salmon
34+
} else {
35+
// Night
36+
bgColor = "#2F4F4F"; // dark slate gray
37+
}
38+
39+
document.body.style.backgroundColor = bgColor;
40+
}
41+
42+
// Set background on page load
43+
setBackgroundByTime();
44+
</script>
45+
</body>
46+
</html>

‎big_cube_mouse_movement.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>3D Cursor Cube</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
overflow: hidden;
11+
cursor: none; /* Hide default cursor */
12+
}
13+
canvas {
14+
display: block;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<!-- Three.js via CDN -->
20+
<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
21+
22+
<script>
23+
// Setup scene, camera, renderer
24+
const scene = new THREE.Scene();
25+
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
26+
const renderer = new THREE.WebGLRenderer({ alpha: true });
27+
renderer.setSize(window.innerWidth, window.innerHeight);
28+
document.body.appendChild(renderer.domElement);
29+
30+
// Create wireframe cube
31+
const geometry = new THREE.BoxGeometry(1, 1, 1);
32+
const edges = new THREE.EdgesGeometry(geometry);
33+
const material = new THREE.LineBasicMaterial({ color: 0x888888 }); // grey
34+
const cube = new THREE.LineSegments(edges, material);
35+
scene.add(cube);
36+
37+
camera.position.z = 5;
38+
39+
// Track mouse position
40+
let mouseX = 0, mouseY = 0;
41+
document.addEventListener('mousemove', (event) => {
42+
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
43+
mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
44+
});
45+
46+
// Animate cube
47+
function animate() {
48+
requestAnimationFrame(animate);
49+
50+
// Smooth cube position toward cursor
51+
const vector = new THREE.Vector3(mouseX, mouseY, 0.5).unproject(camera);
52+
cube.position.lerp(vector, 0.2);
53+
54+
// Rotate cube
55+
cube.rotation.x += 0.01;
56+
cube.rotation.y += 0.01;
57+
58+
renderer.render(scene, camera);
59+
}
60+
61+
animate();
62+
63+
// Handle window resize
64+
window.addEventListener('resize', () => {
65+
camera.aspect = window.innerWidth / window.innerHeight;
66+
camera.updateProjectionMatrix();
67+
renderer.setSize(window.innerWidth, window.innerHeight);
68+
});
69+
</script>
70+
</body>
71+
</html>

‎small_cube_mouse_movement.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Cursor-Following Wireframe Cube</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
overflow: hidden;
11+
cursor: none;
12+
}
13+
canvas {
14+
display: block;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
20+
<script>
21+
const scene = new THREE.Scene();
22+
23+
// Use orthographic camera so world units = pixels
24+
let width = window.innerWidth;
25+
let height = window.innerHeight;
26+
const camera = new THREE.OrthographicCamera(
27+
-width / 2, width / 2,
28+
height / 2, -height / 2,
29+
0.1, 1000
30+
);
31+
camera.position.z = 500;
32+
33+
const renderer = new THREE.WebGLRenderer({ alpha: true });
34+
renderer.setSize(width, height);
35+
document.body.appendChild(renderer.domElement);
36+
37+
// Create a wireframe cube
38+
const geometry = new THREE.BoxGeometry(200, 200, 200); // 200px cube
39+
const edges = new THREE.EdgesGeometry(geometry);
40+
const material = new THREE.LineBasicMaterial({ color: 0x888888 }); // grey
41+
const cube = new THREE.LineSegments(edges, material);
42+
scene.add(cube);
43+
44+
let mouse = new THREE.Vector3(0, 0, 0);
45+
document.addEventListener('mousemove', (event) => {
46+
mouse.x = event.clientX - width / 2;
47+
mouse.y = -(event.clientY - height / 2);
48+
});
49+
50+
function animate() {
51+
requestAnimationFrame(animate);
52+
53+
// Smoothly move cube toward cursor
54+
cube.position.lerp(mouse, 0.15);
55+
56+
// Rotate cube
57+
cube.rotation.x += 0.01;
58+
cube.rotation.y += 0.01;
59+
60+
renderer.render(scene, camera);
61+
}
62+
63+
animate();
64+
65+
// Handle window resize
66+
window.addEventListener('resize', () => {
67+
width = window.innerWidth;
68+
height = window.innerHeight;
69+
camera.left = -width / 2;
70+
camera.right = width / 2;
71+
camera.top = height / 2;
72+
camera.bottom = -height / 2;
73+
camera.updateProjectionMatrix();
74+
renderer.setSize(width, height);
75+
});
76+
</script>
77+
</body>
78+
</html>

‎trippy_cursor_colours.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Custom Cursor with Random Color and Trail</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
overflow: hidden; /* Prevent scrollbars when following cursor */
11+
}
12+
13+
/* Hide the default cursor */
14+
body {
15+
cursor: none;
16+
}
17+
18+
/* Create the custom blinking cursor dot */
19+
.custom-cursor {
20+
position: absolute;
21+
width: 300px;
22+
height: 300px;
23+
border-radius: 50%;
24+
pointer-events: none;
25+
transform: translate(-50%, -50%); /* Center the cursor on the mouse */
26+
z-index: 9999;
27+
animation: blink 1s infinite; /* Make the dot blink */
28+
}
29+
30+
/* Define the blinking animation */
31+
@keyframes blink {
32+
0% {
33+
opacity: 1;
34+
}
35+
50% {
36+
opacity: 0;
37+
}
38+
100% {
39+
opacity: 1;
40+
}
41+
}
42+
43+
/* Style for the trail dots */
44+
.trail {
45+
position: absolute;
46+
width: 300px;
47+
height: 300px;
48+
border-radius: 50%;
49+
pointer-events: none;
50+
animation: trail 1s forwards; /* Make the trail dots fade away */
51+
}
52+
53+
/* Define the fading effect for the trail */
54+
@keyframes trail {
55+
0% {
56+
opacity: 1;
57+
}
58+
100% {
59+
opacity: 0;
60+
transform: scale(0.5); /* Optional: Shrink the trail dots for a better effect */
61+
}
62+
}
63+
</style>
64+
</head>
65+
<body>
66+
<div class="custom-cursor" id="cursor"></div>
67+
68+
<script>
69+
const cursor = document.getElementById("cursor");
70+
71+
// Function to generate a random color in hex format
72+
function getRandomColor() {
73+
const letters = '0123456789ABCDEF';
74+
let color = '#';
75+
for (let i = 0; i < 6; i++) {
76+
color += letters[Math.floor(Math.random() * 16)];
77+
}
78+
return color;
79+
}
80+
81+
// Function to create a trail effect
82+
function createTrail(x, y) {
83+
const trailDot = document.createElement('div');
84+
trailDot.classList.add('trail');
85+
trailDot.style.left = `${x}px`;
86+
trailDot.style.top = `${y}px`;
87+
88+
// Assign a random color to the trail dot
89+
trailDot.style.backgroundColor = getRandomColor();
90+
document.body.appendChild(trailDot);
91+
92+
// Remove the trail dot after the animation is finished
93+
setTimeout(() => {
94+
trailDot.remove();
95+
}, 1000); // Matches the duration of the fade effect (1s)
96+
}
97+
98+
document.addEventListener("mousemove", (event) => {
99+
const mouseX = event.clientX;
100+
const mouseY = event.clientY;
101+
102+
// Move the custom cursor to the mouse position
103+
cursor.style.left = `${mouseX}px`;
104+
cursor.style.top = `${mouseY}px`;
105+
106+
// Change the cursor dot's color randomly
107+
cursor.style.backgroundColor = getRandomColor();
108+
109+
// Create a trail dot at the mouse position
110+
createTrail(mouseX, mouseY);
111+
});
112+
</script>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)