User:TheMcr/common.js: Difference between revisions

Boobpedia - Encyclopedia of big boobs
Jump to navigationJump to search
No edit summary
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener("DOMContentLoaded", function () {
     // Handle images
     const table = document.querySelector('.wikitable');
    var images = document.querySelectorAll('img'); // Select all images on the page


  images.forEach(function (image) {
     // Apply fade-in effect
     // On mouse enter (hover)
     table.style.opacity = 0;
     image.addEventListener('mouseenter', function () {
    table.style.transition = "opacity 2s";
        image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; // Smooth transition for scaling and shadow
     setTimeout(function() {
        image.style.transform = 'scale(1.1) translateY(-10px)'; // Grow and move up by 10px
         table.style.opacity = 1;
        image.style.boxShadow = '0px 10px 20px rgba(0, 0, 0, 0.3)';
     }, 10);
  image.style.position = 'relative'; // Ensure z-index works
        image.style.zIndex = '10'; / Add a subtle shadow
    });
 
     // On mouse leave (hover out)
    image.addEventListener('mouseleave', function () {
         image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
        image.style.transform = 'scale(1) translateY(0)'; // Reset size and position
        image.style.boxShadow = 'none'; // Remove the shadow
  image.style.position = 'relative'; // Ensure z-index works
        image.style.zIndex = '0';  
     });
});


 
    // Hover effect for each row
 
    const rows = table.querySelectorAll('tr');
  var links = document.querySelectorAll('p a'); // Select all spans inside links
     rows.forEach(row => {
 
         row.addEventListener('mouseenter', function() {
     links.forEach(function (link) {
             row.style.transform = "scale(1.05)";
         // On mouse enter (hover)
            row.style.transition = "transform 0.3s ease, background-color 0.3s ease";
        link.addEventListener('mouseenter', function () {
             row.style.backgroundColor = "#f0f0f0";
             link.style.transition = 'transform 0.3s ease'; // Smooth transition for scaling
             link.style.transform = 'scale(1.2)'; // Increase link size by 20%
         });
         });


         // On mouse leave (hover out)
         row.addEventListener('mouseleave', function() {
        link.addEventListener('mouseleave', function () {
             row.style.transform = "scale(1)";
             link.style.transform = 'scale(1)'; // Reset to original size
            row.style.backgroundColor = ""; // reset background color
         });
         });
     });
     });
});
});

Latest revision as of 15:59, 5 April 2025

document.addEventListener("DOMContentLoaded", function () {
    const table = document.querySelector('.wikitable');

    // Apply fade-in effect
    table.style.opacity = 0;
    table.style.transition = "opacity 2s";
    setTimeout(function() {
        table.style.opacity = 1;
    }, 10);

    // Hover effect for each row
    const rows = table.querySelectorAll('tr');
    rows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            row.style.transform = "scale(1.05)";
            row.style.transition = "transform 0.3s ease, background-color 0.3s ease";
            row.style.backgroundColor = "#f0f0f0";
        });

        row.addEventListener('mouseleave', function() {
            row.style.transform = "scale(1)";
            row.style.backgroundColor = ""; // reset background color
        });
    });
});
Retrieved from "https://www.boobpedia.com/wiki/index.php?title=User:TheMcr/common.js&oldid=916829"