從一個背景漸變轉換到另一個

我試圖讓一個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年前。那裏有一些插件或解決方法。預先感謝任何幫助！

來源

2016-04-23 kenef

查看css轉換 – Enrico

首先，創建一個工作代碼片段，以便我們可以工作，其次，不能在CSS（'bla bla'）中使用單行註釋，它必須是多行（'/ * bla bla * /'） – LGSon

我正在使用scss，而不是css。 – kenef

背景漸變不支持transition但你可以破解這個創建另一個div有比你的身體還是什麼包含您的坡度稍大z-index但較低的z-index那麼頁面內容和opacity:0這樣你就可以在梯度適用於本div然後使其可見，最後將梯度應用到body，將其從div中刪除並隱藏它。

我知道從這aswere你沒有得到如何做到這一點，所以這DEMO將幫助你。

但是，我不建議使用此策略來避免背景漸變過渡並保持現在的網站。

來源

2016-04-23 16:17:03 paolobasso

謝謝paolobasso！您的解決方案儘可能最好地工作。我同意這個解決方案是微不足道的。我需要在同一頁面上進行7次這樣的轉換，這樣DOM纔會變得瘋狂。我會向客戶展示這件事，看看他們是否希望我這樣做，或者保持原樣。再次感謝先生！ – kenef

您是否嘗試過使用ScrollReveal.js？您應該能夠自定義它以便能夠轉換不同的背景。它可以讓你通過設置delay屬性來控制轉換。我在我的一些網頁中使用過這個庫，它很容易使用，並且幾乎可以傳遞任何元素。

來源

2017-08-24 02:31:52

從一個背景漸變轉換到另一個

回答

相關問題