Skip to content

Commit

Permalink
Merge pull request #200 from anshdeep0504/your-branch-name
Browse files Browse the repository at this point in the history 
chaosssss text animated
  • Loading branch information
@vansh-codes
vansh-codes authored Oct 30, 2024
2 parents 2113c87 + e335873 commit 6b17eab
Showing 1 changed file with 123 additions and 50 deletions.
173 changes: 123 additions & 50 deletions chaosweb-v@2/index.html
View file
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>

0 comments on commit 6b17eab

Please sign in to comment.