1(function ($) { 2 "use strict"; 3if ($("body").not(".is-mobile").hasClass("tt-magic-cursor")) { 4 if ($(window).width() > 1024) { 5 $(".magnetic-item").wrap('<div class="magnetic-wrap"></div>'); 6 7 if ($("a.magnetic-item").length) { 8 $("a.magnetic-item").addClass("not-hide-cursor"); 9 } 10 11 var $mouse = { x: 0, y: 0 }; // Cursor position 12 var $pos = { x: 0, y: 0 }; // Cursor position 13 var $ratio = 0.15; // delay follow cursor 14 var $active = false; 15 var $ball = $("#ball"); 16 17 var $ballWidth = 34; // Ball default width 18 var $ballHeight = 34; // Ball default height 19 var $ballScale = 1; // Ball default scale 20 var $ballOpacity = 0.5; // Ball default opacity 21 var $ballBorderWidth = 2; // Ball default border width 22 23 gsap.set($ball, { // scale from middle and style ball 24 xPercent: -50, 25 yPercent: -50, 26 width: $ballWidth, 27 height: $ballHeight, 28 borderWidth: $ballBorderWidth, 29 opacity: $ballOpacity 30 }); 31 32 document.addEventListener("mousemove", mouseMove); 33 34 function mouseMove(e) { 35 $mouse.x = e.clientX; 36 $mouse.y = e.clientY; 37 } 38 39 gsap.ticker.add(updatePosition); 40 41 function updatePosition() { 42 if (!$active) { 43 $pos.x += ($mouse.x - $pos.x) * $ratio; 44 $pos.y += ($mouse.y - $pos.y) * $ratio; 45 46 gsap.set($ball, { x: $pos.x, y: $pos.y }); 47 } 48 } 49 50 $(".magnetic-wrap").on( "mousemove", function(e) { 51 parallaxCursor(e, this, 2); // magnetic ball = low number is more attractive 52 callParallax(e, this); 53 }); 54 55 function callParallax(e, parent) { 56 parallaxIt(e, parent, parent.querySelector(".magnetic-item"), 25); // magnetic area = higher number is more attractive 57 } 58 59 function parallaxIt(e, parent, target, movement) { 60 var boundingRect = parent.getBoundingClientRect(); 61 var relX = e.clientX - boundingRect.left; 62 var relY = e.clientY - boundingRect.top; 63 64 gsap.to(target, { 65 duration: 0.3, 66 x: ((relX - boundingRect.width / 2) / boundingRect.width) * movement, 67 y: ((relY - boundingRect.height / 2) / boundingRect.height) * movement, 68 ease: Power2.easeOut 69 }); 70 } 71 72 function parallaxCursor(e, parent, movement) { 73 var rect = parent.getBoundingClientRect(); 74 var relX = e.clientX - rect.left; 75 var relY = e.clientY - rect.top; 76 $pos.x = rect.left + rect.width / 2 + (relX - rect.width / 2) / movement; 77 $pos.y = rect.top + rect.height / 2 + (relY - rect.height / 2) / movement; 78 gsap.to($ball, {duration: 0.3, x: $pos.x, y: $pos.y }); 79 } 80 81 82 // Magic cursor behavior 83 // ====================== 84 85 // Magnetic item hover. 86 $(".magnetic-wrap").on("mouseenter", function(e) { 87 gsap.to($ball, { duration: 0.3, scale: 2, borderWidth: 1, opacity: $ballOpacity }); 88 $active = true; 89 }).on("mouseleave", function(e) { 90 gsap.to($ball, { duration: 0.3, scale: $ballScale, borderWidth: $ballBorderWidth, opacity: $ballOpacity }); 91 gsap.to(this.querySelector(".magnetic-item"), { duration: 0.3, x: 0, y: 0, clearProps:"all" }); 92 $active = false; 93 }); 94 95 // Alternative cursor style on hover. 96 $(".cursor-alter, .tt-main-menu-list > li > a, .tt-main-menu-list > li > .tt-submenu-trigger > a") 97 .not(".magnetic-item") // omit from selection. 98 .on("mouseenter", function() { 99 gsap.to($ball, { 100 duration: 0.3, 101 borderWidth: 0, 102 opacity: 0.2, 103 backgroundColor: "#CCC", 104 width: "100px", 105 height: "100px", 106 }); 107 }).on("mouseleave", function() { 108 gsap.to($ball, { 109 duration: 0.3, 110 borderWidth: $ballBorderWidth, 111 opacity: $ballOpacity, 112 backgroundColor: "transparent", 113 width: $ballWidth, 114 height: $ballHeight, 115 clearProps:"backgroundColor" 116 }); 117 }); 118 119 // Overlay menu caret hover. 120 $(".tt-ol-submenu-caret-wrap .magnetic-wrap").on("mouseenter", function() { 121 gsap.to($ball, { duration: 0.3, scale: 1.3, borderWidth: $ballBorderWidth }); 122 }).on("mouseleave", function() { 123 gsap.to($ball, { duration: 0.3, scale: $ballScale }); 124 }); 125 126 // Cursor view on hover (data attribute "data-cursor="..."). 127 $("[data-cursor]").each(function() { 128 $(this).on("mouseenter", function() { 129 $ball.append('<div class="ball-view"></div>'); 130 $(".ball-view").append($(this).attr("data-cursor")); 131 gsap.to(ball, { duration: 0.3, yPercent: -75, width: 95, height: 95, opacity: 1, borderWidth: 0, backgroundColor: "#FFF" }); 132 gsap.to(".ball-view", { duration: 0.3, scale: 1, autoAlpha: 1 }); 133 }).on("mouseleave", function() { 134 gsap.to(ball, { duration: 0.3, yPercent: -50, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity, borderWidth: $ballBorderWidth, backgroundColor: "transparent" }); 135 gsap.to(".ball-view", { duration: 0.3, scale: 0, autoAlpha: 0, clearProps:"all" }); 136 $ball.find(".ball-view").remove(); 137 }); 138 $(this).addClass("not-hide-cursor"); 139 }); 140 141 // Cursor drag on hover (class "cursor-drag"). For Swiper sliders. 142 $(".swiper-container").each(function() { 143 if ($(this).parent().attr("data-simulate-touch") == "true") { 144 if ($(this).parent().hasClass("cursor-drag")) { 145 $(this).on("mouseenter", function() { 146 $ball.append('<div class="ball-drag"></div>'); 147 gsap.to($ball, { duration: 0.3, width: 60, height: 60, opacity: 1 }); 148 }).on("mouseleave", function() { 149 $ball.find(".ball-drag").remove(); 150 gsap.to($ball, { duration: 0.3, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 151 }); 152 $(this).addClass("not-hide-cursor"); 153 154 // Ignore "data-cursor" on hover. 155 $(this).find("[data-cursor]").on("mouseenter mouseover", function() { 156 $ball.find(".ball-drag").remove(); 157 return false; 158 }).on("mouseleave", function() { 159 $ball.append('<div class="ball-drag"></div>'); 160 gsap.to($ball, { duration: 0.3, width: 60, height: 60, opacity: 1 }); 161 }); 162 } 163 } 164 }); 165 166 // Cursor drag on mouse down / click and hold effect (class "cursor-drag-mouse-down"). For Swiper sliders. 167 $(".swiper-container").each(function() { 168 if ($(this).parent().attr("data-simulate-touch") == "true") { 169 if ($(this).parent().hasClass("cursor-drag-mouse-down")) { 170 $(this).on("mousedown pointerdown", function(e) { 171 if (e.which === 1) { // Affects the left mouse button only! 172 gsap.to($ball, { duration: 0.2, width: 60, height: 60, opacity: 1 }); 173 $ball.append('<div class="ball-drag"></div>'); 174 } 175 }).on("mouseup pointerup", function() { 176 $ball.find(".ball-drag").remove(); 177 if ($(this).find("[data-cursor]:hover").length) { 178 } else { 179 gsap.to($ball, { duration: 0.2, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 180 } 181 }).on("mouseleave", function() { 182 $ball.find(".ball-drag").remove(); 183 gsap.to($ball, { duration: 0.2, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 184 }); 185 186 // Ignore "data-cursor" on mousedown. 187 $(this).find("[data-cursor]").on("mousedown pointerdown", function() { 188 return false; 189 }); 190 191 // Ignore "data-cursor" on hover. 192 $(this).find("[data-cursor]").on("mouseenter mouseover", function() { 193 $ball.find(".ball-drag").remove(); 194 return false; 195 }); 196 } 197 } 198 }); 199 200 // Cursor close on hover. 201 $(".cursor-close").each(function() { 202 $(this).addClass("ball-close-enabled"); 203 $(this).on("mouseenter", function() { 204 $ball.addClass("ball-close-enabled"); 205 $ball.append('<div class="ball-close">Close</div>'); 206 gsap.to($ball, { duration: 0.3, yPercent: -75, width: 80, height: 80, opacity: 1 }); 207 gsap.from(".ball-close", { duration: 0.3, scale: 0, autoAlpha: 0 }); 208 }).on("mouseleave click", function() { 209 $ball.removeClass("ball-close-enabled"); 210 gsap.to($ball, { duration: 0.3, yPercent: -50, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 211 $ball.find(".ball-close").remove(); 212 }); 213 214 // Hover on "cursor-close" inner elements. 215 $(".cursor-close a, .cursor-close button, .cursor-close .tt-btn, .cursor-close .hide-cursor") 216 .not(".not-hide-cursor") // omit from selection (class "not-hide-cursor" is for global use). 217 .on("mouseenter", function() { 218 $ball.removeClass("ball-close-enabled"); 219 }).on("mouseleave", function() { 220 $ball.addClass("ball-close-enabled"); 221 }); 222 }); 223 224 // Portfolio interactive title link hover. 225 $(".portfolio-interactive-item").each(function() { 226 var $piItem = $(this); 227 if ($(this).find(".pi-item-image").length) { 228 $piItem.find(".pi-item-title-link").on("mouseenter mouseover", function() { 229 $("#magic-cursor").addClass("portfolio-interactive-hover-on"); 230 $piItem.find(".pi-item-image").appendTo($ball); 231 gsap.to($ball, { duration: 0.3, width: "20vw", height: "20vw", opacity: 1 }); 232 $ball.find(".pi-item-image video").each(function() { 233 $(this).get(0).play(); 234 }); 235 }).on("mouseleave", function() { 236 $("#magic-cursor").removeClass("portfolio-interactive-hover-on"); 237 $ball.find(".pi-item-image").appendTo($piItem); 238 gsap.to($ball, { duration: 0.3, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 239 $piItem.find('.pi-item-image video').each(function() { 240 $(this).get(0).pause(); 241 }); 242 }); 243 $(this).find(".pi-item-title-link").addClass("not-hide-cursor"); 244 } 245 }); 246 247 // Blog interactive title link hover. 248 $(".blog-interactive-item").each(function() { 249 var $biItem = $(this); 250 if ($biItem.find(".bi-item-image").length) { 251 $biItem.find(".bi-item-title a").on("mouseenter mouseover", function() { 252 $("#magic-cursor").addClass("blog-interactive-hover-on"); 253 $biItem.find(".bi-item-image").appendTo($ball); 254 gsap.to($ball, { duration: 0.3, width: "20vw", height: "20vw", opacity: 1 }); 255 }).on("mouseleave", function() { 256 $("#magic-cursor").removeClass("blog-interactive-hover-on"); 257 $ball.find(".bi-item-image").appendTo($biItem); 258 gsap.to($ball, { duration: 0.3, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 259 }); 260 $biItem.find(".bi-item-title a").addClass("not-hide-cursor"); 261 $biItem.addClass("bi-item-image-on"); 262 } 263 }); 264 265 // Page nav hover. 266 $(".tt-page-nav").each(function() { 267 if ($(this).find(".tt-pn-image").length) { 268 $(this).find(".tt-pn-link").on("mouseenter mouseover", function() { 269 $("#magic-cursor").addClass("tt-pn-hover-on"); 270 $(this).parent().find(".tt-pn-image").appendTo($ball); 271 gsap.to($ball, { duration: 0.3, width: "20vw", height: "20vw", opacity: 1 }); 272 $ball.find(".tt-pn-image video").each(function() { 273 $(this).get(0).play(); 274 }); 275 }).on("mouseleave", function() { 276 $("#magic-cursor").removeClass("tt-pn-hover-on"); 277 $ball.find(".tt-pn-image").appendTo(this); 278 gsap.to($ball, { duration: 0.3, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 279 280 $(this).parent().find('.tt-pn-image video').each(function() { 281 $(this).get(0).pause(); 282 }); 283 }); 284 $(this).find(".tt-pn-link").addClass("not-hide-cursor"); 285 } else { 286 $(this).find(".tt-pn-link").removeClass("not-hide-cursor"); 287 } 288 }); 289 290 // Page nav title hover. 291 if ($(".tt-pn-image").length) { 292 $(".tt-page-nav").each(function() { 293 $(this).find(".tt-pn-link").on("mouseenter mouseover", function() { 294 $("#magic-cursor").addClass("tt-page-nav-hover-on"); 295 $(this).parent().find(".tt-pn-image").appendTo($ball); 296 gsap.to($ball, { duration: 0.3, width: "20vw", height: "20vw", opacity: 1 }); 297 if ($(".tt-pn-image video").length) { 298 $(".tt-pn-image video").get(0).play(); 299 } 300 }).on("mouseleave", function() { 301 $("#magic-cursor").removeClass("tt-page-nav-hover-on"); 302 $ball.find(".tt-pn-image").appendTo(this); 303 gsap.to($ball, { duration: 0.3, width: $ballWidth, height: $ballHeight, opacity: $ballOpacity }); 304 305 if ($(".tt-pn-image video").length) { 306 $(".tt-pn-image video").get(0).pause(); 307 } 308 }); 309 }); 310 $(".tt-pn-link").addClass("not-hide-cursor"); 311 } else { 312 $(".tt-pn-link").removeClass("not-hide-cursor"); 313 } 314 315 316 // Show/hide magic cursor 317 // ======================= 318 319 // Hide on hover. 320 $("a, button, .tt-btn, .tt-form-control, .tt-form-radio, .tt-form-check, .hide-cursor") // class "hide-cursor" is for global use. 321 .not(".not-hide-cursor") // omit from selection (class "not-hide-cursor" is for global use). 322 .not(".cursor-alter") // omit from selection 323 .not(".tt-main-menu-list > li > a") // omit from selection 324 .not(".tt-main-menu-list > li > .tt-submenu-trigger > a") // omit from selection 325 .on("mouseenter", function() { 326 gsap.to($ball, { duration: 0.3, scale: 0, opacity: 0 }); 327 }).on("mouseleave", function() { 328 gsap.to($ball, { duration: 0.3, scale: $ballScale, opacity: $ballOpacity }); 329 }); 330 331 // Hide on click. 332 $("a") 333 .not('[target="_blank"]') // omit from selection. 334 .not('[href^="#"]') // omit from selection. 335 .not('[href^="mailto"]') // omit from selection. 336 .not('[hr
336ef^="tel"]') // omit from selection. 337 .not(".lg-trigger") // omit from selection. 338 .on('click', function() { 339 gsap.to($ball, { duration: 0.3, scale: 1.3, autoAlpha: 0 }); 340 }); 341 342 // Show/hide on document leave/enter. 343 $(document).on("mouseleave", function() { 344 gsap.to("#magic-cursor", { duration: 0.3, autoAlpha: 0 }); 345 }).on("mouseenter", function() { 346 gsap.to("#magic-cursor", {duration: 0.3, autoAlpha: 1 }); 347 }); 348 349 // Show as the mouse moves. 350 $(document).on( "mousemove", function(e) { 351 gsap.to("#magic-cursor", {duration: 0.3, autoAlpha: 1 }); 352 }); 353 } 354} 355})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.