Papermashup

Subscribe


Tweets


"RT @cpray86: Good to see the receptionist's Jpeg of an Excel file is coming along nicely... #TheApprentice https://t.co/uiPGhf64U3"

@ashleyford 1 day ago

"Translation wrong for this paper it should be: Bitte nicht den Horror-Clown (Please not the Horror-clown) https://t.co/RYOD6aND6s via @bandt"

@ashleyford 3 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Shuffling through CSS background gradients

Using uigradients.com as inspiration to shuffle through gradient transitions

AshleyAshley

UiGradients.com┬áis a great little resource for finding inspiration for CSS background gradient colours, and it makes it super easy to get the CSS to paste in your project. So here’s an awesome tool that shuffles through the gradient colours with a fade transition. We take the json file from the git repo and use that to loop through the gradients.

The HTML



<div class="helper"><!-- This helper div is needed to animate the gradients, as a linear-gradient is not transitionable --></div>
<div class="title">Dance To Forget
<small><a href="http://uigradients.com/#DanceToForget">http://uigradients.com/#DanceToForget</a><br/>

<span class="colors">#FF4E50 - #F9D423</span> </small></div>

The JS



var uiGradientsUrl = 'http://papermashup.com/demos/ui-gradient-shuffle/js/gradients.json';

var html = $('html'),
helper = $('.helper'),
title = $('.title'),
gradientsList,
activeGradient,
i = 0;

$.getJSON(uiGradientsUrl, function(data) {
gradientsList = data;
// Shuffle Array
gradientsList.sort(function() { return 0.5 - Math.random() });
});

var bgChangeInterval = setInterval(function(){
// Get gradient
activeGradient = gradientsList[i];

// Create link to uigradients.com
var link = 'http://uigradients.com/#' + activeGradient.name.replace(/\s+/g, '');
title.html(activeGradient.name + '<br><small><a href="'+link+'">'+link+'</a></small><br/><span class="colors">' + activeGradient.colors[0] + ' - ' + activeGradient.colors[1] + '</span>');

// Flip target for transition
var target = html;
helper.removeClass('active');

if (i%2 == 0){
target = helper;
html.removeClass('active');
}

// Set new gradient
target.css({
'background' : activeGradient.colors[0] ,
'background' : 'linear-gradient(to left, ' + activeGradient.colors[0] + ' ,' + activeGradient.colors[1] + ')'
}).addClass('active');

// Set i to next i - if not the last one
i = ( gradientsList.length < i ? 0 : i);
i++;

title.fadeIn();

}, 3000);

 

Demo Download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 0
There are currently no comments.