Category: js

Categories
blog js

Chaos emoji

I was planning to add more load to the homepage until it felt heavy, but I ended up creating a fun, game-like chaos effect with falling emojis, gravity and chaos mode.

<div id="container"></div>
<div id="controls"></div>

<script>
// Create and append styles
const style = document.createElement('style');
style.textContent = `
  #container {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index:9;
  }

  .emoji {
    position: absolute;
    user-select: none;
    cursor: pointer;
    font-size: 3rem;
    transition: transform 0.2s;
    z-index: 1;
  }

  .emoji:hover {
    transform: scale(1.2);
    z-index: 2;
  }

  #controls {
position: fixed;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
border-radius: 10px;
display: flex;
gap: 10px;
z-index: 100;
text-align: center;
justify-content: center;
align-items: center;
}

button {
border: medium;
padding: 0;
cursor: pointer;
font-weight: bold;
transition: 0.2s;
font-size: 2.5rem;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 100px;
height: 70px;
width: 70px;
 transform: scale(0.9);
opacity:0.6;
}
button[title="Add More"] {
  display: none;
}

  button:hover { 
    transform: scale(1);
  text-decoration: none;
  opacity:1 !important;
  }
`;
document.head.appendChild(style);

// Initialize the application
const container = document.getElementById("container");
const controlsDiv = document.getElementById("controls");

const emojis = ["🍎","🍊","🍋","🍉","🍇","🍌","🍒","🍑","🍍","🥭","🥝","🍓",
   "⚽","🏀","🏐","🎾","🥎","🏉","🦄","🐇","🐱","🐶","🐰","🦊","🐻","🐼",
               "🐨","🐯","🦁","🐮","🐷","🐸","🐙","🐳","🐠","🦋","🐥","🌺","🌸","💐","🌷","🌹","🥀","🌻","🌼","👑","🎀","🎁","🎂","🍦","🍭","🍬","🧁","🎂","🍰","🧸","🎈","🎉","🎊","🪅","🪩","🎁","🎀","👗","👚","👛","👜","💍","💎","📿","❤️","💖","💝","💗","💓","💞","💕","❣️","⭐","🌟","✨","⚡️","🌈","☁️","☀️","🌙"];

const balls = [];
let num = 35;
let gravityEnabled = true;
let chaosMode = false;

// Create control buttons with emoji icons
const addBtn = document.createElement("button");
addBtn.innerHTML = '🍇';
addBtn.title = "Add More";
controlsDiv.appendChild(addBtn);

const gravityBtn = document.createElement("button");
gravityBtn.innerHTML = '🌍';
gravityBtn.title = "Toggle Gravity";
controlsDiv.appendChild(gravityBtn);

const chaosBtn = document.createElement("button");
chaosBtn.innerHTML = '🌈';
chaosBtn.title = "Super Chaos";
controlsDiv.appendChild(chaosBtn);

// Initialize the animation
function init() {
  // Clear existing balls
  balls.forEach(ball => {
    if (ball.el.parentNode) {
      ball.el.parentNode.removeChild(ball.el);
    }
  });
  balls.length = 0;
  
  // Create new balls
  for (let i = 0; i < num; i++) {
    createBall();
  }
}

// Create a single ball
function createBall() {
  const el = document.createElement("div");
  el.className = "emoji";
  el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
  const size = 2 + Math.random() * 2;
  el.style.fontSize = size + "rem";
  container.appendChild(el);

  const side = Math.floor(Math.random() * 4);
  let x, y, vx, vy;
  
  if (side === 0) { // top
    x = Math.random() * window.innerWidth;
    y = -50;
    vx = (Math.random() - 0.5) * 4;
    vy = Math.random() * 3 + 2;
  } else if (side === 1) { // left
    x = -50;
    y = Math.random() * window.innerHeight;
    vx = Math.random() * 3 + 2;
    vy = (Math.random() - 0.5) * 4;
  } else if (side === 2) { // right
    x = window.innerWidth + 50;
    y = Math.random() * window.innerHeight;
    vx = -(Math.random() * 3 + 2);
    vy = (Math.random() - 0.5) * 4;
  } else { // bottom
    x = Math.random() * window.innerWidth;
    y = window.innerHeight + 50;
    vx = (Math.random() - 0.5) * 4;
    vy = -(Math.random() * 3 + 2);
  }

  const ball = {
    el,
    x, y,
    vx, vy,
    gravity: 0.3 + Math.random() * 0.3,
    bounce: 0.6 + Math.random() * 0.3,
    friction: 0.98,
    size: size
  };
  
  balls.push(ball);

  // Hover effect - bigger bounce
  el.addEventListener("mouseenter", () => {
    ball.vy = -15;
    ball.vx += (Math.random() - 0.5) * 5;
  });
  
  // Click to remove
  el.addEventListener("click", (e) => {
    e.stopPropagation();
    container.removeChild(el);
    const index = balls.indexOf(ball);
    if (index > -1) {
      balls.splice(index, 1);
    }
  });
}

// Animation loop
function animate() {
  balls.forEach(ball => {
    if (gravityEnabled) {
      ball.vy += ball.gravity;
    }
    
    ball.x += ball.vx;
    ball.y += ball.vy;

    const ballBox = ball.el.getBoundingClientRect();

    // Bounce off screen edges
    if (ball.y + ballBox.height >= window.innerHeight) {
      ball.y = window.innerHeight - ballBox.height;
      ball.vy *= -ball.bounce;
      ball.vx *= ball.friction;
    }

    if (ball.y <= 0) {
      ball.y = 0;
      ball.vy *= -ball.bounce;
      ball.vx *= ball.friction;
    }

    if (ball.x <= 0) {
      ball.x = 0;
      ball.vx *= -ball.bounce;
    }
    
    if (ball.x + ballBox.width >= window.innerWidth) {
      ball.x = window.innerWidth - ballBox.width;
      ball.vx *= -ball.bounce;
    }

    // Apply chaos mode effects
    if (chaosMode) {
      ball.vx += (Math.random() - 0.5) * 0.5;
      ball.vy += (Math.random() - 0.5) * 0.5;
      
      // Occasionally change color for fun
      if (Math.random() < 0.01) {
        ball.el.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
      }
    }

    ball.el.style.left = ball.x + "px";
    ball.el.style.top = ball.y + "px";
  });

  requestAnimationFrame(animate);
}

// Event listeners for buttons
addBtn.addEventListener("click", () => {
  for (let i = 0; i < 5; i++) {
    createBall();
  }
});

gravityBtn.addEventListener("click", () => {
  gravityEnabled = !gravityEnabled;
  gravityBtn.innerHTML = gravityEnabled ? '🌍' : '🚀';
  gravityBtn.title = gravityEnabled ? "Gravity On" : "Gravity Off";
});

chaosBtn.addEventListener("click", () => {
  chaosMode = !chaosMode;
  chaosBtn.innerHTML = chaosMode ? '🌪️' : '🌈';
  chaosBtn.title = chaosMode ? "Normal Mode" : "Super Chaos"; 
});

// Handle window resize
window.addEventListener("resize", () => {
  balls.forEach(ball => {
    // Keep balls within new screen bounds
    ball.x = Math.min(ball.x, window.innerWidth - ball.el.getBoundingClientRect().width);
    ball.y = Math.min(ball.y, window.innerHeight - ball.el.getBoundingClientRect().height);
  });
});

// Initialize and start animation
init();
animate();
</script>
Expand

2.0v 15 sep 2025

  • Auto Start Mode chaosMode/gravityEnabled
<div id="container"></div>
<div id="controls"></div>

<script>
// Create and append styles
const style = document.createElement('style');
style.textContent = `
  #container {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index:3;
  }

  .emoji {
    position: absolute;
    user-select: none;
    cursor: pointer;
    font-size: 3rem;
    transition: transform 0.2s;
    z-index: 1;
  }

  .emoji:hover {
    transform: scale(1.2);
    z-index: 2;
  }

  #controls {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    z-index: 100;
    text-align: center;
    justify-content: center;
    align-items: center; 
    max-width: 90%;
  }

  button {
    border: medium;
    padding: 0;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    font-size: 2.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    height: 70px;
    width: 70px;
    transform: scale(0.9);
    opacity:0;
  }
  button[title="Add More"] {
    display: none;
  }

  button:hover { 
    transform: scale(1);
    text-decoration: none;
    opacity:1 !important;
  }

  #controls:hover button{
    opacity:1 !important;
  }
  
  .active-mode {
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7);
    animation: pulse 1s infinite;
  }
  
  @keyframes pulse {
    0% { transform: scale(0.9); }
    50% { transform: scale(1); }
    100% { transform: scale(0.9); }
  }
`;
document.head.appendChild(style);

// Initialize the application
const container = document.getElementById("container");
const controlsDiv = document.getElementById("controls");

const emojis = ["🍎","🍊","🍋","🍉","🍇","🍌","🍒","🍑","🍍","🥭","🥝","🍓",
   "⚽","🏀","🏐","🎾","🥎","🏉","🦄","🐇","🐱","🐶","🐰","🦊","🐻","🐼",
               "🐨","🐯","🦁","🐮","🐷","🐸","🐙","🐳","🐠","🦋","🐥","🌺","🌸","💐","🌷","🌹","🥀","🌻","🌼","👑","🎀","🎁","🎂","🍦","🍭","🍬","🧁","🎂","🍰","🧸","🎈","🎉","🎊","🪅","🪩","🎁","🎀","👗","👚","👛","👜","💍","💎","📿","❤️","💖","💝","💗","💓","💞","💕","❣️","⭐","🌟","✨","⚡️","🌈","☁️","☀️","🌙"];

const balls = [];
let num = 15;
let gravityEnabled = true;
let chaosMode = false;
let autoModeInterval;
let autoModeDelay = 2000; // Start with 2 seconds
let autoModeActiveTime = 5000; // Start with 5 seconds active

// Create control buttons with emoji icons
const addBtn = document.createElement("button");
addBtn.innerHTML = '🍇';
addBtn.title = "Add More";
controlsDiv.appendChild(addBtn);

const gravityBtn = document.createElement("button");
gravityBtn.innerHTML = '🌍';
gravityBtn.title = "Toggle Gravity";
controlsDiv.appendChild(gravityBtn);

const chaosBtn = document.createElement("button");
chaosBtn.innerHTML = '🌈';
chaosBtn.title = "Super Chaos";
controlsDiv.appendChild(chaosBtn);

const autoBtn = document.createElement("button");
autoBtn.innerHTML = '⏱️';
autoBtn.title = "Auto Mode";
controlsDiv.appendChild(autoBtn);

// Initialize the animation
function init() {
  // Clear existing balls
  balls.forEach(ball => {
    if (ball.el.parentNode) {
      ball.el.parentNode.removeChild(ball.el);
    }
  });
  balls.length = 0;
  
  // Create new balls
  for (let i = 0; i < num; i++) {
    createBall();
  }
}

// Create a single ball
function createBall() {
  const el = document.createElement("div");
  el.className = "emoji";
  el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
  const size = 2 + Math.random() * 2;
  el.style.fontSize = size + "rem";
  container.appendChild(el);

  const side = Math.floor(Math.random() * 4);
  let x, y, vx, vy;
  
  if (side === 0) { // top
    x = Math.random() * window.innerWidth;
    y = -50;
    vx = (Math.random() - 0.5) * 4;
    vy = Math.random() * 3 + 2;
  } else if (side === 1) { // left
    x = -50;
    y = Math.random() * window.innerHeight;
    vx = Math.random() * 3 + 2;
    vy = (Math.random() - 0.5) * 4;
  } else if (side === 2) { // right
    x = window.innerWidth + 50;
    y = Math.random() * window.innerHeight;
    vx = -(Math.random() * 3 + 2);
    vy = (Math.random() - 0.5) * 4;
  } else { // bottom
    x = Math.random() * window.innerWidth;
    y = window.innerHeight + 50;
    vx = (Math.random() - 0.5) * 4;
    vy = -(Math.random() * 3 + 2);
  }

  const ball = {
    el,
    x, y,
    vx, vy,
    gravity: 0.3 + Math.random() * 0.3,
    bounce: 0.6 + Math.random() * 0.3,
    friction: 0.98,
    size: size
  };
  
  balls.push(ball);

  // Hover effect - bigger bounce
  el.addEventListener("mouseenter", () => {
    ball.vy = -15;
    ball.vx += (Math.random() - 0.5) * 5;
  });
  
  // Click to remove
  el.addEventListener("click", (e) => {
    e.stopPropagation();
    container.removeChild(el);
    const index = balls.indexOf(ball);
    if (index > -1) {
      balls.splice(index, 1);
    }
  });
}

// Animation loop
function animate() {
  balls.forEach(ball => {
    if (gravityEnabled) {
      ball.vy += ball.gravity;
    }
    
    ball.x += ball.vx;
    ball.y += ball.vy;

    const ballBox = ball.el.getBoundingClientRect();

    // Bounce off screen edges
    if (ball.y + ballBox.height >= window.innerHeight) {
      ball.y = window.innerHeight - ballBox.height;
      ball.vy *= -ball.bounce;
      ball.vx *= ball.friction;
    }

    if (ball.y <= 0) {
      ball.y = 0;
      ball.vy *= -ball.bounce;
      ball.vx *= ball.friction;
    }

    if (ball.x <= 0) {
      ball.x = 0;
      ball.vx *= -ball.bounce;
    }
    
    if (ball.x + ballBox.width >= window.innerWidth) {
      ball.x = window.innerWidth - ballBox.width;
      ball.vx *= -ball.bounce;
    }

    // Apply chaos mode effects
    if (chaosMode) {
      ball.vx += (Math.random() - 0.5) * 0.5;
      ball.vy += (Math.random() - 0.5) * 0.5;
      
      // Occasionally change color for fun
      if (Math.random() < 0.01) {
        ball.el.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
      }
    }

    ball.el.style.left = ball.x + "px";
    ball.el.style.top = ball.y + "px";
  });

  requestAnimationFrame(animate);
}

// Auto mode function
function startAutoMode() {
  // Clear any existing interval
  if (autoModeInterval) {
    clearInterval(autoModeInterval);
  }
  
  // Reset to initial values
  autoModeDelay = 2000;
  autoModeActiveTime = 5000;
  
  // Start the cycle
  autoModeInterval = setInterval(() => {
    // Enable both modes after the delay
    setTimeout(() => {
      gravityEnabled = true;
      chaosMode = true;
      updateButtonStates();
      
      // Disable after active time
      setTimeout(() => {
        gravityEnabled = false;
        chaosMode = false;
        updateButtonStates();
        
        // Multiply both delay and active time for next cycle
        autoModeDelay *= 3; // Changed from *2 to *3
        autoModeActiveTime *= 3; // Changed from fixed 5s to multiplied by 3
      }, autoModeActiveTime);
    }, autoModeDelay);
  }, autoModeDelay + autoModeActiveTime); // Total cycle time = delay + active time
}

// Update button visual states
function updateButtonStates() {
  if (gravityEnabled) {
    gravityBtn.classList.add('active-mode');
  } else {
    gravityBtn.classList.remove('active-mode');
  }
  
  if (chaosMode) {
    chaosBtn.classList.add('active-mode');
  } else {
    chaosBtn.classList.remove('active-mode');
  }
  
  gravityBtn.innerHTML = gravityEnabled ? '🌍' : '🚀';
  gravityBtn.title = gravityEnabled ? "Gravity On" : "Gravity Off";
  
  chaosBtn.innerHTML = chaosMode ? '🌪️' : '🌈';
  chaosBtn.title = chaosMode ? "Normal Mode" : "Super Chaos";
}

// Event listeners for buttons
addBtn.addEventListener("click", () => {
  for (let i = 0; i < 5; i++) {
    createBall();
  }
});

gravityBtn.addEventListener("click", () => {
  gravityEnabled = !gravityEnabled;
  updateButtonStates();
});

chaosBtn.addEventListener("click", () => {
  chaosMode = !chaosMode;
  updateButtonStates();
});

autoBtn.addEventListener("click", () => {
  startAutoMode();
  autoBtn.classList.add('active-mode');
});

// Handle window resize
window.addEventListener("resize", () => {
  balls.forEach(ball => {
    // Keep balls within new screen bounds
    ball.x = Math.min(ball.x, window.innerWidth - ball.el.getBoundingClientRect().width);
    ball.y = Math.min(ball.y, window.innerHeight - ball.el.getBoundingClientRect().height);
  });
});

// Initialize and start animation
init();
animate();

// Start auto mode after page loads
setTimeout(() => {
  startAutoMode();
  autoBtn.classList.add('active-mode');
}, 1000);
</script>
Expand

Credit : Deepseek

Categories
blog javascript js Swiper

Swiper Last slide space 

Screenshot 2023 02 18 at 12.21.51

adding slidePerView and SpaceBetween will solve it – slidesPerView: “1.5”

http://sumnima-clear.mybigcommerce.com/

var swiper = new Swiper(".swiper", {
    slidesPerView: 4,
    spaceBetween: 16,
    breakpoints: {
        320: {
            watchSlidesProgress: true,
            slidesPerView: "1.5",
            shortSwipes: false
        },
        500: {
            watchSlidesProgress: true,
            slidesPerView: "2",
            shortSwipes: false
        },
        1024: {
            preventInteractionOnTransition: true,
            watchSlidesProgress: true,
            slidesPerView: "4.5",
            shortSwipes: false
        },
    },
});
Categories
blog js

add body class based on the url using RegEx

/* add body class */
var loc = window.location.pathname.match(/^\/?(\w+)\b/);
if(loc) $(document.body).addClass(loc[1].toLowerCase());



https://gist.github.com/mware/4118884

Categories
blog js

Simple, All in one JS Plugins

http://formstone.it/

Categories
blog cookies js

coverpopjs.com

Cookies

CoverPop.js is a lightweight lightbox’y modal plugin with cookie integration. Style agnostic and responsive friendly.

Usage

If you are trying to show up a lightbox popup to first time visitors that is easily styleable and has cookie integration, this is for you.

If you are trying to show a lightbox image when someone clicks on an internal link, this isn’t for you.

VIEW DEMO

 

Background

CoverPop is an extension of code that we frequently found ourselves using on political campaign websites for email signups with first time visitors. We needed something that was customizable to the point that we could use it how we wanted without it getting in the way.

Setup

HTML

#CoverPop-cover is used on the full window cover.

By default, a click on any element with .CoverPop-close will close the popup. CoverPop adds preventDefault()to elements with this class.

If you wish to continue with the default action, but also hide the popup, add .CoverPop-close-go. This is particularly useful for form submissions that are sent to another page.

12345678910111213141516171819
<body>
<!– your site’s markup –>
<!– start popup –>
<div id=“CoverPop-cover“ class=“splash“>
<div class=“CoverPop-content splash-center“>
<!– the popup content (form, welcome message, etc.) –>
<a class=“CoverPop-close“ href=“#“>or skip signup</a>
</div><!–end .splash-center –>
</div><!–end .splash –>
<!– end popup –>
<!– js, etc. –>
</body>
view rawCoverPop-html.html hosted with ❤ by GitHub

CSS

Include the plugin css file:

1
<link rel=“stylesheet“ href=“css/CoverPop.css“>
view rawCoverPop.html hosted with ❤ by GitHub

JS

CoverPop does not use jQuery, so the only file that needs to be included is CoverPop.js.

Start CoverPop with the default settings:

1
CoverPop.start();
view rawCoverPop.js hosted with ❤ by GitHub

Options

CoverPop can be customized in numerous ways. Just pass an object to the start function with what you want to change. The start function is an alias for init.

NAMEDEFAULTDETAILSTYPE
coverId“CoverPop-cover”set default cover (background) idstring
expires30duration (in days) before it pops up againinteger
closeClassNoDefault“CoverPop-close”close if someone clicks an element with this class and prevent default actionstring
closeClassDefault“CoverPop-close-go”close if someone clicks an element with this class and continue default actionstring
cookieName“CoverPop”to change the plugin cookie namestring
onPopUpOpenfunction() {}on popup open / default is nothingfunction
onPopUpClosefunction() {}on popup close / default is nothingfunction
forceHash“splash”hash to append to url to force display of popupstring
delayHash“go”hash to append to url to delay popup for 1 daystring
closeOnEscapetrueclose if the user clicks escapeboolean
debugfalsetoggle console.log statements for debuggingboolean

Examples

Use a new cookie

Example use: You changed the popup, and want all new visitors to see the new one.

123
CoverPop.start({
cookieName: ‘CoverPop-new‘
});
view rawCoverPop-newcookie.js hosted with ❤ by GitHub

Hide popup to the visitor for a day

Example use: You are sending visitors to a page that already has a signup form, and don’t want them to see the popup.

1
http://www.example.com/#go
view rawCoverPop-delay.txt hosted with ❤ by GitHub

Force popup

Example use: You are sending visitors to a page and want visitors who have already been to the site to see the popup again.

1
http://www.example.com/#splash
view rawCoverPop-force.txt hosted with ❤ by GitHub

Change time before cookie expires

Example use: You want visitors to see the popup every 7 days, instead of 30.

123
CoverPop.start({
expires: 7
});
view rawCoverPop-expire.js hosted with ❤ by GitHub

Do something after the popup closes

Example use: You want to start a video after the popup is closed.

123456
CoverPop.start({
onPopUpClose: function() {
var player = document.getElementById(‘myVideo‘);
player.play();
}
});
view rawCoverPop-callback.js hosted with ❤ by GitHub

Hide the popup when someone clicks submit on a form and continue

Example use: You want to close the popup and set the cookie when a visitor clicks submit on a form in the popup.

1
<input type=“submit“ value=“Submit“ class=“CoverPop-close-go“>
view rawCoverPop-close.html hosted with ❤ by GitHub

Browsers

IE8+

Source

tylerpearson/CoverPop

4514

CoverPop is modal splash page plugin that is easily styleable — Read More

http://coverpopjs.com

Latest commit to the master branch on 12-21-2014

Download as zip

VIEW ON GITHUB

License

MIT.

Continue reading “coverpopjs.com”