Snippets

Custom Code Snippets for Enhanced Visuals and Functionality

Description

This bundle includes a variety of ready-to-use code snippets that enhance the appearance and functionality of your website. The codes range from basic visual improvements like background color changes and button styling to more advanced effects such as animated preloaders, floating panels, and interactive wizards.

Each snippet is lightweight, customizable, and works without external libraries. They are ideal for web designers and developers who want more control over visual presentation and UX, without relying on heavy plugins.

Notes
Get Help

Integration

All snippets are designed to work across modern WordPress setups. You can integrate them in two main ways:

1. For visual styling (backgrounds, buttons, fonts, shadows, etc.):

– Use the built-in “Additional CSS” field in the WordPress Customizer (Appearance → Customize → Additional CSS).
– Or inject the CSS using HFCM (Header Footer Code Manager) as a style block.
– Make sure the element selectors match your theme (you can adjust .my-button, body, section, etc.).

2. For animations, preloaders, and dynamic UI (JS or HTML+CSS based):

– Paste the <script> and <style> code into HFCM, or a plugin like Code Snippets.
– For snippets that require HTML containers (e.g. loaders or widgets), insert them into your theme using HTML blocks, widget areas, or custom templates.
– Always place JavaScript after the DOM loads – either at the footer or inside a DOMContentLoaded wrapper.

3. Universal recommendations:

– Snippets are modular – include only what you need.
– All styles are fully customizable: you can change sizes, spacing, color schemes, and timing.
– Compatible with most themes and page builders (Elementor, Gutenberg, Blocksy, Astra, etc.).
– No special setup required – just copy, paste, and tweak.

Scripts:

1 – Animated Vein Lines Background
2 – Animated Pulse Grid Overlay
3 – Geometric Rise Animation
4 – Parallax Depth Dots
5 – ASCII Matrix Overlay
6 – Mobile Browser – Top Bar Controls (color)
7 – Mobile UI Color – Bottom Bar Controls (color)
8 – Invisible reCaptcha Badge.
9 – Global Text Shadow

1 – Animated Vein Lines Background

Creates animated SVG vein-like lines that float gently in the background for a subtle, organic visual effect.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const svgNS = "http://www.w3.org/2000/svg";
  const svg = document.createElementNS(svgNS, "svg");
  svg.setAttribute("class", "line-veins");
  svg.setAttribute("preserveAspectRatio", "none");
  svg.setAttribute("viewBox", "0 0 1000 2000"); // large canvas height

  // Create 15 smooth flowing paths
  for (let i = 0; i < 15; i++) {
    const path = document.createElementNS(svgNS, "path");
    path.setAttribute("d", generateSmoothPath());
    path.setAttribute("stroke", "#4f97b2");
    path.setAttribute("stroke-width", "0.8");
    path.setAttribute("fill", "none");
    path.setAttribute("opacity", Math.random() * 0.3 + 0.25);
    path.style.animation = `pathFloat ${Math.random() * 10 + 8}s ease-in-out infinite alternate`;
    svg.appendChild(path);
  }

  const wrapper = document.createElement("div");
  wrapper.className = "vein-wrapper";
  wrapper.appendChild(svg);
  container.appendChild(wrapper);

  const style = document.createElement("style");
  style.textContent = `
    .vein-wrapper {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.4;
    }

    .line-veins {
      width: 100%;
      height: 100%;
    }

    @keyframes pathFloat {
      from { transform: translateY(0); }
      to   { transform: translateY(-20px); }
    }

    .entry-content.is-layout-constrained > *:not(.vein-wrapper) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);

  function generateSmoothPath() {
    const startX = Math.random() * 1000;
    let y = 0;
    let path = `M${startX},${y}`;
    const amplitude = Math.random() * 60 + 40;
    const wavelength = Math.random() * 300 + 150;

    // Use cubic bezier curves for smoothness
    while (y < 2000) {
      const cp1x = startX + (Math.random() - 0.5) * amplitude;
      const cp1y = y + wavelength / 3;
      const cp2x = startX + (Math.random() - 0.5) * amplitude;
      const cp2y = y + 2 * wavelength / 3;
      const endX = startX + (Math.random() - 0.5) * amplitude;
      const endY = y + wavelength;

      path += ` C${cp1x},${cp1y},${cp2x},${cp2y},${endX},${endY}`;
      y = endY;
    }

    return path;
  }
});
</script>

2 – Animated Pulse Grid Overlay

Adds a soft, animated grid of pulsing lines over the content for a subtle tech-style background effect.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const grid = document.createElement("div");
  grid.className = "pulse-grid";
  container.appendChild(grid);

  // Horizontal lines
  for (let i = 0; i < 12; i++) {
    const h = document.createElement("div");
    h.className = "pulse-line horizontal";
    h.style.top = `${i * 8}%`;
    h.style.animationDelay = `${i * 0.3}s`;
    grid.appendChild(h);
  }

  // Vertical lines
  for (let i = 0; i < 12; i++) {
    const v = document.createElement("div");
    v.className = "pulse-line vertical";
    v.style.left = `${i * 8}%`;
    v.style.animationDelay = `${i * 0.3}s`;
    grid.appendChild(v);
  }

  const style = document.createElement("style");
  style.textContent = `
    .pulse-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      animation: fadeGridIn 1.8s ease-in-out forwards;
    }

    .pulse-line {
      position: absolute;
      background: rgba(147, 199, 159, 0.1);
      animation: pulseFlash 4s ease-in-out infinite;
      opacity: 0.1;
    }

    .pulse-line.horizontal {
      width: 100%;
      height: 1px;
    }

    .pulse-line.vertical {
      height: 100%;
      width: 1px;
    }

    @keyframes pulseFlash {
      0%, 100% { opacity: 0.08; }
      50%      { opacity: 0.4; }
    }

    @keyframes fadeGridIn {
      to { opacity: 1; }
    }

    /* Fading top & bottom overlay */
    .pulse-grid::before,
    .pulse-grid::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 60px;
      z-index: 1;
      pointer-events: none;
    }

    .pulse-grid::before {
      top: 0;
      background: linear-gradient(to bottom, #0f304b 0%, transparent 100%);
    }

    .pulse-grid::after {
      bottom: 0;
      background: linear-gradient(to top, #0f304b 0%, transparent 100%);
    }

    .entry-content.is-layout-constrained > *:not(.pulse-grid) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);
});
</script>

3 – Geometric Rise Animation

Generates floating geometric shapes (circles, squares, triangles) that rise upward with varied speed, size, and delay for a dynamic, playful background effect.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const geoLayer = document.createElement("div");
  geoLayer.className = "geo-layer";

  const shapes = ['circle', 'square', 'triangle'];
  for (let i = 0; i < 30; i++) {
    const shape = document.createElement("div");
    shape.className = `geo-shape ${shapes[i % 3]}`;
    shape.style.setProperty('--x', `${Math.random() * 100}%`);
    shape.style.setProperty('--delay', `${Math.random() * 10}s`);
    shape.style.setProperty('--duration', `${8 + Math.random() * 8}s`);
    shape.style.setProperty('--scale', `${Math.random() * 0.7 + 0.5}`);
    geoLayer.appendChild(shape);
  }

  container.appendChild(geoLayer);

  const style = document.createElement("style");
  style.textContent = `
    .geo-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .geo-shape {
      position: absolute;
      left: var(--x);
      top: 100%;
      opacity: 0;
      transform: scale(var(--scale));
      animation: geoRise var(--duration) linear infinite;
      animation-delay: var(--delay);
    }

    .geo-shape.circle {
      width: 14px;
      height: 14px;
      background: #93C79F;
      border-radius: 50%;
    }

    .geo-shape.square {
      width: 14px;
      height: 14px;
      background: #4F97B2;
    }

    .geo-shape.triangle {
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 14px solid #3B7BA2;
    }

    @keyframes geoRise {
      0% {
        top: 100%;
        opacity: 0;
      }
      10% {
        opacity: 0.3;
      }
      90% {
        opacity: 0.3;
      }
      100% {
        top: -40px;
        opacity: 0;
      }
    }

    .entry-content.is-layout-constrained > *:not(.geo-layer) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);
});
</script>

4 – Parallax Depth Dots

Creates a field of soft, scattered dots with subtle parallax scrolling to add depth and atmosphere to the background.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const depthLayer = document.createElement("div");
  depthLayer.className = "depth-dots";
  container.appendChild(depthLayer);

  for (let i = 0; i < 120; i++) {
    const dot = document.createElement("span");
    dot.className = "depth-dot";
    dot.style.left = `${Math.random() * 100}%`;
    dot.style.top = `${Math.random() * 300}%`; // taller than viewport
    dot.style.width = dot.style.height = `${Math.random() * 2 + 1.5}px`;
    dot.style.opacity = `${Math.random() * 0.4 + 0.1}`;
    depthLayer.appendChild(dot);
  }

  const style = document.createElement("style");
  style.textContent = `
    .depth-dots {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      transform: translateZ(0);
      will-change: transform;
      overflow: hidden;
    }

    .depth-dot {
      position: absolute;
      background: #93C79F;
      border-radius: 50%;
      filter: blur(0.5px);
      transition: top 0.2s;
    }

    .entry-content.is-layout-constrained > *:not(.depth-dots) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);

  // Scroll-linked parallax
  window.addEventListener("scroll", () => {
    const scrollY = window.scrollY || window.pageYOffset;
    depthLayer.style.transform = `translateY(${scrollY * -0.2}px)`;
  });
});
</script>

5 – ASCII Matrix Overlay

Renders a scrolling grid of random ASCII characters behind the content, enhanced with soft edge fades for a retro-cyber ambient effect.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const target = document.querySelector(".entry-content.is-layout-constrained");
  if (!target) return;

  document.body.style.position = "relative";

  const asciiLayer = document.createElement("div");
  asciiLayer.className = "ascii-background";
  document.body.appendChild(asciiLayer);

  const fades = [
    { class: 'fade-top',    css: 'top:0;left:0;width:100%;height:60px;background:linear-gradient(to bottom,#0f304b,transparent);' },
    { class: 'fade-bottom', css: 'bottom:0;left:0;width:100%;height:60px;background:linear-gradient(to top,#0f304b,transparent);' },
    { class: 'fade-left',   css: 'top:0;left:0;width:60px;height:100%;background:linear-gradient(to right,#0f304b,transparent);' },
    { class: 'fade-right',  css: 'top:0;right:0;width:60px;height:100%;background:linear-gradient(to left,#0f304b,transparent);' },
  ];

  fades.forEach(({ class: cls, css }) => {
    const div = document.createElement("div");
    div.className = `ascii-fade ${cls}`;
    div.style.cssText = `position:absolute;pointer-events:none;z-index:1;${css}`;
    asciiLayer.appendChild(div);
  });

  const chars = ["#", ".", "+", "-", "=", "*", ":", "~", "^"];
  const rowHeight = 12;
  const colCount = 180;

  function fillAsciiGrid() {
    // запази fade-овете
    const savedFades = Array.from(asciiLayer.querySelectorAll('.ascii-fade'));
    asciiLayer.innerHTML = '';
    savedFades.forEach(f => asciiLayer.appendChild(f));

    const height = target.offsetHeight;
    const rowCount = Math.ceil(height / rowHeight);

    for (let r = 0; r < rowCount; r++) {
      const row = document.createElement("div");
      row.className = "ascii-row";
      for (let c = 0; c < colCount; c++) {
        const char = document.createElement("span");
        char.textContent = chars[Math.floor(Math.random() * chars.length)];
        row.appendChild(char);
      }
      asciiLayer.appendChild(row);
    }

    const rect = target.getBoundingClientRect();
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    asciiLayer.style.top = rect.top + scrollTop + 'px';
    asciiLayer.style.height = rect.height + 'px';
  }

  const style = document.createElement("style");
  style.textContent = `
    .ascii-background {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 0;
      font-family: monospace;
      font-size: 10px;
      line-height: ${rowHeight}px;
      color: rgba(147,199,159,0.035);
      pointer-events: none;
      white-space: pre;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .ascii-row {
      display: flex;
      justify-content: center;
      height: ${rowHeight}px;
    }

    .ascii-row span {
      padding: 0 3px;
    }

    .entry-content.is-layout-constrained > *:not(.ascii-background) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);

  fillAsciiGrid();
  window.addEventListener("resize", fillAsciiGrid);
  window.addEventListener("scroll", fillAsciiGrid);
});
</script>

6 – Mobile Browser – Top Bar Controls (color)

Sets the mobile –> browser’s address bar <-- to match the site's color, using theme-color.


<!-- Sets the top browser bar color on mobile (address bar + system UI) -->
<meta name="theme-color" content="#0F304B">

7 – Mobile UI Color – Bottom Bar Controls (color)

Sets the mobile –> system UI <-- to match the site's theme color, using color-scheme.


/* Sets the bottom nav bar (Android soft buttons) to dark on mobile */
:root {
  color-scheme: dark;
  background-color: #0F304B;
}

8 – Invisible reCaptcha Badge.

Lowers the opacity of the Google reCaptcha badge on contact forms to make it nearly invisible, while still keeping it functional.


/* Contact FORM – make the reCaptcha badge nearly invisible */
.grecaptcha-badge {
  opacity: 0.1;
  z-index: 1;
}

9 – Global Text Shadow

Applies a soft shadow to all common text elements for better readability and subtle visual depth across the site.


/* All Texts shadows */
body, h1, h2, h3, h4, h5, h6, p, span, li, a {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}