📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
firmascripti.demodesign.com.tr
/
assets
/
js
📝
custom-cursor.js
← Geri Dön
// Custom Cursor function customCursor(options) { let settings = $.extend({ targetClass: 'custom-cursor', // create element with this class wrapper: $('body'), // jQuery speed: .1, movingDelay: 300, // fire event onStop after delay hasHover: false, // has hover events hoverTarget: $('a[href], button, .pointer_large'), touchDevices: false, // show on touch devices onMove: function(data) {} }, options), data = {}, checkTouch = !settings.touchDevices && "undefined" !== typeof document.documentElement.ontouchstart, timer = null; // exit if(checkTouch || !settings.wrapper.length) return; // append the ball settings.wrapper.append(`<div class="${settings.targetClass}"></div>`); let $cursor = $('.' + settings.targetClass), position = { x: window.innerWidth / 2, y: window.innerHeight / 2 }, mouse = { x: position.x, y: position.y }, setX = gsap.quickSetter($cursor, "x", "px"), setY = gsap.quickSetter($cursor, "y", "px"); // up<a href="https://www.jqueryscript.net/time-clock/">date</a> data data.cursor = $cursor; // on mouse move window.addEventListener("mousemove", init); function init() { // remove default mousemove event window.removeEventListener("mousemove", init); // add new custom event window.addEventListener("mousemove", e => { mouse.x = e.x; mouse.y = e.y; // update data and trigger event data.isMoving = true; settings.onMove(data); timer = setTimeout(function() { // update data and trigger event data.isMoving = false; settings.onMove(data); }, settings.movingDelay); }); // fade out cursor document.addEventListener("mouseleave", e => { // update data and trigger event data.isInViewport = false; settings.onMove(data); }); // update cursor's position document.addEventListener("mouseenter", e => { mouse.x = position.x = e.x; mouse.y = position.y = e.y; // update data and trigger event data.isInViewport = true; settings.onMove(data); }); gsap.ticker.add((time, deltaTime) => { let fpms = 60 / 1000, delta = deltaTime * fpms, dt = 1 - Math.pow(1 - settings.speed, delta); position.x += (mouse.x - position.x) * dt; position.y += (mouse.y - position.y) * dt; setX(position.x); setY(position.y); }); data.isInViewport = true; } // on hover if(settings.hasHover && settings.hoverTarget.length) { setTimeout(function() { settings.hoverTarget.hover(function() { data.hoverTarget = $(this); data.isHover = true; settings.onMove(data); }, function() { data.hoverTarget = $(this); data.isHover = false; settings.onMove(data); }); }, 100); } } // big ball customCursor({ hasHover: true, onMove: function(data) { if(data.isInViewport) { // in viewport if(data.isMoving) { if(data.isHover) { gsap.to(data.cursor, { opacity: .5, scale: 1.5 }); } else { gsap.to(data.cursor, { opacity: .5, scale: .8 }); } } else { if(data.isHover) { gsap.to(data.cursor, { opacity: .5, scale: 1.5 }); } else { gsap.to(data.cursor, { opacity: .25, scale: 1 }); } } } else { // out viewport gsap.to(data.cursor, { opacity: 0, scale: 0 }); } }, }); // dot inside customCursor({ targetClass: 'custom-cursor-dot', speed: .5, onMove: function(data) { if(data.isInViewport) { gsap.to(data.cursor, { opacity: 1 }); } else { gsap.to(data.cursor, { opacity: 0 }); } }, }); // Buttons function magneticButton(options) { let settings = $.extend({ target: $('[data-magnetic]'), // jQuery element class: 'magnetizing', attraction: 0.45, // 1 is weak, 0 is strong distance: 100, // magnetic area around element onEnter: function(data) {}, onExit: function(data) {}, onUpdate: function(data) {}, }, options), isEnter = false, // distance from mouse to center of target distanceFromMouse = function($target, mouseX, mouseY) { let centerX = $target.offset().left + $target.outerWidth() / 2, centerY = $target.offset().top + $target.outerHeight() / 2, pointX = mouseX - centerX, pointY = mouseY - centerY, distance = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2)); return Math.floor(distance); }, // processing magnetize = function($this, e) { let mouseX = e.pageX, mouseY = e.pageY; $this.each(function() { let $this = $(this), centerX = $this.offset().left + $this.outerWidth() / 2, centerY = $this.offset().top + $this.outerHeight() / 2, deltaX = Math.floor(centerX - mouseX) * -1 * settings.attraction, deltaY = Math.floor(centerY - mouseY) * -1 * settings.attraction, mouseDistance = distanceFromMouse($this, mouseX, mouseY), data = { target: $this, y: deltaY, x: deltaX, distance: mouseDistance }; if(mouseDistance < settings.distance) { gsap.to($this, { y: deltaY, x: deltaX }); // enter if(!isEnter) { isEnter = true; $this.addClass(settings.class); settings.onEnter(data); } // update settings.onUpdate(data); } else { gsap.to($this, { y: 0, x: 0 }); // exit if(isEnter) { isEnter = false; $this.removeClass(settings.class); settings.onExit(data); } } }); }; // exit if(!settings.target.length) return; // on mouse move $(window).on('mousemove', function(e) { magnetize(settings.target, e); }); } // init magneticButton({ distance: 120, onEnter: function(data) { //gsap.to(data.target, {scale: 1.2}); console.log(data); }, onExit: function(data) { //gsap.to(data.target, {scale: 1}); console.log(data); }, onUpdate: function(data) { console.log(data); } }); // Follower function cursorFollowAndReturn(options) { let settings = $.extend({ follower: '', // jQuery element container: '', // jQuery element }, options); // exit if elements are not found if(!settings.follower.length && !settings.container.length) return; // set button position when mouse move inside wrapper settings.container.on("mousemove", function(e) { let x = e.pageX, y = e.pageY, // mouse offset offsetX = settings.container.offset().left, // container offset offsetY = settings.container.offset().top, valX = x - offsetX - (settings.container.outerWidth() / 2), valY = y - offsetY - (settings.container.outerHeight() / 2); gsap.to(settings.follower, .5, { x: valX, y: valY }); }); // set button to center of wrapper when mouse out settings.container.on("mouseout", function(e) { gsap.to(settings.follower, .5, { x: 0, y: 0 }); }); } // init cursorFollowAndReturn({ follower: $('.follower'), container: $('.follower-area'), }); // Custom Cursor End
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula