current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 1 down vote favorite

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.

share|improve this question
    
CAn you pls put your relevant code into the question – user29649 Sep 27 '13 at 22:55
up vote 2 down vote accepted

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/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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