فراغیب

الگو:دایره دنبال کننده: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<!-- =========================
    Product Categories
    SEO + Responsive + Mobile First
========================= -->
<section class="product-categories" dir="rtl" aria-labelledby="categories-title">
  <div class="categories-container">
    <header class="categories-header">
      <h2 id="categories-title">دسته‌بندی محصولات</h2>
      <p>محصولات باکیفیت برای خانه‌ای مدرن و کاربردی</p>
    </header>
    <div class="categories-grid">
      <!-- 1 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات اکسسوری">
        <div class="category-image">
          <img src="images/accessory.jpg"
              alt="اکسسوری کابینت و آشپزخانه"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>اکسسوری</h3>
      </a>
      <!-- 2 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات دستگیره">
        <div class="category-image">
          <img src="images/handle.jpg"
              alt="دستگیره کابینت"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>دستگیره</h3>
      </a>
      <!-- 3 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات سینک">
        <div class="category-image">
          <img src="images/sink.jpg"
              alt="سینک آشپزخانه"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>سینک</h3>
      </a>
      <!-- 4 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات سایلر یراق آلات">
        <div class="category-image">
          <img src="images/hardware.jpg"
              alt="سایلر و یراق آلات کابینت"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>سایر یراق آلات</h3>
      </a>
      <!-- 5 -->
      <a href="#" class="category-card" aria-label="مشاهده فر و ماکروفر">
        <div class="category-image">
          <img src="images/oven.jpg"
              alt="فر و ماکروفر آشپزخانه"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>فر و ماکروفر</h3>
      </a>
      <!-- 6 -->
      <a href="#" class="category-card" aria-label="مشاهده گاز رومیزی">
        <div class="category-image">
          <img src="images/gas.jpg"
              alt="گاز رومیزی آشپزخانه"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>گاز رومیزی</h3>
      </a>
      <!-- 7 -->
      <a href="#" class="category-card" aria-label="مشاهده هود آشپزخانه">
        <div class="category-image">
          <img src="images/hood.jpg"
              alt="هود آشپزخانه"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>هود</h3>
      </a>
      <!-- 8 -->
      <a href="#" class="category-card" aria-label="مشاهده یراق آلات">
        <div class="category-image">
          <img src="images/drawer.jpg"
              alt="یراق آلات و تجهیزات کابینت"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>یراق آلات</h3>
      </a>
      <!-- 9 -->
      <a href="#" class="category-card" aria-label="مشاهده شیرآلات">
        <div class="category-image">
          <img src="images/faucet.jpg"
              alt="شیرآلات آشپزخانه"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>شیر آلات</h3>
      </a>
      <!-- 10 -->
      <a href="#" class="category-card" aria-label="مشاهده دستگیره دیجیتال">
        <div class="category-image">
          <img src="images/digital-lock.jpg"
              alt="دستگیره دیجیتال کابینت و درب"
              loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>دستگیره دیجیتال</h3>
      </a>
    </div>
  </div>
</section>


<style>
<style>
/* =========================
 
   Product Grid | Mobile First
/* =========================================
========================= */
   Product Categories
.product-grid{
  Mobile First
   direction:rtl;
========================================= */
   display:grid;
 
   grid-template-columns:repeat(2,1fr);
.product-categories{
   gap:24px 10px;
   width:100%;
   padding:45px 15px;
   background:#fff;
   overflow:hidden;
}
 
.categories-container{
   width:100%;
   width:100%;
   max-width:1200px;
   max-width:1250px;
   margin:auto;
   margin:0 auto;
  padding:15px 6px;
  list-style:none;
  box-sizing:border-box;
}
}


.product-item{
/* Header */
  min-width:0;
 
.categories-header{
   text-align:center;
   text-align:center;
  margin-bottom:40px;
}
}


.product-link{
.categories-header h2{
   position:relative;
   margin:0 0 10px;
   display:block;
   color:#151515;
   color:#222;
  font-size:28px;
   text-decoration:none;
  font-weight:800;
   padding:4px;
  line-height:1.5;
}
 
.categories-header p{
  margin:0;
   color:#777;
   font-size:15px;
  line-height:1.8;
}
 
 
/* =========================================
  Grid
========================================= */
 
.categories-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
   gap:35px 18px;
}
}


/* کادر مربعی دور عکس */
 
.product-box{
/* =========================================
  Category Card
========================================= */
 
.category-card{
   position:relative;
   position:relative;
  width:145px;
  height:145px;
  max-width:100%;
  margin:auto;
  border-radius:26px;
   display:flex;
   display:flex;
  flex-direction:column;
   align-items:center;
   align-items:center;
   justify-content:center;
   text-decoration:none;
   box-sizing:border-box;
   color:#151515;
   border:1px solid transparent;
  min-width:0;
   -webkit-tap-highlight-color:transparent;
}
}


/* دایره عکس */
.category-image{
.product-circle{
   position:relative;
   width:120px;
   width:min(42vw,170px);
   height:120px;
   aspect-ratio:1/1;
   border:2px solid #e3e8ee;
   border-radius:50%;
   border-radius:50%;
  background:#fff;
 
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   box-sizing:border-box;
 
  background:#fff;
 
  border:2px solid #e8edf3;
 
   box-shadow:
    0 8px 25px rgba(0,0,0,.04);
 
  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
 
  overflow:visible;
}
}


.product-circle img{
 
   width:88%;
/* Product Image */
   height:88%;
 
.category-image img{
   width:78%;
   height:78%;
 
   object-fit:contain;
   object-fit:contain;
  border-radius:50%;
 
   display:block;
   display:block;
  transition:
    transform .35s ease,
    filter .35s ease;
}
}


/* عنوان */
 
.product-title{
/* =========================================
   display:block;
  Follow Circle
   margin-top:8px;
========================================= */
   font-size:14px;
 
.follow-circle{
  position:absolute;
 
  width:60px;
  height:60px;
 
  border-radius:50%;
 
   display:flex;
  align-items:center;
   justify-content:center;
 
  background:#fff;
 
  border:2px solid #1477ff;
 
  color:#1477ff;
 
   font-size:11px;
   font-weight:700;
   font-weight:700;
   line-height:1.8;
 
  box-shadow:
    0 5px 20px rgba(20,119,255,.15);
 
  opacity:0;
 
  transform:scale(.7);
 
  pointer-events:none;
 
  z-index:5;
 
  transition:
    opacity .2s ease,
    transform .2s ease;
}
 
 
/* =========================================
  Title
========================================= */
 
.category-card h3{
  margin:14px 0 0;
 
  font-size:15px;
  font-weight:800;
 
   line-height:1.7;
 
  text-align:center;
 
  color:#222;
 
  transition:
    color .3s ease,
    transform .3s ease;
}
}




/* ==================================
/* =========================================
   فقط دستگاه‌هایی که موس دارند
   Hover
================================== */
========================================= */
@media (hover:hover) and (pointer:fine){
 
.category-card:hover .category-image{
 
  border-color:#1477ff;
 
  box-shadow:
    0 12px 35px rgba(20,119,255,.13);


   /* هاور کادر مربعی */
   transform:translateY(-3px);
  .product-link:hover .product-box,
}
  .product-link:focus-visible .product-box{
    border-color:rgba(20,121,255,.22);


    background:
.category-card:hover .category-image img{
      linear-gradient(
  transform:scale(1.04);
        135deg,
}
        rgba(221,236,255,.75),
        rgba(239,246,255,.35)
      );


    box-shadow:
.category-card:hover .follow-circle{
      0 8px 28px rgba(20,121,255,.15),
  opacity:1;
      0 0 35px rgba(20,121,255,.13);
  transform:scale(1);
  }
}


  /* هاور خود دایره */
.category-card:hover h3{
  .product-link:hover .product-circle,
   color:#1477ff;
   .product-link:focus-visible .product-circle{
}
    border-color:#1479ff;


    box-shadow:
      0 0 0 1px rgba(20,121,255,.08),
      0 0 20px rgba(20,121,255,.18);
  }


  /* دایره مشاهده */
/* =========================================
  .mouse-view{
  Active / Focus
    position:absolute;
========================================= */
    width:54px;
    height:54px;
    border:2px solid #1479ff;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#1479ff;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%);
    z-index:5;
  }


  .product-link:hover .mouse-view{
.category-card:focus-visible{
    opacity:1;
  outline:3px solid rgba(20,119,255,.25);
   }
  outline-offset:8px;
   border-radius:15px;
}
}




/* =========================
/* =========================================
   Tablet
   Tablet
========================= */
========================================= */
 
@media (min-width:600px){
@media (min-width:600px){
   .product-grid{
 
   .product-categories{
    padding:60px 25px;
  }
 
  .categories-header h2{
    font-size:34px;
  }
 
  .categories-header p{
    font-size:16px;
  }
 
  .categories-grid{
     grid-template-columns:repeat(3,1fr);
     grid-template-columns:repeat(3,1fr);
     gap:35px 20px;
     gap:50px 25px;
  }
 
  .category-image{
    width:150px;
  }
 
  .category-card h3{
    font-size:16px;
   }
   }
}
}




/* =========================
/* =========================================
   Desktop
   Desktop
========================= */
========================================= */
 
@media (min-width:900px){
@media (min-width:900px){
   .product-grid{
 
    grid-template-columns:repeat(4,1fr);
   .product-categories{
    gap:45px 25px;
     padding:10px 30px;
     padding:25px 15px;
   }
   }


   .product-box{
   .categories-header{
     width:155px;
     margin-bottom:55px;
    height:155px;
   }
   }


   .product-circle{
   .categories-header h2{
     width:140px;
     font-size:40px;
    height:140px;
   }
   }


   .product-title{
   .categories-header p{
     font-size:16px;
     font-size:17px;
   }
   }
}


 
   .categories-grid{
/* =========================
  صفحه عریض
========================= */
@media (min-width:1100px){
   .product-grid{
     grid-template-columns:repeat(5,1fr);
     grid-template-columns:repeat(5,1fr);
    gap:65px 35px;
   }
   }
}


  .category-image{
    width:145px;
  }


/* =========================
   .category-card h3{
  موبایل کوچک
     font-size:17px;
  بدون موشن
========================= */
@media (max-width:380px){
   .product-grid{
     gap:20px 5px;
    padding:12px 3px;
   }
   }


   .product-box{
   .follow-circle{
     width:135px;
     width:62px;
     height:135px;
     height:62px;
   }
   }
}


   .product-circle{
 
     width:115px;
/* =========================================
    height:115px;
  Large Desktop
========================================= */
 
@media (min-width:1200px){
 
   .categories-grid{
     gap:70px 45px;
   }
   }


   .product-title{
   .category-image{
     font-size:13px;
     width:145px;
   }
   }
}
}




/* =========================
/* =========================================
   موبایل
  Mobile:
   فقط هایلایت، بدون موشن
   No Follow Circle
========================= */
   Only Highlight
@media (hover:none){
========================================= */
 
@media (max-width:599px){


   .mouse-view{
   .follow-circle{
     display:none !important;
     display:none !important;
   }
   }


   .product-box,
   /*
  .product-circle{
    روی موبایل با لمس کارت،
     transition:none !important;
    فقط هایلایت نمایش داده می‌شود.
  */
 
  .category-card:active .category-image{
    border-color:#1477ff;
 
    box-shadow:
      0 0 0 5px rgba(20,119,255,.08),
      0 12px 30px rgba(20,119,255,.15);
 
     transform:translateY(-3px);
   }
   }


  /* لمس/فعال شدن فقط هایلایت */
   .category-card:active h3{
   .product-link:active .product-box{
     color:#1477ff;
     background:rgba(221,236,255,.7);
    border-color:rgba(20,121,255,.25);
    box-shadow:
      0 8px 25px rgba(20,121,255,.15),
      0 0 30px rgba(20,121,255,.12);
   }
   }


   .product-link:active .product-circle{
}
     border-color:#1479ff;
 
 
/* =========================================
  Reduced Motion
========================================= */
 
@media (prefers-reduced-motion:reduce){
 
   .category-image,
  .category-image img,
  .follow-circle,
  .category-card h3{
     transition:none !important;
   }
   }
}
}
</style>
</style>




<ul class="product-grid" aria-label="دسته‌بندی محصولات">
<script>
/* =========================================
  Follow Mouse Circle
  Desktop Only
========================================= */


  <!-- 1 -->
(function(){
  <li class="product-item">
    <a class="product-link" href="#" title="فر و ماکروفر">
      <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-1.jpg" alt="فر و ماکروفر" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="product-title">فر و ماکروفر</span>
    </a>
  </li>


   <!-- 2 -->
   const cards = document.querySelectorAll('.category-card');
  <li class="product-item">
    <a class="product-link" href="#" title="سایر یراق آلات">
      <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-2.jpg" alt="سایر یراق آلات" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="product-title">سایر یراق آلات</span>
    </a>
  </li>


   <!-- 3 -->
   cards.forEach(card => {
  <li class="product-item">
    <a class="product-link" href="#" title="سینک">
      <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-3.jpg" alt="سینک" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="product-title">سینک</span>
    </a>
  </li>


  <!-- 4 -->
    const imageBox = card.querySelector('.category-image');
  <li class="product-item">
     const circle = card.querySelector('.follow-circle');
     <a class="product-link" href="#" title="دستگیره">
      <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-4.jpg" alt="دستگیره" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="product-title">دستگیره</span>
    </a>
  </li>


  <!-- 5 -->
    if(!imageBox || !circle) return;
  <li class="product-item">
    <a class="product-link" href="#" title="اکسسوری">
      <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-5.jpg" alt="اکسسوری" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="product-title">اکسسوری</span>
    </a>
  </li>


  <!-- 6 -->
     card.addEventListener('mousemove', function(e){
  <li class="product-item">
     <a class="product-link" href="#" title="دستگیره دیجیتال">
      <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-6.jpg" alt="دستگیره دیجیتال" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="product-title">دستگیره دیجیتال</span>
    </a>
  </li>


  <!-- 7 -->
       /* فقط دسکتاپ */
  <li class="product-item">
       if(window.innerWidth < 600) return;
    <a class="product-link" href="#" title="شیر آلات">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-7.jpg" alt="شیر آلات" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
       <span class="product-title">شیر آلات</span>
    </a>
  </li>


  <!-- 8 -->
       const rect = imageBox.getBoundingClientRect();
  <li class="product-item">
    <a class="product-link" href="#" title="یراق آلات">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-8.jpg" alt="یراق آلات" loading="lazy">
        </span>
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="product-title">یراق آلات</span>
    </a>
  </li>


</ul>
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;


      /*
        نصف اندازه دایره
        برای قرار گرفتن مرکز دایره روی موس
      */


<script>
      const circleSize = circle.offsetWidth;
/* فقط دسکتاپ: دایره مشاهده موس را دنبال می‌کند */
      const half = circleSize / 2;
if (window.matchMedia('(hover:hover) and (pointer:fine)').matches) {
 
      circle.style.left = (x - half) + 'px';
      circle.style.top  = (y - half) + 'px';
 
    });


  document.querySelectorAll('.product-link').forEach(link => {
    card.addEventListener('mouseenter', function(){


    const view = link.querySelector('.mouse-view');
      if(window.innerWidth >= 600){
        circle.style.opacity = '1';
        circle.style.transform = 'scale(1)';
      }


     link.addEventListener('mousemove', e => {
     });


      const box = link.querySelector('.product-box');
    card.addEventListener('mouseleave', function(){
      const r = box.getBoundingClientRect();


       let x = e.clientX - r.left;
       if(window.innerWidth >= 600){
      let y = e.clientY - r.top;


      x = Math.max(27, Math.min(x, r.width - 27));
        circle.style.opacity = '0';
      y = Math.max(27, Math.min(y, r.height - 27));
        circle.style.transform = 'scale(.7)';


       view.style.left = x + 'px';
       }
      view.style.top = y + 'px';


     });
     });
خط ۳۷۴: خط ۵۵۱:
   });
   });


}
})();
</script>
</script>


</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:دایره_دنبال_کننده»