视差滚动效果 Tailwind网站组件

<section id="p2k7j9m4" class="relative h-screen bg-gradient-to-b from-indigo-900 to-purple-900 text-white overflow-hidden"> <div id="l6f3h8v1" class="absolute inset-0"> <div class="absolute top-20 left-20 w-4 h-4 bg-white rounded-full opacity-60"></div> <div class="absolute top-40 right-32 w-2 h-2 bg-white rounded-full opacity-80"></div> <div class="absolute bottom-32 left-16 w-3 h-3 bg-white rounded-full opacity-40"></div> <div class="absolute bottom-20 right-20 w-1 h-1 bg-white rounded-full opacity-90"></div> </div> <div class="relative h-full flex items-center justify-center"> <div class="text-center"> <h1 class="text-6xl md:text-8xl font-bold mb-6">星空漫步</h1> <p class="text-xl md:text-2xl mb-8 opacity-80">在无垠宇宙中寻找方向</p> <button class="bg-gradient-to-r from-pink-500 to-purple-600 px-8 py-4 rounded-full font-semibold hover:from-pink-600 hover:to-purple-700 transition-all transform hover:scale-105"> 开始旅程 </button> </div> </div> </section> <script>
(function() {
                var stars = document.getElementById('l6f3h8v1');
                var lastScrollY = 0;
                
                function updateParallax() {
                    var scrollY = window.pageYOffset;
                    stars.style.transform = 'translateY(' + scrollY * 0.5 + 'px)';
                    lastScrollY = scrollY;
                }
                
                window.addEventListener('scroll', updateParallax);
            })();
</script>