پرش به محتوا

دایره دنبال کننده - فراغیب

از فراغیب
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <style> ←===== گرید دسته‌بندی =====: .cat-grid{ direction:rtl; display:grid; grid-template-columns:repeat(2,1fr); gap:28px 18px; max-width:1200px; margin:auto; padding:20px 10px; list-style:none; } .cat-item{ position:relative; text-align:center; min-width:0; } .cat-link{ position:relative; display:block; color:#222; text-decoration:none; font-weight:700; font-size:14px; ou...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۵ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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>
/* ===== گرید دسته‌بندی ===== */
 
.cat-grid{
/* =========================================
   direction:rtl;
  Product Categories
  Mobile First
========================================= */
 
.product-categories{
  width:100%;
  padding:45px 15px;
  background:#fff;
  overflow:hidden;
}
 
.categories-container{
  width:100%;
  max-width:1250px;
  margin:0 auto;
}
 
/* Header */
 
.categories-header{
  text-align:center;
  margin-bottom:40px;
}
 
.categories-header h2{
  margin:0 0 10px;
  color:#151515;
  font-size:28px;
  font-weight:800;
  line-height:1.5;
}
 
.categories-header p{
   margin:0;
  color:#777;
  font-size:15px;
  line-height:1.8;
}
 
 
/* =========================================
  Grid
========================================= */
 
.categories-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(2,1fr);
   grid-template-columns:repeat(2,1fr);
   gap:28px 18px;
   gap:35px 18px;
  max-width:1200px;
  margin:auto;
  padding:20px 10px;
  list-style:none;
}
}


.cat-item{
  position:relative;
  text-align:center;
  min-width:0;
}


.cat-link{
/* =========================================
  Category Card
========================================= */
 
.category-card{
   position:relative;
   position:relative;
   display:block;
   display:flex;
   color:#222;
   flex-direction:column;
  align-items:center;
   text-decoration:none;
   text-decoration:none;
   font-weight:700;
   color:#151515;
   font-size:14px;
   min-width:0;
   outline:none;
   -webkit-tap-highlight-color:transparent;
}
}


/* کادر مربع اطراف دایره */
.category-image{
.cat-circle{
   position:relative;
   position:relative;
   width:140px;
   width:min(42vw,170px);
   height:140px;
   aspect-ratio:1/1;
  max-width:100%;
  margin:auto;
   border-radius:50%;
   border-radius:50%;
  border:2px solid #e4e9ef;
 
  background:#fff;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
  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;
   overflow:visible;
  transition:box-shadow .2s ease;
}
}


/* فقط هاله آبی هنگام هاور */
.cat-link:hover .cat-circle,
.cat-link:focus-visible .cat-circle{
  box-shadow:0 0 0 2px rgba(0,119,255,.18),
            0 0 25px rgba(0,119,255,.28);
}


.cat-circle img{
/* Product Image */
   width:88%;
 
   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;
}
}


/* متن زیر دایره */
.cat-title{
  display:block;
  margin-top:13px;
  line-height:1.7;
}


/* دایره کوچک دنبال‌کننده موس */
/* =========================================
.mouse-view{
  Follow Circle
========================================= */
 
.follow-circle{
   position:absolute;
   position:absolute;
   width:58px;
 
   height:58px;
   width:60px;
  border:2px solid #1479ff;
   height:60px;
 
   border-radius:50%;
   border-radius:50%;
  background:rgba(255,255,255,.88);
 
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   color:#1479ff;
 
   font-size:12px;
  background:#fff;
 
  border:2px solid #1477ff;
 
   color:#1477ff;
 
   font-size:11px;
   font-weight:700;
   font-weight:700;
  box-shadow:
    0 5px 20px rgba(20,119,255,.15);
  opacity:0;
  transform:scale(.7);
   pointer-events:none;
   pointer-events:none;
  opacity:0;
 
  transform:translate(-50%,-50%);
  transition:opacity .15s ease;
   z-index:5;
   z-index:5;
  transition:
    opacity .2s ease,
    transform .2s ease;
}
}


.cat-link:hover .mouse-view{
 
/* =========================================
  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
========================================= */
 
.category-card:hover .category-image{
 
  border-color:#1477ff;
 
  box-shadow:
    0 12px 35px rgba(20,119,255,.13);
 
  transform:translateY(-3px);
}
 
.category-card:hover .category-image img{
  transform:scale(1.04);
}
 
.category-card:hover .follow-circle{
   opacity:1;
   opacity:1;
  transform:scale(1);
}
.category-card:hover h3{
  color:#1477ff;
}
}


/* دسکتاپ */
 
@media (min-width:768px){
/* =========================================
   .cat-grid{
  Active / Focus
    grid-template-columns:repeat(4,1fr);
========================================= */
    gap:55px 35px;
 
     padding:30px 15px;
.category-card:focus-visible{
  outline:3px solid rgba(20,119,255,.25);
  outline-offset:8px;
  border-radius:15px;
}
 
 
/* =========================================
  Tablet
========================================= */
 
@media (min-width:600px){
 
   .product-categories{
     padding:60px 25px;
   }
   }


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


   .cat-title{
   .categories-header p{
     font-size:16px;
     font-size:16px;
  }
  .categories-grid{
    grid-template-columns:repeat(3,1fr);
    gap:50px 25px;
  }
  .category-image{
    width:150px;
  }
  .category-card h3{
    font-size:16px;
  }
}
/* =========================================
  Desktop
========================================= */
@media (min-width:900px){
  .product-categories{
    padding:10px 30px;
  }
  .categories-header{
    margin-bottom:55px;
  }
  .categories-header h2{
    font-size:40px;
  }
  .categories-header p{
    font-size:17px;
  }
  .categories-grid{
    grid-template-columns:repeat(5,1fr);
    gap:65px 35px;
  }
  .category-image{
    width:145px;
  }
  .category-card h3{
    font-size:17px;
  }
  .follow-circle{
    width:62px;
    height:62px;
  }
}
/* =========================================
  Large Desktop
========================================= */
@media (min-width:1200px){
  .categories-grid{
    gap:70px 45px;
  }
  .category-image{
    width:145px;
   }
   }
}
}


/* موبایل‌های خیلی کوچک */
 
@media (max-width:380px){
/* =========================================
   .cat-grid{
  Mobile:
     gap:25px 10px;
  No Follow Circle
    padding:15px 5px;
  Only Highlight
========================================= */
 
@media (max-width:599px){
 
   .follow-circle{
     display:none !important;
   }
   }


   .cat-circle{
  /*
     width:125px;
    روی موبایل با لمس کارت،
     height:125px;
    فقط هایلایت نمایش داده می‌شود.
  */
 
   .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);
   }
   }


   .cat-title{
   .category-card:active h3{
     font-size:13px;
     color:#1477ff;
   }
   }
}
}


/* کاهش انیمیشن برای کاربران حساس */
 
/* =========================================
  Reduced Motion
========================================= */
 
@media (prefers-reduced-motion:reduce){
@media (prefers-reduced-motion:reduce){
   .cat-circle,.mouse-view{transition:none}
 
   .category-image,
  .category-image img,
  .follow-circle,
  .category-card h3{
    transition:none !important;
  }
 
}
}
</style>
</style>


<ul class="cat-grid" aria-label="دسته‌بندی محصولات">


  <li class="cat-item">
<script>
    <a class="cat-link" href="#" title="فر و ماکروفر">
/* =========================================
      <span class="cat-circle">
  Follow Mouse Circle
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="فر و ماکروفر">
  Desktop Only
        <span class="mouse-view">مشاهده</span>
========================================= */
      </span>
      <span class="cat-title">فر و ماکروفر</span>
    </a>
  </li>


  <li class="cat-item">
(function(){
    <a class="cat-link" href="#" title="سایر یراق آلات">
      <span class="cat-circle">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="سایر یراق آلات">
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="cat-title">سایر یراق آلات</span>
    </a>
  </li>


   <li class="cat-item">
   const cards = document.querySelectorAll('.category-card');
    <a class="cat-link" href="#" title="سینک">
      <span class="cat-circle">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="سینک">
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="cat-title">سینک</span>
    </a>
  </li>


   <li class="cat-item">
   cards.forEach(card => {
    <a class="cat-link" href="#" title="دستگیره">
      <span class="cat-circle">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="دستگیره">
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="cat-title">دستگیره</span>
    </a>
  </li>


  <li class="cat-item">
    const imageBox = card.querySelector('.category-image');
     <a class="cat-link" href="#" title="اکسسوری">
     const circle = card.querySelector('.follow-circle');
      <span class="cat-circle">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="اکسسوری">
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="cat-title">اکسسوری</span>
    </a>
  </li>


  <li class="cat-item">
     if(!imageBox || !circle) return;
     <a class="cat-link" href="#" title="دستگیره دیجیتال">
      <span class="cat-circle">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="دستگیره دیجیتال">
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="cat-title">دستگیره دیجیتال</span>
    </a>
  </li>


  <li class="cat-item">
     card.addEventListener('mousemove', function(e){
     <a class="cat-link" href="#" title="شیر آلات">
      <span class="cat-circle">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="شیر آلات">
        <span class="mouse-view">مشاهده</span>
      </span>
      <span class="cat-title">شیر آلات</span>
    </a>
  </li>


  <li class="cat-item">
       /* فقط دسکتاپ */
    <a class="cat-link" href="#" title="یراق آلات">
       if(window.innerWidth < 600) return;
       <span class="cat-circle">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="یراق آلات">
        <span class="mouse-view">مشاهده</span>
      </span>
       <span class="cat-title">یراق آلات</span>
    </a>
  </li>


</ul>
      const rect = imageBox.getBoundingClientRect();


<script>
      const x = e.clientX - rect.left;
document.querySelectorAll('.cat-link').forEach(item => {
      const y = e.clientY - rect.top;
  const view = item.querySelector('.mouse-view');
 
      /*
        نصف اندازه دایره
        برای قرار گرفتن مرکز دایره روی موس
      */
 
      const circleSize = circle.offsetWidth;
      const half = circleSize / 2;
 
      circle.style.left = (x - half) + 'px';
      circle.style.top  = (y - half) + 'px';
 
    });
 
    card.addEventListener('mouseenter', function(){
 
      if(window.innerWidth >= 600){
        circle.style.opacity = '1';
        circle.style.transform = 'scale(1)';
      }
 
    });
 
    card.addEventListener('mouseleave', function(){
 
      if(window.innerWidth >= 600){
 
        circle.style.opacity = '0';
        circle.style.transform = 'scale(.7)';


  item.addEventListener('mousemove', function(e) {
      }
    const rect = item.getBoundingClientRect();


     view.style.left = (e.clientX - rect.left) + 'px';
     });
    view.style.top  = (e.clientY - rect.top) + 'px';
  });


  item.addEventListener('mouseenter', function() {
    view.style.opacity = '1';
   });
   });


  item.addEventListener('mouseleave', function() {
})();
    view.style.opacity = '0';
  });
});
</script>
</script>
</html>
</html>

نسخهٔ کنونی تا ‏۱۷ اوت ۲۰۲۶، ساعت ۱۱:۴۶

دسته‌بندی محصولات

محصولات باکیفیت برای خانه‌ای مدرن و کاربردی

اکسسوری کابینت و آشپزخانه

اکسسوری
دستگیره کابینت

دستگیره
سینک آشپزخانه

سینک
سایلر و یراق آلات کابینت

سایر یراق آلات
فر و ماکروفر آشپزخانه

فر و ماکروفر
گاز رومیزی آشپزخانه

گاز رومیزی
هود آشپزخانه

هود
یراق آلات و تجهیزات کابینت

یراق آلات
شیرآلات آشپزخانه

شیر آلات
دستگیره دیجیتال کابینت و درب

دستگیره دیجیتال

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:دایره_دنبال_کننده&oldid=6513»