1
\$\begingroup\$

Do you have an idea to "transfer" this CSS Code to Javascript (maybe jQuery)?

html { background-color: #B94FC1; }
html:before, html:after { content: ""; height: 100%; width: 100%; position: fixed; z-index: -6; }
html:before { background-image: linear-gradient(to bottom, #5856D6 0%, #C644FC 100%); animation: fgradient 5s linear 0s infinite alternate; }
html:after { background-image: linear-gradient(to bottom, #C643FC 0%, #FF5F37 100%); animation: sgradient 5s linear 0s infinite alternate; }
@keyframes fgradient { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sgradient { 0% { opacity: 0; } 100% { opacity: 1; } }

Fiddle.

I want a transition from a gradient to an other. My own code works well, but I want try the same with Javascript ;)

Hope somebody can help me.

\$\endgroup\$
  • \$\begingroup\$ CAn you pls put your relevant code into the question \$\endgroup\$ – Yvette Colomb Sep 27 '13 at 22:55
2
\$\begingroup\$

using jquery:

html

<div class="gradient one"></div>
<div class="gradient two"></div>

css

html { background-color: #B94FC1; } 
body { margin:0; }
.gradient { content: ""; height: 100%; width: 100%; position: fixed; z-index: -6; }
.gradient.one { background-image: linear-gradient(to bottom, #5856D6 0%, #C644FC 100%);}
.gradient.two { background-image: linear-gradient(to bottom, #C643FC 0%, #FF5F37 100%); display:none; }

javascript

$(function() {
    fadeToggle( $('.gradient.one') );
    fadeToggle( $('.gradient.two') );
});

function fadeToggle(el) {
    el.fadeToggle(5000,null,function() { fadeToggle(el); });
}

fiddle: http://jsfiddle.net/aMVBk/2/

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.