3 אפקטים לשדרוג לולאה באלמנטור

אנימציות למתחילים
אפקטי CSS
תוכן דינמי באתר הוא אחד האזורים שיותר קשה לשדרג, אז קבלו 3 אפקטים אינטראקטיבים מגניבים שיוסיפו קסם ללולאות שלכם!
  1. אפקט הפוקוס במעבר עכבר (אין צורך ב-css קלאס ספציפי), להעתיק את הקוד ולשים על ווידגט הלולאה תחת מתקדם -> css מותאם
@media(min-width:1025px){
selector .swiper-slide{
    padding:2vw 0vw; /*ריווח מלמעלה ולמטה שלא ייחתך*/
    
}
  selector:hover .swiper-slide {
    opacity: 0.7;   /*שקיפות של 0.7*/
    filter: blur(3px); /*טשטוש*/
    transform: scale(1); /* שומר גודל רגיל */
    transition: all 0.4s ease;
  }

  /* אפקט על הסלייד המורחף */
  selector .swiper-slide:hover {
    opacity: 1 !important; /*שומר שקיפות מלאה*/
    filter: blur(0) !important; /*שומר ללא טשטוש*/
    transform: scale(1.1); /*הגדלה במעבר עכבר*/
    z-index: 2;
    transition: all 0.4s ease;
  }
  }

2. אפקט לולאה אנכית מסובבת (אין צורך ב-css קלאס ספציפי), להעתיק את הקוד ולשים על ווידגט הלולאה תחת מתקדם -> css מותאם

@media(min-width:1025px){
selector{
    transform: rotate(-90deg);
}

selector .swiper-slide{
    transform: rotate(90deg);
}
}

3. אפקט עכבר מותאם אישית – יש לתת css קלאס לווידגט לולאה של .follow ו-css קלאס לתמונה שמחליפה את העכבר של .follow-img , את הקוד יש לשים באלמנטור ניהול קודים תחת body end. מומלץ להסתיר רספונסיבית את תמונת העכבר (הקוד פעיל רק בדסקטופ).

<style>
@media(min-width:1025px){
.follow-img {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0s ease !important;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.follow,
  .follow * {
    cursor: none !important; /*ביטול העכבר הרגיל*/
  }
}   
</style>


<script>
document.addEventListener("DOMContentLoaded", function () {
  const followWrapper = document.querySelector(".follow"); // הקלאס של ווידגט הלולאה
  const follow = document.querySelector(".follow-img"); // התמונה שמחליפה את העכבר

  if (!followWrapper || !follow) return;

  function moveFollow(e) {
    if (window.innerWidth > 1025) {
      requestAnimationFrame(() => {
        follow.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
      });
    }
  }

  followWrapper.addEventListener("mouseenter", () => {
    follow.style.opacity = "1"; 
    follow.style.transform = `translate(-50%, -50%) scale(1)`;
    document.addEventListener("mousemove", moveFollow);
  });

  followWrapper.addEventListener("mouseleave", () => {
    follow.style.opacity = "0"; 
    follow.style.transform = `translate(-50%, -50%) scale(0)`;
    document.removeEventListener("mousemove", moveFollow);
  });
});
</script>
[safe_code_display]

אם אתם כבר במוד למידה, קבלו הדרכות שוות נוספות:

gsap (56)
GSAP / Java Script

אנימציית תמונה נחשפת בגלילה + גלילה צידית

gsap (52)
שיווק ועסקי

תרגולילה #8 – עבודה מול לקוחות פרימיום

gsap (46)
אפקטי CSS

תרגולילה #7 – אנימציות ב-CSS והשקת סדנאות הספיישל

gsap (27) (1)
פיתוח

תרגולילה #6 – 12 שיטות לפיתוח מושלם