OneNav 一为导航添加特别鸣谢效果代码

OneNav V5.56 导航主题

1：在父主题（不推荐）或子主题（推荐）中的 footer.php文件中添加下方引用代码，添加在文件最下方即可；

    // 引用特别鸣谢模块 - 这是添加的代码行
    // 请确保文件路径正确
 include get_template_directory() . '/thanks/thankyou-footer.php';
 show_ad('ad_footer_top',false,'container'); 

2.将文件上传至你的footer.php同级目录（也可以上传至别的路径，记得调整footer.php引用文件路径

点击下载文件源码

也可以直接复制下方thankyou-footer.php内容 ↓ ↓ ↓

<div id="home-row-xie" class="home_row home_row_11 module-html">
    <?php if (is_home()) : ?>
    <div class="content-card">
        <div class="ioui-main">
            <div class="cooperative-block">
                <div class="pic-title">
                    <p class="en">CULTURAL WALL</p>
                    <p class="ch">特别鸣谢</p>
                </div>
                <div class="image-container">
                    <div class="image-scroll animate-scroll" id="scroll1">
                        <img class="scroll-img lazy-load" data-src="/wp-content/themes/onenav/thanks/img/cooperative01.png" alt="合作伙伴">
                        <img class="scroll-img lazy-load" data-src="/wp-content/themes/onenav/thanks/img/cooperative03.png" alt="合作伙伴">
                    </div>
                    <div class="image-scroll reverse animate-scroll" id="scroll2">
                        <img class="scroll-img lazy-load" data-src="/wp-content/themes/onenav/thanks/img/cooperative02.png" alt="合作伙伴">
                        <img class="scroll-img lazy-load" data-src="/wp-content/themes/onenav/thanks/img/cooperative04.png" alt="合作伙伴">
                    </div>
                </div>
            </div>
            <style>:root{--text-color-gray:#afafaf;--text-size-en:48px;--text-size-ch:30px;--img-height:53px;--animation-duration:105s;--gap-size:20px;--container-padding:40px 5px;--opacity-transition:opacity .3s ease-in-out}.content-card{margin:0 auto;padding:0 15px;max-width:var(--home-content-width,1600px);box-sizing:border-box}.cooperative-block{overflow:hidden;position:relative;margin:0 auto;max-width:100%;padding:var(--container-padding);text-align:center}.pic-title p{text-align:center}.pic-title .en{font-size:var(--text-size-en);color:var(--text-color-gray)}.pic-title .ch{font-size:var(--text-size-ch);margin-top:-20px}.image-container{overflow:hidden;position:relative;height:160px;margin:0 auto;max-width:100%;will-change:scroll-position}.image-scroll{display:flex;gap:var(--gap-size);position:absolute;width:max-content}.image-scroll.reverse{top:90px}.scroll-img{height:var(--img-height);object-fit:contain;will-change:transform;opacity:0;transition:var(--opacity-transition);background-color:rgba(245,245,245,0.5);border-radius:4px}.scroll-img.loaded{opacity:1}.scroll-img.loading::before{content:"";display:block;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes scroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}@keyframes scrollReverse{0%{transform:translate3d(-50%,0,0)}100%{transform:translate3d(0,0,0)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.animate-scroll{animation:scroll var(--animation-duration) linear infinite;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.animate-scroll.reverse{animation:scrollReverse var(--animation-duration) linear infinite;will-change:transform}#scroll1:hover,#scroll2:hover{animation-play-state:paused}@media (max-width:768px){:root{--text-size-en:28px;--text-size-ch:22px;--img-height:40px;--animation-duration:80s}.image-container{height:130px}.image-scroll.reverse{top:70px}}@media (max-width:480px){:root{--text-size-en:20px;--text-size-ch:16px;--img-height:30px;--animation-duration:60s}.image-container{height:100px}.image-scroll.reverse{top:50px}}@media (prefers-reduced-motion:reduce){.animate-scroll{animation-duration:200s}}</style>
            <script>document.addEventListener('DOMContentLoaded',function(){const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;const isMobile = window.innerWidth <= 768;const supportsPassive = (function(){let supportsPassive = false;try{window.addEventListener('test',null,Object.defineProperty({},'passive',{get:function(){supportsPassive=true;}}));}catch(e){}return supportsPassive;})();function throttle(func,delay){let inThrottle;return function(){const args=arguments;const context=this;if(!inThrottle){func.apply(context,args);inThrottle=true;setTimeout(()=>inThrottle=false,delay);}};}function debounce(func,wait){let timeout;return function(){const context=this;const args=arguments;clearTimeout(timeout);timeout=setTimeout(()=>func.apply(context,args),wait);};}function setupImageLoad(img){img.classList.add('loading');img.onload=function(){this.classList.add('loaded');this.classList.remove('loading');};img.onerror=function(){this.alt='图片加载失败';this.src='/wp-content/themes/onenav/thanks/img/placeholder.png';this.classList.add('loaded');this.classList.remove('loading');};}const lazyLoadImages=function(){const lazyImages=document.querySelectorAll('.lazy-load:not(.loaded):not(.loading)');if(!lazyImages.length){window.removeEventListener('scroll',throttledLazyLoad);window.removeEventListener('resize',debouncedLazyLoad);document.removeEventListener('orientationchange',debouncedLazyLoad);return;}lazyImages.forEach(img=>{if(isIOS||isMobile){img.src=img.dataset.src;setupImageLoad(img);}else{const rect=img.getBoundingClientRect();const isVisible=rect.top<=window.innerHeight+150&&rect.bottom>=0;if(isVisible){img.src=img.dataset.src;setupImageLoad(img);}}});};const throttledLazyLoad=throttle(lazyLoadImages,200);const debouncedLazyLoad=debounce(lazyLoadImages,300);function cloneImagesForScroll(){const scrollContainers=document.querySelectorAll('.image-scroll');scrollContainers.forEach(container=>{if(!container.dataset.cloned){const images=container.querySelectorAll('.scroll-img');if(images.length>0){const fragment=document.createDocumentFragment();images.forEach(img=>{const clone=img.cloneNode(true);clone.classList.add('lazy-load');clone.classList.remove('loaded');clone.src='';fragment.appendChild(clone);});container.appendChild(fragment);container.dataset.cloned='true';}}});}function optimizeAnimations(){const animateElements=document.querySelectorAll('.animate-scroll');if(isIOS){animateElements.forEach(el=>{el.addEventListener('touchstart',function(){this.style.webkitTransform=this.style.transform;},supportsPassive?{passive:true}:false);el.style.webkitAnimationPlayState='paused';});requestAnimationFrame(()=>{setTimeout(()=>{animateElements.forEach(el=>{el.style.webkitAnimationPlayState='running';el.style.animationPlayState='running';});},100);});}}function preloadNextImages(){const visibleImages=document.querySelectorAll('.scroll-img.loaded');if(visibleImages.length>0){const nextImages=Array.from(visibleImages).slice(-2);nextImages.forEach(img=>{const nextImg=img.nextElementSibling;if(nextImg&&nextImg.classList.contains('lazy-load')&&!nextImg.classList.contains('loading')){setTimeout(()=>{nextImg.src=nextImg.dataset.src;setupImageLoad(nextImg);},300);}});}}function init(){cloneImagesForScroll();lazyLoadImages();window.addEventListener('scroll',throttledLazyLoad,supportsPassive?{passive:true}:false);window.addEventListener('resize',debouncedLazyLoad);document.addEventListener('orientationchange',debouncedLazyLoad);optimizeAnimations();setInterval(preloadNextImages,2000);}if(typeof requestAnimationFrame==='function'){requestAnimationFrame(init);}else{init();}});</script>
        </div>
    </div>
    <?php endif; ?>
</div>

效果展示：