1 2mouseInteractiveAnimate(); //é¼ æ 交äºå¨ç»ææ 3 4function mouseInteractiveAnimate(){ 5 let animateElements = document.querySelectorAll(".mouseInteractive"); 6 for (let i = 0; i < animateElements.length; i++) { 7 let modelElement = animateElements[i]; 8 let animateType = modelElement.getAttribute("animateType"); 9 let followType = modelElement.getAttribute("animateFollowType") || 'XY'; //è·éç±»å X Y XY 10 let followX = followType === 'X' || followType === 'XY'; 11 let followY = followType === 'Y' || followType === 'XY'; 12 let isBodyAnimate = modelElement.getAttribute("animateFollowView") || 'model'; //è·éè§å¾ model body 13 let elementAll = []; 14 15 let includeBlockViewElement = modelElement.querySelectorAll(".a_includeBlockView"); 16 let isincludeBlockViewModel = includeBlockViewElement.length > 0 ? true : false; //æ¯å¦èªç±å®¹å¨ 17 if(isincludeBlockViewModel){ 18 let viewContentEelement = modelElement.querySelector(".a_includeBlockView"); 19 elementAll.push(viewContentEelement); 20 }else{ 21 let miaLiContElement = modelElement.querySelectorAll(".mia_li_cont .mia_li_item"); 22 let isListModel = miaLiContElement.length > 0 ? true : false; //æ¯å¦å表模å 23 if(isListModel){ 24 elementAll = miaLiContElement; 25 }else{ 26 let viewContentEelement = modelElement.querySelector(".view_contents"); 27 elementAll.push(viewContentEelement); 28 } 29 } 30 31 switch(animateType){ 32 case 'incline-3d': incline3DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //3Då¾æææ 33 case 'rotate-3d': rotate3DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //3Dæ转ææ 34 case 'flip-3d': flip3DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //3D翻转ææ 35 case 'translation-2d': translation2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //2d平移ææ 36 case 'swing-2d' : swing2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //2dææææ 37 case 'askew-3d' : askew3DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //3dæªæææ 38 case 'scale-2d' : scale2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //2d缩æ¾ææ 39 case 'rotate-2d' : rotate2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //2dæ转ææ 40 case 'shadow-2d' : shadow2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //2dé´å½±ææ 41 case 'vague-2d' : vague2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //2då模ç³ææ 42 case 'clarity-2d' : clarity2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate); break; //2dåæ¸ æ°ææ 43 default:break; 44 } 45 } 46} 47 48// 2dææææ 49function swing2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 50 let maxDeg = modelElement.getAttribute("animateRotate") || 20; 51 let maxTranslate = modelElement.getAttribute("animateTranslate") || 36; 52 for (let i = 0; i < elementAll.length; i++) { 53 let element = elementAll[i]; 54 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 55 // 设置 3D æ ·å¼ 56 element.style.transition = "transform 0.1s"; 57 // æ·»å é¼ æ äºä»¶ 58 mouseOverContainer.addEventListener("mousemove", (e) => { 59 if (window.innerWidth >= 1200) { 60 window.requestAnimationFrame(function () { 61 transformElement(e.clientX, e.clientY, maxTranslate); 62 }); 63 } 64 }); 65 mouseOverContainer.addEventListener("mouseleave", () => { 66 if (window.innerWidth >= 1200) { 67 window.requestAnimationFrame(function () { 68 element.style.transform = "translate(0px, 0px) rotate(0deg)"; 69 }); 70 } 71 }); 72 73 74 function transformElement(x, y, maxTranslate) { 75 let box = element.getBoundingClientRect(); 76 let translateX, translateY, rotateY; 77 if(isBodyAnimate == 'model'){ 78 translateX = followX ? ((2 * (box.x - x) / box.width + 1) * maxTranslate) : 0; 79 translateY = followY ? ((2 * (box.y - y) / box.height + 1) * maxTranslate) : 0; 80 rotateY = followX ? ((2 * (box.x - x) / box.width + 1) * maxDeg) : 0; 81 }else{ 82 translateX = followX ? (((box.x + box.width/2 - x) / window.innerWidth) * maxTranslate) : 0; 83 translateY = followY ? (((box.y + box.height/2 - y) / window.innerHeight) * maxTranslate) : 0; 84 rotateY = followX ? (((box.x + box.width/2 - x) / window.innerWidth) * maxDeg) : 0; 85 } 86 element.style.transform = `translate(${translateX}px, ${translateY}px) rotate(${rotateY}deg)`; 87 } 88 } 89} 90 91//2d平移ææ 92function translation2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 93 let maxTranslate = modelElement.getAttribute("animateTranslate") || 36; 94 for (let i = 0; i < elementAll.length; i++) { 95 let element = elementAll[i]; 96 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 97 // 设置 3D æ ·å¼ 98 element.style.transition = "transform 0.1s"; 99 100 // æ·»å é¼ æ äºä»¶ 101 mouseOverContainer.addEventListener("mousemove", (e) => { 102 if (window.innerWidth >= 1200) { 103 window.requestAnimationFrame(function () { 104 transformElement(e.clientX, e.clientY, maxTranslate); 105 }); 106 } 107 }); 108 mouseOverContainer.addEventListener("mouseleave", () => { 109 if (window.innerWidth >= 1200) { 110 window.requestAnimationFrame(function () { 111 element.style.transform = "translate(0px, 0px)"; 112 }); 113 } 114 }); 115 116 function transformElement(x, y, maxTranslate) { 117 let box = element.getBoundingClientRect(); 118 let translateX, translateY; 119 if(isBodyAnimate == 'model'){ 120 translateX = followX ? (-(2 * (box.x - x) / box.width + 1) * maxTranslate) : 0; 121 translateY = followY ? (-(2 * (box.y - y) / box.height + 1) * maxTranslate) : 0; 122 }else{ 123 translateX = followX ? (-((box.x + box.width/2 - x) / window.innerWidth) * maxTranslate) : 0; 124 translateY = followY ? (-((box.y + box.height/2 - y) / window.innerHeight) * maxTranslate) : 0; 125 } 126 element.style.transform = `translate(${translateX}px, ${translateY}px)`; 127 } 128 } 129} 130 131// 3Då¾æææ 132function incline3DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 133 let maxDeg = modelElement.getAttribute("animateRotate") || 20; 134 let maxTranslate = modelElement.getAttribute("animateTranslate") || 36; 135 for (let i = 0; i < elementAll.length; i++) { 136 let element = elementAll[i]; 137 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 138 let areaElement = element.parentElement; 139 let elementW = element.offsetWidth; 140 // 设置 3D æ ·å¼ 141 areaElement.parentElement.style.transformStyle = "preserve-3d"; 142 element.style.transition = "transform 0.1s"; 143 areaElement.parentElement.style.perspective = elementW * 3 / 1 + "px"; 144 145 // æ·»å é¼ æ äºä»¶ 146 mouseOverContainer.addEventListener("mousemove", (e) => { 147 if (window.innerWidth >= 1200) { 148 window.requestAnimationFrame(function () { 149 transformElement(e.clientX, e.clientY, maxDeg, maxTranslate); 150 }); 151 } 152 }); 153 mouseOverContainer.addEventListener("mouseleave", () => { 154 if (window.innerWidth >= 1200) { 155 window.requestAnimationFrame(function () { 156 element.style.transform = "translate(0px, 0px) rotateX(0deg) rotateY(0deg)"; 157 }); 158 } 159 }); 160 161 function transformElement(x, y, maxDeg, maxTranslate) { 162 let box = element.getBoundingClientRect(); 163 let translateX, translateY, rotateX, rotateY; 164 if(isBodyAnimate == 'model'){ 165 rotateX = followY ? (-(2 * (box.y - y) / box.height + 1) * maxDeg) : 0; 166 rotateY = followX ? ((2 * (box.x - x) / box.width + 1) * maxDeg) : 0; 167 translateX = followX ? (-(2 * (box.x - x) / box.width + 1) * maxTranslate) : 0; 168 translateY = followY ? (-(2 * (box.y - y) / box.height + 1) * maxTranslate) : 0; 169 }else{ 170 rotateX = followY ? (-((box.y + box.height/2 - y) / window.innerHeight) * maxDeg) : 0; 171 rotateY = followX ? (((box.x + box.width/2 - x) / window.innerWidth) * maxDeg) : 0; 172 translateX = followX ? (-((box.x + box.width/2 - x) / window.innerWidth) * maxTranslate) : 0; 173 translateY = followY ? (-((box.y + box.height/2 - y) / window.innerHeight) * maxTranslate) : 0; 174 } 175 element.style.transform = `perspective(${elementW * 3 / 1}px) translateX(${translateX}px) translateY(${translateY}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; 176 } 177 } 178} 179 180// 3Dæ转ææ 181function rotate3DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate){ 182 let maxDeg = modelElement.getAttribute("animateRotate") || 20; 183 let animateAxis = modelElement.getAttribute("animateAxis") || 'center center'; 184 for (let i = 0; i < elementAll.length; i++) { 185 let element = elementAll[i]; 186 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 187 let areaElement = element.parentElement; 188 let elementW = element.offsetWidth; 189 190 // å¼å§ 191 areaElement.style.transformStyle = "preserve-3d"; 192 areaElement.style.perspective = elementW *3 / 2+"px"; 193 element.style.transformOrigin = animateAxis; 194 element.style.transition = "transform 0.1s"; 195 196 mouseOverContainer.addEventListener("mousemove", (e) => { 197 if (window.innerWidth >= 1200) { 198 window.requestAnimationFrame(function () { 199 transformElement(e.clientX, e.clientY,maxDeg); 200 }); 201 } 202 }); 203 mouseOverContainer.addEventListener("mouseleave", (e) => { 204 if (window.innerWidth >= 1200) { 205 window.requestAnimationFrame(function () { 206 element.style.transform = "rotateX(0) rotateY(0)"; 207 }); 208 } 209 }); 210 function transformElement(x, y,maxDeg) { 211 let box = element.parentElement.getBoundingClientRect(); 212 let rotateX, rotateY; 213 if(isBodyAnimate == 'model'){ 214 rotateX = followY ? ((2 * (box.y - y) / box.height + 1) * maxDeg) : 0; 215 rotateY = followX ? (-(2 * (box.x - x) / box.width + 1) * maxDeg) : 0; 216 }else{ 217 rotateX = followY ? (((box.y + box.height/2 - y) / window.innerHeight) * maxDeg) : 0; 218 rotateY = followX ? (-((box.x + box.width/2 - x) / window.innerWidth) * maxDeg) : 0; 219 } 220 element.style.transform = "rotateX(" + rotateX + "deg) " + "rotateY(" + rotateY + "deg)"; 221 } 222 } 223 224} 225 226// 3dæªæææ 227function askew3DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 228 let maxDeg = modelElement.getAttribute("animateRotate") || 20; 229 let animateAxis = modelElement.getAttribute("animateAxis") || 'center center'; 230 for (let i = 0; i < elementAll.length; i++) { 231 let element = elementAll[i]; 232 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 233 // 设置 3D æ ·å¼ 234 element.style.transition = "transform 0.1s"; 235 element.style.transformStyle = "preserve-3d"; 236 element.style.transformOrigin = animateAxis; 237 // æ·»å é¼ æ äºä»¶ 238 mouseOverContainer.addEventListener("mousemove", (e) => { 239 if (window.innerWidth >= 1200) { 240 window.requestAnimationFrame(function () { 241 transformElement(e.clientX, e.clientY, maxDeg); 242 }); 243 } 244 }); 245 mouseOverContainer.addEventListener("mouseleave", () => { 246 if (window.innerWidth >= 1200) { 247 window.requestAnimationFrame(function () { 248 element.style.transform = "translate(0px, 0px) rotate(0deg)"; 249 }); 250 } 251 }); 252 function transformElement(x, y, maxDeg) { 253 let box = element.getBoundingClientRect(); 254 let rotateX, rotateY, skewX, skewY; 255 if(isBodyAnimate == 'model'){ 256 rotateX = followX ? ((2 * (box.x - x) / box.width + 1) * maxDeg) : 0; 257 rotateY = followY ? (-(2 * (box.y - y) / box.height + 1) * maxDeg) : 0; 258 }else{ 259 rotateX = followX ? (((box.x + box.width/2 - x) / window.innerWidth) * maxDeg) : 0; 260 rotateY = followY ? (-((box.y + box.height/2 - y) / window.innerHeight) * maxDeg) : 0; 261 } 262 skewX = rotateX / 2; 263 skewY = rotateY / 2; 264 rotateX = rotateX >= 0 ? rotateX : -rotateX; 265 rotateY = rotateY >= 0 ? rotateY : -rotateY; 266 if(animateAxis.includes('top')){ 267 rotateX = -rotateX; 268 skewX = -skewX; 269 } 270 if(animateAxis.includes('right') || animateAxis.includes('center')){ 271 rotateY = -rotateY; 272 skewY = -skewY; 273 } 274 element.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) skewX(${skewX}deg) skewY(${skewY}deg)`; 275 } 276 } 277} 278 279// 2d缩æ¾ææ 280function scale2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 281 let maxScale = modelElement.getAttribute("animateScale") || 1.1; 282 let maxTranslate = modelElement.getAttribute("animateTranslate") || 36; 283 for (let i = 0; i < elementAll.length; i++) { 284 let element = elementAll[i]; 285 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 286 // 设置 3D æ ·å¼ 287 element.style.transition = "transform 0.1s"; 288 // æ·»å é¼ æ äºä»¶ 289 mouseOverContainer.addEventListener("mousemove", (e) => { 290 if (window.innerWidth >= 1200) { 291 window.requestAnimationFrame(function () { 292 transformElement(e.clientX, e.clientY, maxScale,maxTranslate); 293 }); 294 } 295 }); 296 mouseOverContainer.addEventListener("mouseleave", () => { 297 if (window.innerWidth >= 1200) { 298 window.requestAnimationFrame(function () { 299 element.style.transform = "translate(0px, 0px) rotate(0deg)"; 300 }); 301 } 302 }); 303 function transformElement(x, y, maxScale) { 304 let box = element.getBoundingClientRect(); 305 let translateX, translateY, scale; 306 if(isBodyAnimate == 'model'){ 307 translateX = -(2 * (box.x - x) / box.width + 1) * maxTranslate; 308 translateY = -(2 * (box.y - y) / box.height + 1) * maxTranslate; 309 let boxCir = Math.sqrt((box.width * box.width/4) + (box.height * box.height/4)); // çååå¾ 310 let clientSpacing = Math.sqrt(((box.x - x + box.width/2) * (box.x - x + box.width/2)) + ((box.y - y + box.height/2) * (box.y - y + box.height/2))); // é¼ æ å°çåä¸å¿çè·ç¦» 311 let proportion = clientSpacing/boxCir; // é¼ æ å°çåä¸å¿çè·ç¦»å çååå¾çæ¯ä¾ 312 scale = 1 + (proportion * (maxScale - 1)); 313 }else{ 314 translateX = -((box.x + box.width/2 - x) / window.innerWidth) * maxTranslate; 315 translateY = -((box.y + box.height/2 - y) / window.innerWidth) * maxTranslate; 316 let boxCir = Math.sqrt((window.innerWid
316th * window.innerWidth/4) + (window.innerWidth * window.innerWidth/4)); // windowåå¾ 317 let clientSpacing = Math.sqrt(((box.x - x + box.width/2) * (box.x - x + box.width/2)) + ((box.y - y + box.height/2) * (box.y - y + box.height/2))); // é¼ æ å°çåä¸å¿çè·ç¦» 318 let proportion = clientSpacing/boxCir; // é¼ æ å°çåä¸å¿çè·ç¦»å windowåå¾çæ¯ä¾ 319 scale = 1 + (proportion * (maxScale - 1)); 320 } 321 element.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`; 322 } 323 } 324} 325 326 327// 2dæ转ææ 328function rotate2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 329 let maxDeg = modelElement.getAttribute("animateRotate") || 20; 330 for (let i = 0; i < elementAll.length; i++) { 331 let element = elementAll[i]; 332 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 333 // 设置 3D æ ·å¼ 334 element.style.transition = "transform 0.1s"; 335 // æ·»å é¼ æ äºä»¶ 336 mouseOverContainer.addEventListener("mousemove", (e) => { 337 if (window.innerWidth >= 1200) { 338 window.requestAnimationFrame(function () { 339 transformElement(e.clientX, e.clientY, maxDeg); 340 }); 341 } 342 }); 343 mouseOverContainer.addEventListener("mouseleave", () => { 344 if (window.innerWidth >= 1200) { 345 window.requestAnimationFrame(function () { 346 element.style.transform = "rotate(0deg)"; 347 }); 348 } 349 }); 350 function transformElement(x, y, maxDeg) { 351 let box = element.getBoundingClientRect(); 352 let rotate; 353 if(isBodyAnimate == 'model'){ 354 rotate = -(2 * (box.x - x) / box.width + 1) * maxDeg; 355 }else{ 356 rotate = -((box.x + box.width/2 - x) / window.innerWidth) * maxDeg; 357 } 358 element.style.transform = `rotate(${rotate}deg)`; 359 } 360 } 361} 362 363 364// 2dé´å½±ææ 365function shadow2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 366 let maxTranslate = modelElement.getAttribute("animateTranslate") || 36; 367 let maxVague = modelElement.getAttribute("animateVague") || 10; 368 let animateColor = modelElement.getAttribute("animateColor"); 369 animateColor = animateColor?animateColor:'rgba(51, 51, 51, .8)'; 370 for (let i = 0; i < elementAll.length; i++) { 371 let element = elementAll[i]; 372 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 373 element.style.transition = "box-shadow 0.15s"; 374 // æ·»å é¼ æ äºä»¶ 375 mouseOverContainer.addEventListener("mousemove", (e) => { 376 if (window.innerWidth >= 1200) { 377 window.requestAnimationFrame(function () { 378 transformElement(e.clientX, e.clientY, maxTranslate,maxVague,animateColor); 379 }); 380 } 381 }); 382 mouseOverContainer.addEventListener("mouseleave", () => { 383 if (window.innerWidth >= 1200) { 384 window.requestAnimationFrame(function () { 385 element.style.boxShadow = ``; 386 }); 387 } 388 }); 389 function transformElement(x, y, maxTranslate,maxVague,animateColor) { 390 let box = element.getBoundingClientRect(); 391 let shadowX,shadowY,blur=maxVague,boxShadowColor=animateColor; 392 if(isBodyAnimate == 'model'){ 393 shadowX = (2 * (box.x - x) / box.width + 1) * maxTranslate; 394 shadowY = (2 * (box.y - y) / box.height + 1) * maxTranslate; 395 }else{ 396 shadowX = ((box.x + box.width/2 - x) / window.innerWidth) * maxTranslate; 397 shadowY = ((box.y + box.height/2 - y) / window.innerHeight) * maxTranslate; 398 } 399 element.style.boxShadow = `${shadowX}px ${shadowY}px ${blur}px ${boxShadowColor}`; 400 } 401 } 402} 403 404 405// 2då模ç³ææ 406function vague2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 407 let maxVague = modelElement.getAttribute("animateVague") || 4; 408 for (let i = 0; i < elementAll.length; i++) { 409 let element = elementAll[i]; 410 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 411 element.style.transition = "filter 0.15s"; 412 // æ·»å é¼ æ äºä»¶ 413 mouseOverContainer.addEventListener("mousemove", (e) => { 414 if (window.innerWidth >= 1200) { 415 window.requestAnimationFrame(function () { 416 transformElement(e.clientX, e.clientY, maxVague); 417 }); 418 } 419 }); 420 mouseOverContainer.addEventListener("mouseleave", () => { 421 if (window.innerWidth >= 1200) { 422 window.requestAnimationFrame(function () { 423 element.style.filter = ``; 424 }); 425 } 426 }); 427 function transformElement(x, y, maxVague) { 428 let box = element.getBoundingClientRect(); 429 let vagueX,vagueY,vague; 430 if(isBodyAnimate == 'model'){ 431 vagueX = (2 * (box.x - x) / box.width + 1) * maxVague; 432 vagueY = (2 * (box.y - y) / box.height + 1) * maxVague; 433 }else{ 434 vagueX = ((box.x + box.width/2 - x) / window.innerWidth) * maxVague; 435 vagueY = ((box.y + box.height/2 - y) / window.innerHeight) * maxVague; 436 } 437 vague = maxVague - Math.sqrt(vagueX * vagueX + vagueY * vagueY) + 0.2 * maxVague; 438 vague = vague > maxVague ? maxVague : vague; 439 element.style.filter = `blur(${vague}px)`; 440 } 441 } 442} 443 444 445// 2dåæ¸ æ°ææ 446function clarity2DAnimate(modelElement,elementAll,followX,followY,isBodyAnimate) { 447 let maxVague = modelElement.getAttribute("animateVague") || 4; 448 for (let i = 0; i < elementAll.length; i++) { 449 let element = elementAll[i]; 450 let mouseOverContainer = isBodyAnimate == 'body' ? document.body : element.parentElement; 451 element.style.filter = `blur(${maxVague}px)`; 452 element.style.transition = "filter 0.15s"; 453 // æ·»å é¼ æ äºä»¶ 454 mouseOverContainer.addEventListener("mousemove", (e) => { 455 if (window.innerWidth >= 1200) { 456 window.requestAnimationFrame(function () { 457 transformElement(e.clientX, e.clientY, maxVague); 458 }); 459 } 460 }); 461 mouseOverContainer.addEventListener("mouseleave", () => { 462 if (window.innerWidth >= 1200) { 463 window.requestAnimationFrame(function () { 464 element.style.filter = `blur(${maxVague}px)`; 465 }); 466 } 467 }); 468 function transformElement(x, y, maxVague) { 469 let box = element.getBoundingClientRect(); 470 let vagueX,vagueY,vague; 471 if(isBodyAnimate == 'model'){ 472 vagueX = (2 * (box.x - x) / box.width + 1) * maxVague; 473 vagueY = (2 * (box.y - y) / box.height + 1) * maxVague; 474 }else{ 475 vagueX = ((box.x + box.width/2 - x) / window.innerWidth) * maxVague; 476 vagueY = ((box.y + box.height/2 - y) / window.innerHeight) * maxVague; 477 } 478 vague = Math.sqrt(vagueX * vagueX + vagueY * vagueY) - 0.2 * maxVague; 479 vague = vague < 0.5 ? 0 : vague; 480 element.style.filter = `blur(${vague}px)`; 481 } 482 } 483}
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.