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

OneNav V5.56 导航主题

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

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

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

点击下载文件源码

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

<div id="home-row-xie" class="home_row home_row_11 module-html">
    <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="thanks/img/cooperative01.png" alt="合作伙伴">
                        <img class="scroll-img lazy-load" data-src="thanks/img/cooperative03.png" alt="合作伙伴">
                    </div>
                    <div class="image-scroll reverse animate-scroll" id="scroll2">
                        <img class="scroll-img lazy-load" data-src="thanks/img/cooperative02.png" alt="合作伙伴">
                        <img class="scroll-img lazy-load" data-src="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}.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:40px 5px;text-align:center}.pic-title p{text-align:center}.pic-title .en{font-size:48px;color:#afafaf}.pic-title .ch{font-size:30px;margin-top:-20px}.image-container{overflow:hidden;position:relative;height:160px;margin:0 auto;max-width:100%}.image-scroll{display:flex;gap:20px;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:opacity .3s ease-in-out}.scroll-img.loaded{opacity:1}@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)}}.animate-scroll{animation:scroll var(--animation-duration) linear infinite;will-change:transform}.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:36px;--text-size-ch:24px;--img-height:40px;--animation-duration:80s}.image-container{height:130px}.image-scroll.reverse{top:70px}}@media (max-width:480px){:root{--text-size-en:24px;--text-size-ch:18px;--img-height:30px;--animation-duration:60s}.image-container{height:100px}.image-scroll.reverse{top:50px}}</style>
            <script>document.addEventListener('DOMContentLoaded',function(){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);}}};const lazyLoadImages=function(){const lazyImages=document.querySelectorAll('.lazy-load:not(.loaded)');if(!lazyImages.length){window.removeEventListener('scroll',throttledLazyLoad);window.removeEventListener('resize',throttledLazyLoad);return;}lazyImages.forEach(img=>{const rect=img.getBoundingClientRect();const isVisible=rect.top<=window.innerHeight+300&&rect.bottom>=0;if(isVisible){img.src=img.dataset.src;img.onload=function(){this.classList.add('loaded');};img.onerror=function(){this.alt='图片加载失败';console.warn('图片加载失败:',this.dataset.src);this.classList.add('loaded');};}});};const throttledLazyLoad=throttle(lazyLoadImages,200);const scrollContainers=document.querySelectorAll('.image-scroll');scrollContainers.forEach(container=>{const images=container.querySelectorAll('.scroll-img');if(!container.dataset.cloned){images.forEach(img=>{const clone=img.cloneNode(true);clone.classList.add('lazy-load');clone.classList.remove('loaded');clone.src='';container.appendChild(clone);});container.dataset.cloned='true';}});lazyLoadImages();window.addEventListener('scroll',throttledLazyLoad);window.addEventListener('resize',throttledLazyLoad);});</script>
        </div>
    </div>
</div>

效果展示：