المنتدى

الإشعارات
مسح الكل

[لزجة] مشاركة الرموز

1 مشاركات
1 users
0 Reactions
58 views
ليفي
(@feng)
المشاركات: 12
عضو المسؤول
بداية الموضوع
 

I saw an excellent piece of code on YouTube.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

<script>
const slides = document.querySelectorAll('.slide');
let isMobile = window.innerWidth <= 768; // Assuming mobile width is 768px or less

slides.forEach((slide, i) => {
    let angle = isMobile ? i * 10 : (i * 10) - 10;
    gsap.to(slide, {
        rotation: angle,
        transformOrigin: "0% 2300px",
    });
});

let speed = isMobile ? 30 : 30; // Faster speed on mobile
ScrollTrigger.create({
    trigger: '.scroller',
    start: "top top",
    end: "bottom bottom",
    //markers: true,
    onUpdate: (self) => {
        gsap.to(slides, {
            rotation: (i) => {
                let baseAngle = isMobile ? i * 10 : (i * 10) - 10;
                return baseAngle - self.progress * speed;
            }
        });
    }
});
</script>

 u can try it . it's very  good 

تم تعديل هذا الموضوع مند أسبوع واحد بواسطة ليفي
 
نُشر : 11/10/2024 8:51 م
وسوم الموضوع
شارك:

زر الذهاب إلى الأعلى