Develop Reference

Text Gradient animation on scroll

Trying to replicate same functionality as https://www.apple.com/uk/ipad-air/ where as you scroll the text gradient changes. Scroll down to "Powerful. Colourful. Wonderful" to see the effect I'm trying to replicate. I know how to do a regular linear gradient (https://codepen.io/laluuk/pen/xxOwxGv) but how do I change it on scroll, I'm guessing I have to use JS/jQuery scroll but don't really know how to. Would greatly appreciate some assistance...
<section class="text-1">
<h1>Powerful.</h1>
</section>
<section class="text-2">
<h1>Wonderful.</h1>
</section>
section {
height: 100vh;
}
.text-1 {
text-transform: uppercase;
background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 72px;
font-family: "Poppins", sans-serif;
}
.text-2 {
text-transform: uppercase;
background: linear-gradient(to right, #11825b 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 72px;
font-family: "Poppins", sans-serif;
}

i got something like that:
const textElement1 = document.querySelector('.text-1');
const textElement2 = document.querySelector('.text-2');
document.onscroll = () => {
const textElement1DistanceFromTop = textElement1.getBoundingClientRect().top;
const textElement2DistanceFromTop = textElement2.getBoundingClientRect().top;
const { clientHeight } = document.documentElement;
if (textElement1DistanceFromTop > clientHeight || textElement2DistanceFromTop < 0) return;
const startPrecent = textElement2DistanceFromTop / 4 + '%';
const endPrecent = textElement2DistanceFromTop / 4 + 100 + '%';
textElement1.style.backgroundImage = `
linear-gradient(to right, #30cfd0 ${startPrecent},#330867 ${endPrecent})`;
textElement2.style.backgroundImage = `
linear-gradient(to right, #11825b ${startPrecent},#330867 ${endPrecent})`;
}
just play with the precentage math

Single line with multiple colors based on time in using jquery

I need to generate a graph like I have shown here
Single line with multiple colors over time
The X axis will be time series . Can anyone suggest a JQuery plugin to generate such a graph ?
Thanks

Try below chart and change as per your requirement
var graph = (function(){
var urgentTitle = "Urgent",
$graph = $('.graph'),
$barContainer = $graph.find('.graph-bars'),
$markers = $('.markers'),
$graphTitles = $('.graph-titles'),
max = null,
limit = null;
var init = function(data){
max = getMaxValue(data);
limit = max + Math.ceil(max * 0.05);
$barContainer.empty();
$markers.empty();
$graphTitles.empty();
$('#urgent-title').text(urgentTitle);
setMarkers($markers, limit);
if (data.length) buildTeamRows($barContainer, $graphTitles, data, limit);
else buildUserRows($barContainer, $graphTitles, data, limit);
};
// return a values percentage in relation to the limit
var getPercentage = function(value, limit) {
return value / limit * 100 + "%";
};
var getMaxValue = function(data) {
var largest = 0;
var sum = 0;
if (data.length) {
for (x=0;x<data.length;x++) {
sum = data[x].active + data[x].newCount + data[x].newFromBatch;
if (sum > largest) {
largest = sum;
}
}
} else {
largest = Math.max(data.active, data.newCount, data.newFromBatch);
}
return largest;
};
var setMarkers = function($selector, limit) {
var increment = limit / 5;
var value = 0;
var values = [];
var leftOffset = 0;
// Create array of marker values
while(value < limit) {
values.push(Math.round(value));
value += increment;
}
values.push(limit);
for (var x=0;x<values.length;x++) {
var $markerTmpl = $('<div class="marker"><span class="marker-number"></span></div>');
leftOffset = getPercentage(values[x], limit);
$markerTmpl.css({ 'left': leftOffset }).find('.marker-number').text(values[x]);
$selector.append($markerTmpl);
}
$selector.addClass('loaded');
};
//Build each individual graph based on selector, data, and max value
var buildTeamRows = function($barSelector, $titleSelector, data, limit) {
var percentage;
// Loop through data
for (var x=0;x<data.length;x++) {
var titleClass = null;
var titleCount = 0;
var $graphBar = $('<div class="graph-bar"></div>')
.attr('id', 'userGraph-' + data[x].userId);
$barSelector.append($graphBar);
// Render each fragment
renderFragment($graphBar, 'urgent', data[x].urgent, limit);
renderFragment($graphBar, 'active', data[x].active - data[x].urgent, limit);
renderFragment($graphBar, 'newCount', data[x].newCount, limit);
renderFragment($graphBar, 'newFromBatch', data[x].newFromBatch, limit);
// Calculate largest fragment value
var largest = 0;
$.each(data[x], function(index, value){
if ($.isNumeric(value)){
if (value > largest) {
largest = value;
titleClass = index;
titleCount = value;
}
}
});
// If Active is greatest value, Check if urgent portion of active is greater than active
if (titleClass === 'active' && data[x].urgent >= (data[x].active - data[x].urgent)) {
titleClass = 'urgent';
titleCount = data[x].urgent;
}
// Render row meta-data
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(data[x].userName);
$titleSet.find('.graph-title-count').addClass(titleClass).text(titleCount);
$titleSelector.append($titleSet);
}
};
var renderFragment = function($selector, type, value, limit) {
var $rowFragmentTmpl = $('<div class="graph-bar-fragment"></div>');
var percentage = getPercentage(value, limit);
$rowFragmentTmpl.attr('data-value', value);
$selector.append($rowFragmentTmpl.addClass(type));
setTimeout(function(){
$rowFragmentTmpl.css({'width': percentage});
}, 1);
};
var buildUserRows = function($barSelector, $titleSelector, data, limit) {
renderUserRow($barSelector, $titleSelector, 'urgent', data.urgent, limit, urgentTitle);
renderUserRow($barSelector, $titleSelector, 'active', data.active, limit, 'Active');
renderUserRow($barSelector, $titleSelector, 'newCount', data.newCount, limit, 'New');
renderUserRow($barSelector, $titleSelector, 'newFromBatch', data.newFromBatch, limit, 'New From Batch');
};
var renderUserRow = function($barSelector, $titleSelector, type, value, limit, title) {
var percentage = getPercentage(value, limit);
var $graphBar = $('<div class="graph-bar graph-bar-single"></div>').attr({'id' : 'userGraph-' + type, 'data-value': value});
$barSelector.append($graphBar);
setTimeout(function(){
$graphBar.css({'width': percentage}).addClass(type);
},1);
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(title);
$titleSet.find('.graph-title-count').addClass(type).text(value);
$titleSelector.append($titleSet);
};
return {
init: init
}
})();
// Document ready
$(function(){
// Dummy Data
var dataSet = [
{
active: 5,
newCount: 4,
newFromBatch: 40,
urgent: 1,
userId: "molly",
userName: "Molly"
},
{
active: 21,
newCount: 2,
newFromBatch: 5,
urgent: 10,
userId: "jack",
userName: "Jack"
},
{
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "tracy",
userName: "Tracy"
},
{
active: 10,
newCount: 24,
newFromBatch: 4,
urgent: 2,
userId: "nolan",
userName: "Nolan"
},
];
var dataSingle = {
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "ryan",
userName: "Ryan Scofield"
};
// Initialize Graph
graph.init(dataSet);
$('#teamGraph').on('click', function(e){
graph.init(dataSet);
});
$('#userGraph').on('click', function(e){
graph.init(dataSingle);
});
});
body {
padding: 20px;
}
/* Opportunity Graphs */
.graph-titles {
display: inline-block;
width: 200px;
vertical-align: top;
margin: 20px 0 20px;
padding: 0;
}
.graph-title {
margin-bottom: 1em;
width: 100%;
line-height: 30px;
overflow: hidden;
}
.graph-title-name {
float: left;
}
.graph-title-count {
float: right;
padding: 0 10px;
height: 30px;
border-radius: 20px;
color: #fff;
}
.graph {
display: inline-block;
position: relative;
margin: 20px 20px 20px 10px;
padding: 0;
width: 500px;
}
.graph-bar {
display: block;
overflow: hidden;
margin-bottom: 1em;
}
.graph-bar-fragment {
width: 0;
height: 30px;
float: left;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
}
.graph-bar-single {
height: 30px;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.graph-bar-fragment:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.urgent {
background: #c9575e;
background: -moz-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9575e), color-stop(100%, #c12e41));
background: -webkit-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -o-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -ms-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: linear-gradient(to bottom, #c9575e 0%, #c12e41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9575e', endColorstr='#c12e41',GradientType=0 );
}
.active {
background: #d6ac6e;
background: -moz-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6ac6e), color-stop(100%, #cc9e52));
background: -webkit-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -o-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -ms-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: linear-gradient(to bottom, #d6ac6e 0%, #cc9e52 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6ac6e', endColorstr='#cc9e52',GradientType=0 );
}
.newCount {
background: #6db683;
background: -moz-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db683), color-stop(100%, #569b6d));
background: -webkit-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -o-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -ms-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: linear-gradient(to bottom, #6db683 0%, #569b6d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db683', endColorstr='#569b6d',GradientType=0 );
}
.newFromBatch {
background: #7f8cc4;
background: -moz-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8cc4), color-stop(100%, #6477ac));
background: -webkit-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -o-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -ms-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: linear-gradient(to bottom, #7f8cc4 0%, #6477ac 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8cc4', endColorstr='#6477ac',GradientType=0 );
}
.markers {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .4s ease-in;
}
.markers.loaded {
visibility: visible;
opacity: 1;
}
.marker {
-webkit-box-sizing: border-box;
position: absolute;
bottom: -2em;
top: 0;
border-left: 2px solid #e6e6e6;
}
.marker-number {
position: absolute;
padding-left: .5em;
bottom: 0;
text-align: right;
}
.marker:last-child .marker-number {
right: 0;
padding-left: 0;
padding-right: .5em;
}
.graph-key {
margin: 20px 0 0 210px;
}
.graph-key-item {
display: inline-block;
margin-right: 1.5em;
}
.graph-key-dot {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
margin-right: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph-container">
<div class="graph-titles">
<!-- Populated -->
</div>
<div class="graph">
<div class="graph-bars">
<!-- Populated -->
</div>
<div class="markers">
<!-- Populated -->
</div>
</div>
<div class="graph-key">
<div class="graph-key-item">
<span class="graph-key-dot urgent"></span><span id="urgent-title">Urgent</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot active"></span><span>Active</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newCount"></span><span>New</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newFromBatch"></span><span>New From Batch</span>
</div>
</div>
</div>
<button id="teamGraph">Team Graph</button>
<button id="userGraph">User Graph</button>

Try below chart and change value as per your requirement
var chart = new Chartist.Bar('#chart01',
{
labels: ['C-Level', 'Executive', 'Director', 'Manager', 'Professional', 'Other'],
series: [
[3,9,5,8,4,2],
[2,8,4,19,25,6],
[2,16,6,53,57,12]
]
},
{
stackBars: true,
seriesBarDistance: 10,
reverseData: false,
horizontalBars: true,
low: 0,
fullWidth: true,
chartPadding: {
right: 30,
left: 30
},
axisX: {
showGrid: true,
showLabel: true
},
axisY: {
showGrid: false,
showLabel: true,
offset: 60,
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value;
}
}
});
$('#chart01').on('click', '.ct-chart-bar .ct-labels foreignobject', function(evt) {
var index = $(this).index();
var label = $(this).find('span.ct-label').text();
graphClicked(index, label, null);
});
$('#chart01').on('mouseover', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').addClass('hover');
});
$('#chart01').on('mouseleave', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').removeClass('hover');
});
$('#chart01').on('click', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
var label = $(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').text();
var value = $(this).attr('ct:value');
graphClicked(index, label, value);
});
function graphClicked(index, label, value) {
console.log('---');
console.log('index:', index);
console.log('label:', label);
alert('Index: '+index+', Label: '+label+', Value: '+value);
}
html {
background-color: lightgrey;
}
.chart-wrapper {
width: 50%;
margin: 1rem auto;
background-color: white;
padding: 0.1rem 0.5rem 1rem 0.5rem;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
.center-link {
text-align: center;
display: block;
font-size: 0.7rem;
}
.ct-line {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
}
.ct-series-a .ct-line {
animation: dash 5s linear forwards;
animation-delay: 1s;
}
.ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-bar {
stroke: #5b9bd5;
}
.ct-series-b .ct-line {
animation: dash 5s linear forwards;
animation-delay: 2s;
}
.ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-bar {
stroke: #ed7d31;
}
.ct-series-c .ct-line {
animation: dash 5s linear forwards;
animation-delay: 3s;
}
.ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-bar {
stroke: #a5a5a5;
}
.chart-title {
text-align: center;
color: #555;
margin-bottom: 0.5rem;
}
.key {
font-size: 0.7rem;
color: #555;
padding: 0 30px 0 90px;
}
.key .key-element {
width: 32%;
display: inline-block;
padding-left: 22px;
box-sizing: border-box;
position: relative;
}
.key .key-element:before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -2px;
left: 0;
}
.key .key-element.key-series-a:before {
background-color: #5b9bd5;
}
.key .key-element.key-series-b:before {
background-color: #ed7d31;
}
.key .key-element.key-series-c:before {
background-color: #a5a5a5;
}
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
display: block;
position: relative;
left: -50%;
text-align: center;
}
.ct-chart-bar .ct-labels foreignobject {
cursor: pointer;
}
.ct-chart-bar .ct-labels foreignobject span {
text-decoration: none;
}
.ct-chart-bar .ct-labels foreignobject span:hover, .ct-chart-bar .ct-labels foreignobject span.hover {
text-decoration: underline;
}
.ct-chart-bar .ct-series line {
cursor: pointer;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css" rel="stylesheet" />
<div class="chart-wrapper">
<h4>Click on the bars to get their index, label and value</h4>
<div id="chart01" class="ct-chart ct-chart01 ct-octave"></div>
<div class="key">
<div class="key-element key-series-a">Account Topic Score</div>
<div class="key-element key-series-b">#Unique Contacts</div>
<div class="key-element key-series-c">#Interactions</div>
</div>
</div>

Transition div from one background gradient to another

I'm trying to get a div to transition from one background gradient to another. I have a magnetic scroll effect setup so that when the user scrolls down, or hits the arrow key down, the h1 title changes and the background gradient slowly transitions to another gradient. I have the magnetic scroll and h1 effects working fine. I even have the background gradients changing when they're supposed to. The problem is that I need these transitions to be super smooth. Currently they flash to the next gradient. I've been trying all kinds of hacks for a couple weeks now and can't seem to get anything to work. Visit the project live at alopexid.com.
My 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;
}
});
My 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>
My 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;
}
Any help here would be amazing. I've read lots of comments about this not being possible but those are mostly from 2 to 5 years ago. There's got to be some kind of plugin or workaround out there. Thanks in advance for any help!

background gradient doesn't support transition but you could hack this creating another div that has a z-index bigger than your body or what contain your gradient but a lower z-index then the page content and opacity:0 so you can apply the gradient to this div then make it visible and finally apply the gradient to the body, delete it from the div and hide it.
I know that from this aswere you don't get how to do this so this DEMO will help you.
However I don't advice to use this strategy to avoid background gradient transition and keep the site as it is now.

Have you tried using ScrollReveal.js? You should be able to customize it to be able to transition the different backgrounds. And it would allow you to control the transitions by setting the delay property. I've used this library in some of my web pages and it's very easy to use, and you can pass it almost any element.

JavaScript gallery moves with sticky header

I have a "Sticky" header and a simple JavaScript gallery. The problem is when i move my page down the header and the gallery both move down.
Here is the JavaScript for the Gallery:
<script language="JavaScript">
var i = 0; var path = new Array();
path[0] = "photo1.png";
path[1] = "photo2.jpg";
path[2] = "photo3.jpg";
path[3] = "photo4.jpg";
path[4] = "photo5.jpg";
path[5] = "photo6.jpg";
path[6] = "photo7.jpg";
function swapImage()
{
document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()",2000);
}
window.onload=swapImage;
</script>
and the CSS for the header:
#header_container {
background: #b8df50;
background: -moz-linear-gradient(top, #b8df50 0%, #93ad4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8df50), color-stop(100%,#93ad4c));
background: -webkit-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -o-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -ms-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: linear-gradient(to bottom, #b8df50 0%,#93ad4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8df50', endColorstr='#93ad4c',GradientType=0 );
border:1px solid #666;
height:120px;
left:0;
position:fixed;
width:100%;
top:0;
}

Please check this link:
Demo
JavaScript Code
(function(win){
var i = 0, path = new Array();
path[0] = "https://www.google.co.in/images/srpr/logo11w.png";
path[1] = "http://www.findthatlogo.com/wp-content/gallery/microsoft-logos/microsoft-logo-icon.png";
path[2] = "http://allenmeyerdesign.com/wp-content/uploads/2013/09/new-yahoo-logo.jpg";
path[3] = "http://images2.fanpop.com/images/photos/4200000/old-apple-logo-apple-4235002-294-394.jpg";
win.swapImage = function ()
{
document.getElementById('slide').src = path[i];
if(i < path.length - 1) {
i++;
}
else {
i = 0;
}
setTimeout(function() {
win.swapImage();
},2000);
}
win.swapImage();
})(window);
HTML
<div id="header_container"></div>
<div class="slide-div">
<img id="slide"/>
</div>
CSS
#header_container {
background: #b8df50;
background: -moz-linear-gradient(top, #b8df50 0%, #93ad4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8df50), color-stop(100%,#93ad4c));
background: -webkit-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -o-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -ms-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: linear-gradient(to bottom, #b8df50 0%,#93ad4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8df50', endColorstr='#93ad4c',GradientType=0 );
border:1px solid #666;
height:120px;
left:0;
position:fixed;
width:100%;
top:0;
}
div.slide-div {
margin: 150px auto 0;
height: 2000px;
}
Thanks!!!

How set google visualization chart from zero

I have example from Google visualization, which draw chart on HTML page:
column2 equals 120
column3 equals 125
But in this example value start from 118.
How change code, that value start from 0 (X-axis) ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Report</title>
<style>
#Header {
height:40px;
font-size:24px;
padding-left:5px;
padding-top:5px;
color:#FFFFFF;
background: ff0022; /* For old browser */
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #FF0022),
color-stop(0.80, #FFFCFD)
);
background-image: -o-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: -moz-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: -webkit-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: -ms-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: linear-gradient(to right, #FF0022 0%, #FFFCFD 80%);
}
#BodyEmail
{
font-size:17px;
margin-left:10px;
}
.successful
{
color:#339900;
}
.failed
{
color:#CC0000;
}
#chart
{
width:80%;
margin-left:30px;
margin-top:10px;
}
</style>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(tfsTimeBuildDefinition);
function tfsTimeBuildDefinition() {
var data = google.visualization.arrayToDataTable([
['Column1', 'Column2','Column3'],
['', 120,125]
]);
var options = {
title: 'Total time',
hAxis: {title: 'Test'},
vAxis: {title: 'Spent time (sec)'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('testChart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="testChart" style="width: 700px; height: 400px;"></div>
</body>
</html>

Check this solution, I hope it would help you,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RRD.ActiveLink report</title>
<style>
#Header {
height:40px;
font-size:24px;
padding-left:5px;
padding-top:5px;
color:#FFFFFF;
background: ff0022; /* For old browser */
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #FF0022),
color-stop(0.80, #FFFCFD)
);
background-image: -o-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: -moz-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: -webkit-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: -ms-linear-gradient(right, #FF0022 0%, #FFFCFD 80%);
background-image: linear-gradient(to right, #FF0022 0%, #FFFCFD 80%);
}
#BodyEmail
{
font-size:17px;
margin-left:10px;
}
.successful
{
color:#339900;
}
.failed
{
color:#CC0000;
}
#chart
{
width:80%;
margin-left:30px;
margin-top:10px;
}
</style>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(tfsTimeBuildDefinition);
function tfsTimeBuildDefinition() {
var data = google.visualization.arrayToDataTable([
['Column1', 'Column2','Column3'],
['', 10,125]
]);
var options = {
title: 'Total time',
hAxis: {title: 'Test'},
vAxis: {title: 'Spent time (sec)'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('testChart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="testChart" style="width: 700px; height: 400px;"></div>
</body>
</html>
Just changed a little.