افکت منو در زمان اسکرول

[shelakhteh 4]

سلام دوستان

میشه راهنمایی کنید چطوری می تونم افکتی منوی پرس تی وی https://www.presstv.com رو وقتیکه اسکرول میکنیم پایین رو پیاده سازی کنم. وقتی اسکرول میشه یک انحنایی دو طرفش ایجاد میشه.این کدهای منوی من:

<div class="menu-container">
    <div class="container">
        <div class="menu-bg">          
            <div class="menu">
                <ul>
                    <li>
                        <a href="#">لینک</a>
                    </li>
                    <li>
                        <a href="#">لینک</a>
                    </li>
                    <li>
                        <a href="#">لینک</a>
                    </li>
                    <li>
                        <a href="#">لینک</a>
                    </li>
                    <li>
                        <a href="#">لینک</a>
                    </li>
                </ul>
            </div>
            <ul>
            </ul>
        </div>
    </div>
</div>

.menu-container {
    float: right;
    width: 100%;
    height: auto;
    background-color: #fff;
}
.menu-bg {
    width: 100%;
}
.menu {
    float: right;
    margin-right: 20px;
}

 

[asadiy4n 2807]

سلام به خود وبسایت کاری نداریم اما شما ابتدا از طریق یک این کد کوتاه مشخص میکنید که چه زمان یک کلاس اضافه و یا حذف بشه

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".menu-container").addClass("menu-container-new");
    } else {
        $(".menu-container").removeClass("menu-container-new");
    }
});

حالا به کلاس هایی که قرار هست اضافه و حذف بشن استایل دلخواه خودتون رو میدین

برای منحنی و سایر اشکال هم میتونید از فرمت svg استفاده کنید و یا از plygon توی گوگل جستجو کنید نمونه های زیادی ازشون موجوده

ویرایش شده خرداد 99 توسط asadiy4n

[shelakhteh 4]

در 15 ساعت قبل، asadiy4n گفته است :

سلام به خود وبسایت کاری نداریم اما شما ابتدا از طریق یک این کد کوتاه مشخص میکنید که چه زمان یک کلاس اضافه و یا حذف بشه

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".menu-container").addClass("menu-container-new");
    } else {
        $(".menu-container").removeClass("menu-container-new");
    }
});

حالا به کلاس هایی که قرار هست اضافه و حذف بشن استایل دلخواه خودتون رو میدین

برای منحنی و سایر اشکال هم میتونید از فرمت svg استفاده کنید و یا از plygon توی گوگل جستجو کنید نمونه های زیادی ازشون موجوده

ممنون از پاسختون. من با فیکس شدن منو مشکلی ندارم و کدی که در پوسته ام استفاده کردم مثل شماست که لطف کردید و نوشتید. مهم او افکتی هست که اجرا میشه که من نتونستم پیداش کنم. اگر نمونه دارید لطفا بهم بدید.

ممنون

[asadiy4n 2807]

بیینید شما به کلاس menu-container-new یک clip-path اضافه میکنید که  و از طریق کد بالا بهش میگید که کی اضافه بشه و کی حذف بشه

این چند نمونه بسیار خوب هست که ببینید چه چیزهایی میشه باهاش ساخت

https://codepen.io/Deeply/pen/zYYbXRz
https://codepen.io/chriscoyier/pen/wBKPOm
https://codepen.io/GhostRider/pen/tEcCq

 

ویرایش شده تیر 99 توسط asadiy4n