גנבו לי ת'עכבר! ככה תעשו את זה מושלם

rivkic · 5/1/22

תודה לאלה ששלחו לי באישי קישורים לאתרים שבהם משולב הסמן הזה
נראה,
אולי אח"כ אפרסם כאן את הקישורים כדי שתראו את זה בלייב

יאללה שלחו עוד
קלי קלות, גג 5 דקות עבודה

איך אני מעלה את הקובץ עם הקוד לכאן, כדי שיהיה זמין גם לחסומים?

זווית · 5/1/22

נכתב ע"י rivkic:
איך אני מעלה את הקובץ עם הקוד לכאן, כדי שיהיה זמין גם לחסומים?

לחיצה על שלשת הנקודות שליד התמונה
ויש שם אופציה להוספת קוד

https://prnt.sc/264uteg

rivkic · 5/1/22

נכתב ע"י זווית:
לחיצה על שלשת הנקודות שליד התמונה
ויש שם אופציה להוספת קוד

https://prnt.sc/264uteg

תודה!

הנה הקוד:

קוד:

<div class='cursor' id="cursor"></div>
    <div class='cursor2' id="cursor2"></div>
    <div class='cursor3' id="cursor3"></div>
    
<style>
    .cursor,
.cursor2,
.cursor3{
    position: fixed;
    border-radius: 50%;   
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    left: -100px;
    top: 50%;
    mix-blend-mode: difference;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}
.cursor{
    background-color: #fff;
    height: 0;
    width: 0;
    z-index: 99999;
}
.cursor2,.cursor3{
    height: 36px;
    width: 36px;
    z-index:99998;
    -webkit-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
    -webkit-transform:scale(2) translateX(-25%) translateY(-25%);
    transform:scale(2) translateX(-25%) translateY(-25%);
    border:none
}
.cursor2{
    border: 2px solid #fff;
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}
.cursor2.hover{
    background: rgba(255,255,255,1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 1200px){
    .cursor,.cursor2,.cursor3{
        display: none
    }
}

</style>
<script>
    

        
    //Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
        t.style.left = (n.clientX + 10) + "px",
        t.style.top = (n.clientY + 10) + "px",
        e.style.left = (n.clientX + 10) + "px",
        e.style.top = (n.clientY + 10) + "px",
        ii.style.left = (n.clientX + 10) + "px",
        ii.style.top = (n.clientY + 10) + "px";
    });
    
    jQuery(document).on("mouseover","a, .jet-switcher__control-instance, button",function() {
        e.classList.add("hover"); ii.classList.add("hover");
    });
    
    jQuery(document).on("mouseout","a, .jet-switcher__control-instance, button",function() {
        e.classList.remove("hover"), ii.classList.remove("hover")
    });
    
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        ii = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), ii.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), ii.classList.remove("hover")
    }

        
</script>

מרים הרשלר · 5/1/22

אוהאוו רבקי שאפו ענקק!
אני ממש אוהבת כאלו מאמרים!
מעשירים, מרחיבים את הידע,
המשיכי להתפיע אותנוhttps://chachmologo.co.il/

rivkic · 6/1/22

נכתב ע"י מרים הרשלר:
אוהאוו רבקי שאפו ענקק!
אני ממש אוהבת כאלו מאמרים!
מעשירים, מרחיבים את הידע,
המשיכי להתפיע אותנוhttps://chachmologo.co.il/

תודה מרים

היוצר · 10/1/22

תודה

לא בטוח שזה מוסיף לחווית משתמש
להיפך, לדעתי רק מציק !
התחושה שמישהו נוגע לי בסמן העכבר
שנתפס בעיני הצופה כחלק מהמחשב האישי שלו
-ולא חלק מהאתר ,
לא נעימה .

rivkic · 10/1/22

נכון, זה נושא שלגמרי נתון לדיון
יש כאלה שממש אוהבים את הטרנדיות, ויש שהיא מציקה להם.

aridesk · 11/1/22

אני טוען שזה מציק נורא לגולש
זה חופר ...!!!

ולקוח צריך להנות מהשהיה באתר

מה שכדאי מאוד לכולם לטפל בכמה קישורים מעלי זה במהירות הטעינה של האתר
מרכיב קריטי בכניסה אליו, מקסימום שלוש שניות צריך להיות זמן טעינה וזה גם לא נחשב מהיר..

Miki Kaplin · 16/1/22

נכתב ע"י קנאק:
תודה

לא בטוח שזה מוסיף לחווית משתמש
להיפך, לדעתי רק מציק !
התחושה שמישהו נוגע לי בסמן העכבר
שנתפס בעיני הצופה כחלק מהמחשב האישי שלו
-ולא חלק מהאתר ,
לא נעימה .

זה שאלה של מינון, כי זה צריך להיות עדין ממש וכמובן מהיר וחלק בביצוע
בלי המעקב במרחק שגורם לבילבול איזה מהם זה סמן האמיתי.

פחות זה יותר. ואם זה לא פוגע במהירות הטעינה, זה יכול להיות מענין לאתרים מסוימים, שבהם הויזואליות יותר חזקה.