ayrisdev/muglasurucukursu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: optimize images and throttle/disable magic cursor on mobile

Browse Source
This commit is contained in:
mstfyldz
2026-05-05 00:10:04 +03:00
parent 5808186afc
commit 7ea420daba
2 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@@ -167,7 +167,7 @@
<div class="about-us-image"> <div class="about-us-image">
<div class="about-img-1"> <div class="about-img-1">
<figure class="image-anime reveal"> <figure class="image-anime reveal">
<img src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917585/muglasurucukursu/araba1.jpg" alt=""> <img src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917585/muglasurucukursu/araba1.jpg" alt="">
</figure> </figure>
</div> </div>
@@ -294,7 +294,7 @@
<div class="service-image"> <div class="service-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917585/muglasurucukursu/araba1.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917585/muglasurucukursu/araba1.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -338,7 +338,7 @@
<div class="service-image"> <div class="service-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917624/muglasurucukursu/arabasurus1.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917624/muglasurucukursu/arabasurus1.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -382,7 +382,7 @@
<div class="service-image"> <div class="service-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917638/muglasurucukursu/motor4.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917638/muglasurucukursu/motor4.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -426,7 +426,7 @@
<div class="service-image"> <div class="service-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917600/muglasurucukursu/arababakim5.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917600/muglasurucukursu/arababakim5.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -471,7 +471,7 @@
<div class="service-image"> <div class="service-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917619/muglasurucukursu/arabaparkdikey.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917619/muglasurucukursu/arabaparkdikey.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -726,7 +726,7 @@
<div class="course-image"> <div class="course-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917604/muglasurucukursu/arabadikey1.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917604/muglasurucukursu/arabadikey1.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -758,7 +758,7 @@
<div class="course-image"> <div class="course-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917627/muglasurucukursu/motor.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917627/muglasurucukursu/motor.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -790,7 +790,7 @@
<div class="course-image"> <div class="course-image">
<a href="contact.html" data-cursor-text="View"> <a href="contact.html" data-cursor-text="View">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917651/muglasurucukursu/tirdikey.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917651/muglasurucukursu/tirdikey.jpg" alt="">
</figure> </figure>
</a> </a>
</div> </div>
@@ -924,7 +924,7 @@
<!-- FAQ Image Start --> <!-- FAQ Image Start -->
<div class="faq-image wow fadeInUp" data-wow-delay="0.2s"> <div class="faq-image wow fadeInUp" data-wow-delay="0.2s">
<figure class="image-anime"> <figure class="image-anime">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917612/muglasurucukursu/arabagenel1.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917612/muglasurucukursu/arabagenel1.jpg" alt="">
</figure> </figure>
<!-- Appointment Info List Start --> <!-- Appointment Info List Start -->
@@ -992,7 +992,7 @@
<!-- How It Work Image Start --> <!-- How It Work Image Start -->
<div class="how-it-work-image"> <div class="how-it-work-image">
<figure class="image-anime reveal"> <figure class="image-anime reveal">
<img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_800/v1777917643/muglasurucukursu/motorhoca.jpg" alt=""> <img loading="lazy" src="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto,w_700/v1777917643/muglasurucukursu/motorhoca.jpg" alt="">
</figure> </figure>
</div> </div>
<!-- How It Work Image End --> <!-- How It Work Image End -->

24
js/magiccursor.js
View File

@@ -27,6 +27,8 @@ class Cursor {
}).on('mouseenter', () => { }).on('mouseenter', () => {
self.show(); self.show();
}).on('mousemove', (e) => { }).on('mousemove', (e) => {
if (this.lastMove && Date.now() - this.lastMove < 16) return; // Throttle to ~60fps
this.lastMove = Date.now();
this.pos = { this.pos = {
x: this.stick ? this.stick.x - ((this.stick.x - e.clientX) * 0.15) : e.clientX, x: this.stick ? this.stick.x - ((this.stick.x - e.clientX) * 0.15) : e.clientX,
y: this.stick ? this.stick.y - ((this.stick.y - e.clientY) * 0.15) : e.clientY y: this.stick ? this.stick.y - ((this.stick.y - e.clientY) * 0.15) : e.clientY
@@ -95,33 +97,39 @@ class Cursor {
} }
update() { update() {
if (!this.visible) return;
this.move(); this.move();
this.show(); this.show();
} }
move(x, y, duration) { move(x, y, duration) {
if (!this.el.length) return;
gsap.to(this.el, { gsap.to(this.el, {
x: x || this.pos.x, x: x || this.pos.x,
y: y || this.pos.y, y: y || this.pos.y,
force3D: true, force3D: true,
overwrite: true, overwrite: "auto",
ease: this.options.ease, ease: this.options.ease,
duration: this.visible ? (duration || this.options.speed) : 0 duration: this.visible ? (duration || this.options.speed) : 0
}); });
} }
show() { show() {
if (this.visible) return; if (this.visible || !this.el.length) return;
clearInterval(this.visibleInt);
this.el.addClass('-visible'); this.el.addClass('-visible');
this.visibleInt = setTimeout(() => this.visible = true); this.visible = true;
} }
hide() { hide() {
clearInterval(this.visibleInt); if (!this.el.length) return;
this.el.removeClass('-visible'); this.el.removeClass('-visible');
this.visibleInt = setTimeout(() => this.visible = false, this.options.visibleTimeout); this.visible = false;
} }
} }
// Init cursor
const cursor = new Cursor(); // Init cursor only on desktop and after load
$(window).on('load', function() {
if (window.innerWidth > 1024 && !('ontouchstart' in window)) {
const cursor = new Cursor();
}
});