Мобильная версияВ iframe я пробовал использовать css:
Код: Выделить всё
outline: none !important;
Код: Выделить всё
border: none !important;
Код: Выделить всё
SVG Digital Rain (Optimized Full Screen) /* --- CSS STYLING --- */ body { background-color: black; margin: 0; padding: 0; height: 100vh; width: 100vw; overflow: hidden; } #matrix-rain { width: 100%; height: 100%; display: block; overflow: hidden; /* CRITICAL FIX: Ensure no border or outline on the root SVG */ border: none; outline: none; } .rain-column { /* Kept for optimization: tells the browser to use the GPU */ will-change: transform; } .rain-char { font-family: 'Consolas', 'Courier New', monospace; font-size: 20px; fill: #00FF00; } .char-head { fill: #FFFFFF; /* SHADOW REMOVED: Deleted the filter: drop-shadow(...) rule here */ font-weight: bold; } // --- JAVASCRIPT ANIMATION LOGIC --- const svg = document.getElementById('matrix-rain'); // Define SVG boundaries based on viewBox const svgWidth = 850; const svgHeight = 750; // Character set const CHARS = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ0123456789"; // --- CONFIGURATION --- // These constants are already well-optimized for a fluid GPU-accelerated effect const MIN_SPEED = 3; const MAX_SPEED = 7; const CHAR_SIZE = 20; const SPACING_Y = CHAR_SIZE; const SPACING_X = CHAR_SIZE - 2; const MIN_TRAIL_LENGTH = 8; const MAX_TRAIL_LENGTH = 20; const CHAR_CHANGE_FREQUENCY = 1; const NUM_COLUMNS = Math.floor(svgWidth / SPACING_X) - 1; const TOTAL_TRAIL_HEIGHT = MAX_TRAIL_LENGTH * SPACING_Y; const RESET_HEIGHT_THRESHOLD = svgHeight + TOTAL_TRAIL_HEIGHT; let columnData = []; let frameCounter = 0; // --- Helper: Get Random Character --- function getRandomChar() { // Using bitwise OR (0) is a minor optimization for Math.floor() return CHARS[Math.random() * CHARS.length | 0]; } // --- Setup Function: Initializes all columns and characters --- function setupRain() { for (let c = 0; c < NUM_COLUMNS; c++) { const xPos = c * SPACING_X; // Minor optimization: Declare variables once const speed = Math.random() * (MAX_SPEED - MIN_SPEED) + MIN_SPEED; const trailLength = Math.random() * (MAX_TRAIL_LENGTH - MIN_TRAIL_LENGTH) + MIN_TRAIL_LENGTH | 0; // Initial offset for "already loaded" appearance let startOffset = -Math.random() * (svgHeight + TOTAL_TRAIL_HEIGHT) | 0; const columnGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); columnGroup.setAttribute('class', 'rain-column'); // Set initial transform here to avoid an extra style update loop columnGroup.style.transform = `translate(${xPos}px, ${startOffset}px)`; svg.appendChild(columnGroup); const children = []; for (let r = 0; r < MAX_TRAIL_LENGTH; r++) { const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text'); textElement.setAttribute('class', 'rain-char'); textElement.setAttribute('y', r * SPACING_Y); textElement.textContent = getRandomChar(); columnGroup.appendChild(textElement); children.push(textElement); } columnData.push({ element: columnGroup, children: children, yOffset: startOffset, speed: speed, x: xPos, trailLength: trailLength }); } } // --- Main Animation Loop (Optimized) --- function animateRain() { frameCounter++; for (let i = 0; i < columnData.length; i++) { const column = columnData[i]; // 1. Apply Movement column.yOffset += column.speed; // 2. Loop/Reset Logic: Reset when the column passes the bottom edge if (column.yOffset > RESET_HEIGHT_THRESHOLD) { column.yOffset = -TOTAL_TRAIL_HEIGHT; // Regenerate random speed and trail length on reset column.speed = Math.random() * (MAX_SPEED - MIN_SPEED) + MIN_SPEED; column.trailLength = Math.random() * (MAX_TRAIL_LENGTH - MIN_TRAIL_LENGTH) + MIN_TRAIL_LENGTH | 0; } // 3. APPLY VISUAL MOVEMENT (Single DOM write per column, GPU accelerated) // Using template literals here is clean and fast. column.element.style.transform = `translate(${column.x}px, ${column.yOffset}px)`; // 4. Update Characters and Fading for (let r = 0; r < column.children.length; r++) { const char = column.children[r]; const distanceToHead = r; // --- Head Character Logic --- if (r === 0) { // Use bitwise check for frame-skipping (minor optimization) if (frameCounter & CHAR_CHANGE_FREQUENCY) { char.textContent = getRandomChar(); } char.classList.add('char-head'); } else { char.classList.remove('char-head'); } // --- Fading Logic (Trail) --- if (distanceToHead < column.trailLength) { // Calculate opacity based on distance from the head (r=0) const opacity = 1 - (distanceToHead / column.trailLength); char.style.opacity = opacity; // Randomly change characters in the trail less frequently if (frameCounter % 6 === 0) { char.textContent = getRandomChar(); } } else { // Character is outside the trail, hide it char.style.opacity = 0; } } } requestAnimationFrame(animateRain); } // Start the animation process setupRain(); requestAnimationFrame(animateRain); Подробнее здесь: https://stackoverflow.com/questions/798 ... ay-outline
