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

I have added the emojis as discussed #206

Closed
wants to merge 3 commits into from
Closed

I have added the emojis as discussed #206

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cfa73a6
Update index.html
anshdeep0504 Oct 30, 2024
e3b6418
Update index.html
anshdeep0504 Oct 30, 2024
a483055
Merge branch 'main' into main
anshdeep0504 Oct 31, 2024
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
97 changes: 47 additions & 50 deletions chaosweb-v@2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
<title>ChaosWeb</title>
<link rel="stylesheet" href="style.css" />
<style>
/* Body styling for chaotic background */
body {
margin: 0;
overflow-x: hidden;
background: linear-gradient(45deg, #ff6ec4, #7873f5, #33ccff, #ff5733, #33ff57, #5733ff);
background-size: 300% 300%;
animation: backgroundShift 10s infinite alternate;
font-family: Arial, sans-serif;
position: relative;
}

/* Chaotic text styling */
Expand Down Expand Up @@ -46,22 +46,13 @@
75% { color: #5733ff; }
}

/* Glitch effect */
@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;
/* Emoji styling - fixed position along the edges */
.emoji {
position: fixed;
font-size: 2rem;
opacity: 0.9;
}

/* Background color-changing animation */
@keyframes backgroundShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
Expand All @@ -85,59 +76,65 @@
<body>
<!-- First Parallax Section -->
<div class="parallax">
<h1 class="chaos-text glitch" id="chaosText">Welcome to ChaosWeb</h1>
<h1 class="chaos-text">Welcome to ChaosWeb</h1>
</div>

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

<!-- Second Parallax Section -->
<div class="parallax-2">
<h1 class="chaos-text glitch">Embrace the Madness</h1>
<h1 class="chaos-text">Embrace the Madness</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];
}
const emojis = ['👻', '😜', '😈', '💀', '🎃', '👹', '👺'];
const emojiSize = 30;

function createEmojiBoundary() {
const width = window.innerWidth;
const height = window.innerHeight;

// Top boundary
for (let i = 0; i < width / emojiSize; i++) {
placeEmoji(i * emojiSize, 0);
}

// Bottom boundary
for (let i = 0; i < width / emojiSize; i++) {
placeEmoji(i * emojiSize, height - emojiSize);
}

// Left boundary
for (let i = 0; i < height / emojiSize; i++) {
placeEmoji(0, i * emojiSize);
}

// Right boundary
for (let i = 0; i < height / emojiSize; i++) {
placeEmoji(width - emojiSize, i * emojiSize);
}
document.title = chaoticTitle;
}
setInterval(randomizeTitle, 300);

// Chaotic effect on 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%)`;

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`;

function placeEmoji(x, y) {
const emoji = document.createElement('span');
emoji.classList.add('emoji');
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.left = `${x}px`;
emoji.style.top = `${y}px`;
document.body.appendChild(emoji);
}

setInterval(() => {
applyExtremeChaosEffect(chaosText);
applyExtremeChaosEffect(chaosScrollText);
}, 100);
createEmojiBoundary();
window.addEventListener('resize', () => {
document.querySelectorAll('.emoji').forEach(emoji => emoji.remove());
createEmojiBoundary();
});
</script>
</body>
</html>