תוכן דינמי באתר הוא אחד האזורים שיותר קשה לשדרג, אז קבלו 3 אפקטים אינטראקטיבים מגניבים שיוסיפו קסם ללולאות שלכם!
- אפקט הפוקוס במעבר עכבר (אין צורך ב-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>


