將div從一個背景漸變過渡到另一個

Question

我正在嘗試使div從一個背景漸變過渡到另一個。 我有一個磁性滾動效果設置，以便當用戶向下滾動或向下按下箭頭鍵時，h1標題會更改，並且背景漸變會慢慢過渡到另一個漸變。 我的磁性滾動條和h1效果正常。 我什至可以改變背景漸變。 問題是我需要這些過渡才能超級平滑。 目前，它們會閃爍到下一個漸變。 我已經嘗試了各種黑客技術已經有幾個星期了，而且似乎什么也沒用。 訪問alopexid.com實時訪問該項目。

我的jQuery：

jQuery(document).ready(function($) {
$(document).foundation


//find page height
var windowHeight = $('html').height();
//find each line's section height
var pageHeight = windowHeight*7;

//script for scrolling text on home page.
$(window).scroll(function(event){
    var currentHeight = $('body').scrollTop();
    //load in static home page if bottom of scroll is reached
    //alert(currentHeight);
    //grad1
    if (currentHeight == 0 && currentHeight < windowHeight){
        //$(".home-gradient").css("background", "linear-gradient(135deg, #65c9de 0%, #cbd45a 100%)");
        $("#home-gradient").removeAttr('style');
        $(".home-gradient").removeClass('grad2');
        $(".home-gradient").addClass('grad1');
    }
    //grad2
    else if (currentHeight >= windowHeight && currentHeight < windowHeight*2){
        //$(".home-gradient").css("background", "linear-gradient(135deg,  #cbd45a 0%, #009688 100%)");
        $("#home-gradient").removeAttr('style');
        $(".home-gradient").removeClass('grad1');
        $(".home-gradient").removeClass('grad3');
        $(".home-gradient").addClass('grad2');
    }
    //grad3
    else if (currentHeight >= windowHeight*2 && currentHeight < windowHeight*3){
        //$(".home-gradient").css("background", "linear-gradient(135deg,  #009688 0%, #FFC107 100%)");
        $(".home-gradient").removeClass('grad2');
        $(".home-gradient").removeClass('grad4');
        $(".home-gradient").addClass('grad3');
    }
    //grad4
    else if (currentHeight >= windowHeight*3 && currentHeight < windowHeight*4){
        //$(".home-gradient").css("background", "linear-gradient(135deg,  #FFC107 0%, #E91E63 100%)");
        $(".home-gradient").removeClass('grad3');
        $(".home-gradient").removeClass('grad5');
        $(".home-gradient").addClass('grad4');
    }
    //grad5
    else if (currentHeight >= windowHeight*4 && currentHeight < windowHeight*5){
        //$(".home-gradient").css("background", "linear-gradient(135deg,  #E91E63 0%, #9C27B0 100%)");
        $(".home-gradient").removeClass('grad4');
        $(".home-gradient").removeClass('grad6');
        $(".home-gradient").addClass('grad5');
    }
    //grad6
    else if (currentHeight >= windowHeight*5 && currentHeight < windowHeight*6){
        //$(".home-gradient").css("background", "linear-gradient(135deg,  #9C27B0 0%, #65c9de 100%)");
        $(".home-gradient").removeClass('grad5');
        $(".home-gradient").addClass('grad6');
    }
    //grad1
    else if (currentHeight >= windowHeight*6) {
        $(".home-gradient").removeClass('grad6');
        $(".home-gradient").addClass('grad1');
        $("#scroll-text").text("We are Alopex.");
        $(".home-big-gradient").css("display", "none");
        $(".home-gradient").css("display", "block");
        $("#frame-logo").hide();
        $("#scroll-guide").hide();
        $(".header").show(1500);
        $("#skip-intro").hide();
        $('#weather-color').css('display', 'block');
        $('#scroll-text').css('display', 'block');
        window.magneticScroll = undefined;

        return;
    }
});

我的HTML：

    <div class="home-gradient" id="home-gradient">
</div>
<div class="home-big-gradient">
    <h1 class="magnetic">We are Alopex.</h1>
    <h1 class="magnetic">A digital marketing firm.</h1>
    <h1 class="magnetic">Building websites & apps.</h1>
    <h1 class="magnetic">In Palmer, Alaska.</h1>
    <h1 class="magnetic">Some of us are designers.</h1>
    <h1 class="magnetic">Some of us are developers.</h1>
    <h1 class="magnetic">We are Alopex.</h1>
</div>

我的CSS：

.home-gradient {
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    opacity: .75;
    position: fixed;
}
.grad1 {
    background: rgb(101, 201, 222);
    background: -moz-linear-gradient(-45deg,  rgba(101, 201, 222, 1) 0%, rgba(203, 212, 90, 1) 100%); /* FF3.6-15 *///rgba(101, 201, 222, 1) #65C9DE | rgba(203, 212, 90, 1) #CBD45A
    background: -webkit-linear-gradient(-45deg,  rgba(101, 201, 222, 1) 0%, rgba(203, 212, 90, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(101, 201, 222, 1) 0%, rgba(203, 212, 90, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-image: -webkit-linear-gradient(-45deg, #65c9de 0%, #cbd45a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65c9de', endColorstr='#cbd45a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad2 {
    background: rgb(203, 212, 90);
    background: -moz-linear-gradient(-45deg,  rgba(203, 212, 90, 1) 0%, rgba(0, 150, 136, 1) 100%); /* FF3.6-15 *///rgba(203, 212, 90, 1) #CBD45A | rgba(0, 150, 136, 1) #009688
    background: -webkit-linear-gradient(-45deg,  rgba(203, 212, 90, 1) 0%, rgba(0, 150, 136, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(203, 212, 90, 1) 0%, rgba(0, 150, 136, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd45a', endColorstr='#009688',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad3 {
    background: rgb(0, 150, 136);
    background: -moz-linear-gradient(-45deg,  rgba(0, 150, 136, 1) 0%, rgba(255, 193, 7, 1) 100%); /* FF3.6-15 */// rgba(0, 150, 136, 1) #009688 | rgba(255, 193, 7, 1) #FFC107
    background: -webkit-linear-gradient(-45deg,  rgba(0, 150, 136, 1) 0%, rgba(255, 193, 7, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(0, 150, 136, 1) 0%, rgba(255, 193, 7, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009688', endColorstr='#FFC107',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad4 {
    background: rgb(255, 193, 7);
    background: -moz-linear-gradient(-45deg,  rgba(255, 193, 7, 1) 0%, rgba(233, 30, 99, 1) 100%); /* FF3.6-15 */// rgba(255, 193, 7, 1) #FFC107 | rgba(233, 30, 99, 1) #E91E63
    background: -webkit-linear-gradient(-45deg,  rgba(255, 193, 7, 1) 0%, rgba(233, 30, 99, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(255, 193, 7, 1) 0%, rgba(233, 30, 99, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFC107', endColorstr='#E91E63',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad5 {
    background: rgb(233, 30, 99);
    background: -moz-linear-gradient(-45deg,  rgba(233, 30, 99, 1) 0%, rgba(156, 39, 176, 1) 100%); /* FF3.6-15 */// rgba(233, 30, 99, 1) #E91E63 | rgba(156, 39, 176, 1) #9C27B0
    background: -webkit-linear-gradient(-45deg,  rgba(233, 30, 99, 1) 0%, rgba(156, 39, 176, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(233, 30, 99, 1) 0%, rgba(156, 39, 176, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E91E63', endColorstr='#9C27B0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad6 {
    background: rgb(156, 39, 176);
    background: -moz-linear-gradient(-45deg,  rgba(156, 39, 176, 1) 0%, rgba(101, 201, 222, 1) 100%); /* FF3.6-15 */// rgba(156, 39, 176, 1) #9C27B0 | rgba(101, 201, 222, 1) #65C9DE
    background: -webkit-linear-gradient(-45deg,  rgba(156, 39, 176, 1) 0%, rgba(101, 201, 222, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(156, 39, 176, 1) 0%, rgba(101, 201, 222, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9C27B0', endColorstr='#65c9de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.home-big-gradient {
    /*this is changed to block in desktop below around line 337*/
    display: none;
}

這里的任何幫助將是驚人的。 我已經讀過很多關於這不可能的評論，但這些評論大多是在2至5年前。 那里必須有某種插件或解決方法。 在此先感謝您的幫助！

Answer 1

背景漸變不支持transition但您可以修改此背景，以創建另一個div ，該div的z-index大於您的身體或包含漸變的元素，但其z-index比頁面內容和opacity:0因此您可以應用漸變然后對該div使其可見，最后將漸變應用於body ，將其從div刪除並隱藏。

我知道從此開始您將不知道如何執行此操作，因此此DEMO將為您提供幫助。

但是，我不建議您使用這種策略來避免背景漸變過渡並使網站保持現狀。

Answer 2

您是否嘗試過使用ScrollReveal.js ？ 您應該能夠對其進行自定義，以便能夠轉換不同的背景。 它將允許您通過設置delay屬性來控制過渡。 我已經在某些網頁中使用了此庫，它非常易於使用，您幾乎可以將其傳遞給任何元素。