Question

我正在尝试使用我的创意模式并将flexslider与我在codepen here上找到的jquery背景渐变动画结合起来

然而，我认为渐变动画功能以某种方式阻止了柔性滑板的工作。

我怎样才能让它在flexslider后面有背景动画（我将改为白色文字）？

这是我的代码：

<!DOCTYPE html><html lang="en">
    <head>
        <!-- Basic Page Needs
        ================================================== -->
        <meta charset="utf-8" />
        <title>Creative Web Denver</title>
        <meta name="description" />
        <meta name="author" />
        <!-- Mobile Specific Metas
        ================================================== -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <!-- CSS
        ================================================== -->
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald|Open+Sans:400italic,600italic,700italic,400,700,600" />
        <link rel="stylesheet" href="/stylesheets/flexslider.css" />
        <link rel="stylesheet" href="/stylesheets/skeleton.css" />
        <link rel="stylesheet" href="/stylesheets/layout.css" />
        <!-- JS
        ================================================== -->
        <script src="/javascripts/jquery.flexslider.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" charset="utf-8">
          $(window).load(function() {
            $('.flexslider').flexslider();
          });
        </script>
    </head>
    <body>
        <header class="container">
            <div class="sixteen columns">
                <nav>
                    <ul>
                        <li>
                            <a href="http://creativewebdenver.businesscatalyst.com">home</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">services</a>
                        </li>
                        <li>
                            <a href="#">Portfolio</a>
                        </li>
                        <li>
                            <a href="#">Blog</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="four columns">
                <img src="/images/logo.png" id="logo" alt="Creative Web Design Denver Logo"/>
            </div>
        </header>
        <div class="full-width slider-wrapper" id="gradient">
            <div class="container">
                <div class="flexslider">
                  <ul class="slides">
                    <li>
                      <img src="/images/slider/creative-web-design-denver-slide-4.jpg"/>
                    </li>
                    <li>
                      <img src="/images/slider/creative-web-design-denver-slide-2.jpg"/>
                    </li>
                    <li>
                      <img src="/images/slider/creative-web-design-denver-slide-1.jpg"/>
                    </li>
                    <li>
                      <img src="/images/slider/creative-web-design-denver-slide-3.jpg"/>
                    </li>
                  </ul>
                </div>
            </div>
        </div>
        <div class="full-width">
            <div class="container mainbody">
                {tag_pagecontent}
            </div>
        </div>
        <script>

var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);

 $('#gradient').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];

    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

  }
}

setInterval(updateGradient,10);
    //@ sourceURL=pen.js
  </script>
    </body>
</html>

Answer 1

我觉得很傻，但万一有人遇到这个问题，解决方案当然是切换脚本调用;首先调用jquery库，然后调用flexslider。

结合flexslider与背景渐变动画

1 个答案: