Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chaosssss text animated #200

Merged
merged 1 commit into from
Oct 30, 2024
Merged

chaosssss text animated #200

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 123 additions & 50 deletions chaosweb-v@2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,129 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ChaosWeb</title>
<!-- Link to the external CSS file -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- First Parallax Section -->
<div class="parallax"></div>

<!-- Content Section -->
<div class="content">
<h1>Welcome to ChaosWeb</h1>
</div>

<!-- Second Parallax Section -->
<div class="parallax-2"></div>

<!-- Content Section -->
<div class="content">
<h1>Scroll for the Chaos</h1>
</div>
<div id="root"></div>

<script type="module" src="/src/main.jsx"></script>
<script>
// The base title that should not fully change
const titleText = "Chaotic Title!";
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";

// Function to randomize certain characters only
function randomizeTitle() {
let chaoticTitle = '';
for (let i = 0; i < titleText.length; i++) {
// Randomize only certain characters, while leaving others untouched
if (titleText[i] !== ' ' && Math.random() > 0.7) { // Adjust randomness threshold here (0.7)
chaoticTitle += characters.charAt(Math.floor(Math.random() * characters.length));
} else {
chaoticTitle += titleText[i]; // Keep the original character
}
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ChaosWeb</title>
<link rel="stylesheet" href="style.css" />
<style>
/* Parallax sections */
.parallax, .parallax-2 {
background: url('parallax-image.jpg') no-repeat fixed center;
height: 500px;
background-size: cover;
}

/* Content styling */
.content {
text-align: center;
margin: 50px;
font-family: Arial, sans-serif;
}

/* Chaotic text styling */
.chaos-text {
font-size: 3rem;
color: #33ccff;
display: inline-block;
position: relative;
animation: chaoticRotation 0.3s infinite alternate ease-in-out,
chaoticScale 0.2s infinite alternate ease-in-out,
chaoticColor 0.1s infinite alternate;
}

/* Keyframes for chaotic animations */
@keyframes chaoticRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(10deg); }
}

@keyframes chaoticScale {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}

@keyframes chaoticColor {
0%, 100% { color: #33ccff; }
25% { color: #ff5733; }
50% { color: #33ff57; }
75% { color: #5733ff; }
}

/* Adding random glitches and position shifts */
@keyframes glitch {
0% { transform: translate(0px, 0px); }
25% { transform: translate(-5px, 5px); }
50% { transform: translate(5px, -5px); }
75% { transform: translate(-5px, -5px); }
100% { transform: translate(5px, 5px); }
}
.chaos-text.glitch {
animation: chaoticRotation 0.3s infinite alternate ease-in-out,
chaoticScale 0.2s infinite alternate ease-in-out,
chaoticColor 0.1s infinite alternate,
glitch 0.05s infinite alternate ease-in-out;
}
</style>
</head>
<body>
<!-- First Parallax Section -->
<div class="parallax"></div>

<!-- Content Section -->
<div class="content">
<h1 class="chaos-text glitch" id="chaosText">Welcome to ChaosWeb</h1>
</div>

<!-- Second Parallax Section -->
<div class="parallax-2"></div>

<!-- Content Section -->
<div class="content">
<h1 class="chaos-text glitch" id="chaosScrollText">Scroll for the Chaos</h1>
</div>

<div id="root"></div>

<script type="module" src="/src/main.jsx"></script>
<script>
// JavaScript for dynamic title changes
const titleText = "Chaotic Title!";
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";

function randomizeTitle() {
let chaoticTitle = '';
for (let i = 0; i < titleText.length; i++) {
if (titleText[i] !== ' ' && Math.random() > 0.5) {
chaoticTitle += characters.charAt(Math.floor(Math.random() * characters.length));
} else {
chaoticTitle += titleText[i];
}
// Set the new title in the document
document.title = chaoticTitle;

}

// Update the title every 500 milliseconds
setInterval(randomizeTitle, 500);
document.title = chaoticTitle;
}
setInterval(randomizeTitle, 300);

// JavaScript for chaotic effects on both text elements
const chaosText = document.getElementById('chaosText');
const chaosScrollText = document.getElementById('chaosScrollText');

function applyExtremeChaosEffect(element) {
const randomRotation = Math.floor(Math.random() * 30) - 15;
const randomScale = 1 + Math.random() * 0.3;
const randomColor = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;

</script>
</body>
element.style.transform = `rotate(${randomRotation}deg) scale(${randomScale})`;
element.style.color = randomColor;
element.style.marginLeft = `${Math.floor(Math.random() * 20) - 10}px`;
element.style.marginTop = `${Math.floor(Math.random() * 20) - 10}px`;
}

// Apply chaotic effect every 100ms to both elements
setInterval(() => {
applyExtremeChaosEffect(chaosText);
applyExtremeChaosEffect(chaosScrollText);
}, 100);
</script>
</body>
</html>
Loading