• 27-03-2024, 01:40:52
    #1
    Merhaba arkadaşlar. Öncelikle doğru yere mi açtım bilmiyorum ama yanlış ise editörler tarafındna doğru yere aktarılırsa çok memnun olurum.

    Alttaki kodda kayan resimlerin üzerine geldiğinde kayma duruyor ve tippy/popper çalışıyor aktif oluyor fakat ne zaman bu tippy/popper tasarımının üzerinde hower durumundan çıkmış olsam kayma devam ediyor. bir maskeleme imkanı vs varmıdır? yani ben X reminin üzerine geldiğimde açılan popper içindeki butona mouse ile giderken/gittiğimde resimlerin kayması durmuş olacak ne zaman resim yada popper tasarımı üzerinden imleç ile ayrıldım o zaman kayma devam etsin. Eğer bu bununla olmuyor ise olabilen bir örnek yada farklı js/ms ne varsa artık önerisini esirgemezse çok memnun olurum


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Kaydırma ve Hover Örneği</title>
      <style>
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          margin: 0;
          background-color: #000000;
        }
    
        .container {
          display: flex;
          overflow-x: hidden;
          position: relative;
          width: 80%;
        }
    
        .image-container {
          display: flex;
          animation: scroll 10s linear infinite;
        }
    
        .item {
          flex: 0 0 auto;
          margin-right: 10px;
          position: relative;
        }
    
        .item img {
          width: 200px;
          height: 200px;
        }
    
        .tooltip {
          background-color: #333;
          color: #fff;
          padding: 10px;
          border-radius: 5px;
          position: absolute;
          z-index: 1;
          display: none;
        }
    
        .tooltip button {
          background-color: #fff;
          color: #333;
          border: none;
          padding: 5px 10px;
          border-radius: 3px;
          cursor: pointer;
        }
    
        @keyframes scroll {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-100%);
          }
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="image-container">
          <div class="item"><img src="https://picsum.photos/id/1/200/200" alt="Image 1"></div>
          <div class="item"><img src="https://picsum.photos/id/2/200/200" alt="Image 2"></div>
          <div class="item"><img src="https://picsum.photos/id/3/200/200" alt="Image 3"></div>
          <div class="item"><img src="https://picsum.photos/id/4/200/200" alt="Image 4"></div>
          <div class="item"><img src="https://picsum.photos/id/5/200/200" alt="Image 5"></div>
          <div class="item"><img src="https://picsum.photos/id/6/200/200" alt="Image 1"></div>
          <div class="item"><img src="https://picsum.photos/id/7/200/200" alt="Image 2"></div>
          <div class="item"><img src="https://picsum.photos/id/8/200/200" alt="Image 3"></div>
          <div class="item"><img src="https://picsum.photos/id/9/200/200" alt="Image 4"></div>
          <div class="item"><img src="https://picsum.photos/id/10/200/200" alt="Image 5"></div>
        </div>
      </div>
    
      <script src="https://unpkg.com/@popperjs/core@2"></script>
      <script>
        const container = document.querySelector('.container');
        const imageContainer = document.querySelector('.image-container');
        let isScrolling = true;
        let tooltip = null;
        let popper = null;
    
        container.addEventListener('mouseenter', () => {
          isScrolling = false;
          imageContainer.style.animationPlayState = 'paused';
        });
    
        container.addEventListener('mouseleave', () => {
          isScrolling = true;
          imageContainer.style.animationPlayState = 'running';
          if (tooltip) {
            tooltip.style.display = 'none';
            popper.destroy();
            tooltip = null;
            popper = null;
          }
        });
    
        const items = document.querySelectorAll('.item');
    
        items.forEach(item => {
          item.addEventListener('mouseenter', () => {
            if (tooltip) {
              tooltip.style.display = 'none';
              popper.destroy();
            }
            tooltip = document.createElement('div');
            tooltip.className = 'tooltip';
            tooltip.innerHTML = `
              <p>Bu bir denemedir</p>
              <button>Devam Et</button>
            `;
            document.body.appendChild(tooltip);
            popper = Popper.createPopper(item, tooltip, {
              placement: 'top',
              modifiers: [
                {
                  name: 'offset',
                  options: {
                    offset: [0, 10],
                  },
                },
              ],
            });
            tooltip.style.display = 'block';
            isScrolling = false;
            imageContainer.style.animationPlayState = 'paused';
          });
    
          item.addEventListener('mouseleave', () => {
            if (tooltip) {
              tooltip.style.display = 'none';
              popper.destroy();
              tooltip = null;
              popper = null;
            }
          });
        });
      </script>
    </body>
    </html>
  • 31-03-2024, 04:10:42
    #2
    Hocam bunu bir deneyin:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Kaydırma ve Hover Örneği</title>
      <style>
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          margin: 0;
          background-color: #000000;
        }
    
        .container {
          display: flex;
          overflow-x: hidden;
          position: relative;
          width: 80%;
        }
    
        .image-container {
          display: flex;
          animation: scroll 10s linear infinite;
        }
    
        .item {
          flex: 0 0 auto;
          margin-right: 10px;
          position: relative;
        }
    
        .item img {
          width: 200px;
          height: 200px;
        }
    
        .tooltip {
          background-color: #333;
          color: #fff;
          padding: 10px;
          border-radius: 5px;
          position: absolute;
          z-index: 1;
          display: none;
        }
    
        .tooltip button {
          background-color: #fff;
          color: #333;
          border: none;
          padding: 5px 10px;
          border-radius: 3px;
          cursor: pointer;
        }
    
        @keyframes scroll {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-100%);
          }
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="image-container">
          <div class="item"><img src="https://picsum.photos/id/1/200/200" alt="Image 1"></div>
          <div class="item"><img src="https://picsum.photos/id/2/200/200" alt="Image 2"></div>
          <div class="item"><img src="https://picsum.photos/id/3/200/200" alt="Image 3"></div>
          <div class="item"><img src="https://picsum.photos/id/4/200/200" alt="Image 4"></div>
          <div class="item"><img src="https://picsum.photos/id/5/200/200" alt="Image 5"></div>
          <div class="item"><img src="https://picsum.photos/id/6/200/200" alt="Image 1"></div>
          <div class="item"><img src="https://picsum.photos/id/7/200/200" alt="Image 2"></div>
          <div class="item"><img src="https://picsum.photos/id/8/200/200" alt="Image 3"></div>
          <div class="item"><img src="https://picsum.photos/id/9/200/200" alt="Image 4"></div>
          <div class="item"><img src="https://picsum.photos/id/10/200/200" alt="Image 5"></div>
        </div>
      </div>
    
      <script src="https://unpkg.com/@popperjs/core@2"></script>
      <script>
        const container = document.querySelector('.container');
        const imageContainer = document.querySelector('.image-container');
        let isScrolling = true;
        let tooltip = null;
        let popper = null;
        let hovering = false;
    
        container.addEventListener('mouseenter', () => {
          isScrolling = false;
          imageContainer.style.animationPlayState = 'paused';
        });
    
        container.addEventListener('mouseleave', () => {
          isScrolling = true;
          imageContainer.style.animationPlayState = 'running';
          if (!hovering && tooltip) {
            tooltip.style.display = 'none';
            popper.destroy();
            tooltip = null;
            popper = null;
          }
        });
    
        const items = document.querySelectorAll('.item');
    
        items.forEach(item => {
          item.addEventListener('mouseenter', () => {
            hovering = true;
            if (tooltip) {
              tooltip.style.display = 'none';
              popper.destroy();
            }
            tooltip = document.createElement('div');
            tooltip.className = 'tooltip';
            tooltip.innerHTML = `
              <p>Bu bir denemedir</p>
              <button>Devam Et</button>
            `;
            document.body.appendChild(tooltip);
            popper = Popper.createPopper(item, tooltip, {
              placement: 'top',
              modifiers: [
                {
                  name: 'offset',
                  options: {
                    offset: [0, 10],
                  },
                },
              ],
            });
            tooltip.style.display = 'block';
            isScrolling = false;
            imageContainer.style.animationPlayState = 'paused';
          });
    
          item.addEventListener('mouseleave', () => {
            hovering = false;
            if (!tooltip) return;
            tooltip.style.display = 'none';
            popper.destroy();
            tooltip = null;
            popper = null;
            if (!hovering) {
              isScrolling = true;
              imageContainer.style.animationPlayState = 'running';
            }
          });
        });
      </script>
    </body>
    </html>