1const SffmShuffleArray = (arr) => arr.sort(() => (Math.random() - 0.5)); 2 3class SffmMenuHoverStyle2Item { 4 constructor(el) { 5 this.DOM = {}; 6 this.DOM.el = el; 7 this.DOM.label = el[0].querySelector('.sffm-el-menu-item-label'); 8 this.colors = { 9 active: window.getComputedStyle(this.DOM.el[0]).getPropertyValue('--sffm-el-menu-subtitle-hover-color') 10 }; 11 charming(this.DOM.label); 12 this.DOM.labelLetters = Array.from(this.DOM.label.querySelectorAll('span')); 13 this.colors.initial = window.getComputedStyle(this.DOM.labelLetters[0]).color; 14 console.log(this.colors.active); 15 this.initEvents(); 16 } 17 initEvents() { 18 this.mouseenterFn = () => this.mouseTimeout = setTimeout(() => { 19 this.isActive = true; 20 anime.remove(this.DOM.labelLetters); 21 anime({ 22 targets: this.DOM.labelLetters, 23 delay: (t, i) => i * 20, 24 translateY: [ 25 {value: 10, duration: 150, easing: 'easeInQuad'}, 26 {value: [-10, 0], duration: 150, easing: 'easeOutQuad'} 27 ], 28 opacity: [ 29 {value: 0, duration: 150, easing: 'linear'}, 30 {value: 1, duration: 150, easing: 'linear'} 31 ], 32 color: { 33 value: this.colors.active, 34 duration: 1, 35 delay: (t, i, l) => i * 20 + 150 36 } 37 }); 38 }, 50); 39 40 this.mouseleaveFn = () => { 41 clearTimeout(this.mouseTimeout); 42 if (!this.isActive) 43 return; 44 this.isActive = false; 45 46 anime.remove(this.DOM.labelLetters); 47 anime({ 48 targets: this.DOM.labelLetters, 49 delay: (t, i, l) => (l - i - 1) * 20, 50 translateY: [ 51 {value: 10, duration: 150, easing: 'easeInQuad'}, 52 {value: [-10, 0], duration: 150, easing: 'easeOutQuad'} 53 ], 54 opacity: [ 55 {value: 0, duration: 150, easing: 'linear'}, 56 {value: 1, duration: 150, easing: 'linear'} 57 ], 58 color: { 59 value: this.colors.initial, 60 duration: 1, 61 delay: (t, i, l) => (l - i - 1) * 20 + 150 62 } 63 }); 64 65 }; 66 67 this.DOM.el[0].addEventListener('mouseenter', this.mouseenterFn); 68 this.DOM.el[0].addEventListener('touchstart', this.mouseenterFn); 69 this.DOM.el[0].addEventListener('mouseleave', this.mouseleaveFn); 70 this.DOM.el[0].addEventListener('touchend', this.mouseleaveFn); 71 } 72} 73 74class SffmMenuHoverStyle3Item { 75 constructor(el) { 76 this.DOM = {}; 77 this.DOM.el = el; 78 this.DOM.name = el[0].querySelector('.sffm-el-menu-item-name'); 79 this.colors = { 80 active: window.getComputedStyle(this.DOM.el[0]).getPropertyValue('--sffm-el-menu-title-hover-color') 81 }; 82 charming(this.DOM.name); 83 this.DOM.nameLetters = Array.from(this.DOM.name.querySelectorAll('span')); 84 this.colors.initial = window.getComputedStyle(this.DOM.nameLetters[0]).color; 85 this.initEvents(); 86 } 87 initEvents() { 88 const duration = 150; 89 90 this.mouseenterFn = () => this.mouseTimeout = setTimeout(() => { 91 this.isActive = true; 92 anime.remove(this.DOM.nameLetters); 93 anime({ 94 targets: this.DOM.nameLetters, 95 delay: (t, i) => i * 20, 96 translateY: [ 97 {value: (t, i) => i % 2 === 0 ? 10 : -10, duration: duration, easing: 'easeInSine'}, 98 {value: (t, i) => i % 2 === 0 ? [-10, 0] : [10, 0], duration: duration + 700, easing: 'easeOutElastic', elasticity: 600} 99 ], 100 opacity: [ 101 {value: 0, duration: duration, easing: 'linear'}, 102 {value: 1, duration: duration, easing: 'linear'} 103 ], 104 color: { 105 value: this.colors.active, 106 duration: 1, 107 delay: (t, i) => i * 20 + duration, 108 easing: 'linear' 109 } 110 }); 111 }, 50); 112 113 this.mouseleaveFn = () => { 114 clearTimeout(this.mouseTimeout); 115 if (!this.isActive) 116 return; 117 this.isActive = false;
118 119 anime.remove(this.DOM.nameLetters); 120 anime({ 121 targets: this.DOM.nameLetters, 122 delay: (t, i, l) => (l - i - 1) * 20, 123 translateY: [ 124 {value: (t, i) => i % 2 === 0 ? -10 : 10, duration: duration, easing: 'easeInSine'}, 125 {value: (t, i) => i % 2 === 0 ? [10, 0] : [-10, 0], duration: duration + 700, easing: 'easeOutElastic', elasticity: 600} 126 ], 127 opacity: [ 128 {value: 0, duration: duration, easing: 'linear'}, 129 {value: 1, duration: duration, easing: 'linear'} 130 ], 131 color: { 132 value: this.colors.initial, 133 duration: 1, 134 delay: (t, i, l) => (l - i - 1) * 20 + duration, 135 easing: 'linear' 136 } 137 }); 138 }; 139 140 this.DOM.el[0].addEventListener('mouseenter', this.mouseenterFn); 141 this.DOM.el[0].addEventListener('touchstart', this.mouseenterFn); 142 this.DOM.el[0].addEventListener('mouseleave', this.mouseleaveFn); 143 this.DOM.el[0].addEventListener('touchend', this.mouseleaveFn); 144 } 145} 146 147class SffmMenuHoverStyle4Item { 148 constructor(el) { 149 this.DOM = {}; 150 this.DOM.el = el; 151 this.DOM.label = el[0].querySelector('.sffm-el-menu-item-label'); 152 this.colors = { 153 active: window.getComputedStyle(this.DOM.el[0]).getPropertyValue('--sffm-el-menu-subtitle-hover-color') 154 }; 155 charming(this.DOM.label); 156 this.DOM.labelLetters = Array.from(this.DOM.label.querySelectorAll('span')); 157 this.colors.initial = window.getComputedStyle(this.DOM.labelLetters[0]).color; 158 this.initEvents(); 159 } 160 initEvents() { 161 this.mouseenterFn = () => this.mouseTimeout = setTimeout(() => { 162 this.isActive = true; 163 anime.remove(this.DOM.labelLetters); 164 anime({ 165 targets: this.DOM.labelLetters, 166 delay: (t, i) => i * 7, 167 translateY: [ 168 {value: 10, duration: 150, easing: 'easeInQuad'}, 169 {value: [-10, 0], duration: 150, easing: 'easeOutQuad'} 170 ], 171 opacity: [ 172 {value: 0, duration: 150, easing: 'linear'}, 173 {value: 1, duration: 150, easing: 'linear'} 174 ], 175 color: { 176 value: this.colors.active, 177 duration: 1, 178 delay: (t, i, l) => i * 7 + 150 179 } 180 }); 181 }, 50); 182 183 this.mouseleaveFn = () => { 184 clearTimeout(this.mouseTimeout); 185 if (!this.isActive) 186 return; 187 this.isActive = false; 188 189 anime.remove(this.DOM.labelLetters); 190 anime({ 191 targets: this.DOM.labelLetters, 192 delay: (t, i, l) => (l - i - 1) * 7, 193 translateY: [ 194 {value: 10, duration: 150, easing: 'easeInQuad'}, 195 {value: [-10, 0], duration: 150, easing: 'easeOutQuad'} 196 ], 197 opacity: [ 198 {value: 0, duration: 150, easing: 'linear'}, 199 {value: 1, duration: 150, easing: 'linear'} 200 ], 201 color: { 202 value: this.colors.initial, 203 duration: 1, 204 delay: (t, i, l) => (l - i - 1) * 7 + 150 205 } 206 }); 207 }; 208 209 this.DOM.el[0].addEventListener('mouseenter', this.mouseenterFn); 210 this.DOM.el[0].addEventListener('touchstart', this.mouseenterFn); 211 this.DOM.el[0].addEventListener('mouseleave', this.mouseleaveFn); 212 this.DOM.el[0].addEventListener('touchend', this.mouseleaveFn); 213 } 214} 215 216class SffmMenuHoverStyle5Item { 217 constructor(el) { 218 this.DOM = {}; 219 this.DOM.el = el; 220 this.DOM.label = el[0].querySelector('.sffm-el-menu-item-label'); 221 charming(this.DOM.label); 222 this.DOM.labelLetters = Array.from(this.DOM.label.querySelectorAll('span')); 223 this.initEvents(); 224 } 225 initEvents() { 226 this.mouseenterFn = () => this.mouseTimeout = setTimeout(() => { 227 this.isActive = true; 228 anime.remove(this.DOM.labelLetters); 229 anime({ 230 targets: SffmShuffleArray(this.DOM.labelLetters), 231 duration: 20, 232 delay: (t, i) => (i + 5) * 30, 233 easing: 'linear', 234 opacity: [0, 1] 235 }); 236 }, 50); 237 238 this.mouseleaveFn = () => { 239 clearTimeout(this.mouseTimeout); 240 if (!this.isActive) 241 return; 242 this.isActive = false;
243 }; 244 245 this.DOM.el[0].addEventListener('mouseenter', this.mouseenterFn); 246 this.DOM.el[0].addEventListener('touchstart', this.mouseenterFn); 247 this.DOM.el[0].addEventListener('mouseleave', this.mouseleaveFn); 248 this.DOM.el[0].addEventListener('touchend', this.mouseleaveFn); 249 } 250} 251 252class SffmMenuHoverStyle7Item { 253 constructor(el) { 254 this.DOM = {}; 255 this.DOM.el = el; 256 this.DOM.label = el[0].querySelector('.sffm-el-menu-item-label'); 257 charming(this.DOM.label); 258 this.DOM.labelLetters = Array.from(this.DOM.label.querySelectorAll('span')); 259 this.initEvents(); 260 } 261 initEvents() { 262 this.mouseenterFn = () => this.mouseTimeout = setTimeout(() => { 263 this.isActive = true; 264 anime.remove(this.DOM.labelLetters); 265 anime({ 266 targets: this.DOM.labelLetters, 267 duration: 20, 268 delay: (t, i) => (i + 5) * 30, 269 easing: 'linear', 270 opacity: [0, 1] 271 }); 272 }, 50); 273 274 this.mouseleaveFn = () => { 275 clearTimeout(this.mouseTimeout); 276 if (!this.isActive) 277 return; 278 this.isActive = false; 279 }; 280 281 this.DOM.el[0].addEventListener('mouseenter', this.mouseenterFn); 282 this.DOM.el[0].addEventListener('touchstart', this.mouseenterFn); 283 this.DOM.el[0].addEventListener('mouseleave', this.mouseleaveFn); 284 this.DOM.el[0].addEventListener('touchend', this.mouseleaveFn); 285 } 286} 287 288class SffmMenuHoverStyle8Item { 289 constructor(el) { 290 this.DOM = {}; 291 this.DOM.el = el; 292 this.DOM.name = el[0].querySelector('.sffm-el-menu-item-name'); 293 charming(this.DOM.name); 294 this.DOM.nameLetters = Array.from(this.DOM.name.querySelectorAll('span')); 295 this.initEvents(); 296 } 297 initEvents() { 298 this.mouseenterFn = () => this.mouseTimeout = setTimeout(() => { 299 this.isActive = true; 300 anime.remove(this.DOM.nameLetters); 301 anime({ 302 targets: this.DOM.nameLetters, 303 duration: 800, 304 easing: 'cubicBezier(0.7, 0, 0.3, 1)', 305 scale: (t, i) => [1, anime.random(0, 1) ? 0.8 : 1.4], 306 translateX: (t, i) => { 307 const elBounds = this.DOM.el[0].getBoundingClientRect(); 308 const x1 = elBounds.left + elBounds.width / 2; 309 const y1 = elBounds.top + elBounds.height / 2; 310 311 const targetBounds = t.getBoundingClientRect(); 312 const x2 = targetBounds.left + targetBounds.width / 2; 313 const y2 = targetBounds.top + targetBounds.height / 2; 314 315 const dist = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); 316 const maxDist = Math.sqrt(Math.pow(elBounds.left - x1, 2) + Math.pow(elBounds.top - y1, 2)); 317 const maxTX = x2 < x1 ? -250 : 250; 318 319 return maxTX / maxDist * dist; 320 }, 321 translateY: (t, i) => [0, anime.random(-40, 40)], 322 rotateZ: (t, i) => [0, anime.random(-20, 20)], 323 opacity: (t, i) => 0.3, 324 }); 325 }, 50); 326 327 this.mouseleaveFn = () => { 328 clearTimeout(this.mouseTimeout); 329 if (!this.isActive) 330 return; 331 this.isActive = false; 332 anime.remove(this.DOM.nameLetters); 333 anime({ 334 targets: this.DOM.nameLetters, 335 duration: 800, 336 easing: 'cubicBezier(0.7, 0, 0.3, 1)', 337 scale: 1, 338 translateX: 0, 339 translateY: 0, 340 rotateZ: 0, 341 opacity: 1 342 }); 343 }; 344 345 this.DOM.el[0].addEventListener('mouseenter', this.mouseenterFn); 346 this.DOM.el[0].addEventListener('touchstart', this.mouseenterFn); 347 this.DOM.el[0].addEventListener('mouseleave', this.mouseleaveFn); 348 this.DOM.el[0].addEventListener('touchend', this.mouseleaveFn); 349 } 350}
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.