אתר ההדרכה לתלמידות

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

שינויי עכבר

שינויי עכבר

הקודים נמצאים מתחת לסרטון

החלפת הסמן לתמונה מותאמת אישית:

להחלפת תמונת הסמן בכל האתר, הדביקי את הקוד הבא בעיצוב>התאמה אישית>CSS:

				
					* { cursor: url('הכתובת של התמונה'), auto!important ; }
				
			

להחלפת תמונת הסמן רק על אלמנט מסויים, בחרי את האלמנט, עברי למתקדם, CSS מותאם והדביקי את הקוד הבא:

				
					selector { cursor: url('הכתובת של התמונה'), auto!important ; }

				
			

קוד לסמן בצורת עיגול:

				
					<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",function() {
        e.classList.add("hover"); ii.classList.add("hover");
    });
    
    jQuery(document).on("mouseout","a",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>

				
			

מדריכים נוספים

מה עושים אם הפונטים שהטמעתי אינם מוצגים באתר?

שיריון כרטיסים באמצעות תוסף (יותר אמיתי, קצת פחות נאה)

הצגת לוח שנה עם אירועים (שהגולש יכול לבחור ולהזמין כרטיס)

שיריון כרטיסים "בכאילו" באמצעות טופס של אלמנטור (הכי קל!)