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，其z-index比您的身体大一些，或者包含您的渐变但是z-index更低opacity:0 1}}然后是页面内容和div，以便您可以将渐变应用于此body，然后使其可见，最后将渐变应用于div，将其从{{1}中删除并隐藏它。

我知道，因为你不知道如何做到这一点，所以DEMO会帮助你。

但是，我建议不要使用此策略来避免背景渐变过渡，并保持网站现在的状态。

Answer 2

您是否尝试过使用ScrollReveal.js？您应该能够自定义它以便能够转换不同的背景。它允许您通过设置delay属性来控制转换。我在我的一些网页中使用过此库，它非常易于使用，您可以将其传递给几乎任何元素。

将div从一个背景渐变转换为另一个

2 个答案: