I've been playing around with logic to create a color picker. Hope you all like it!
Forked from Lewi Hussey's Pen Bubble color picker.
A Pen by Cezar Sá Espinola on CodePen.
I've been playing around with logic to create a color picker. Hope you all like it!
Forked from Lewi Hussey's Pen Bubble color picker.
A Pen by Cezar Sá Espinola on CodePen.
<div class="color-picker"></div> |
/* | |
Bubble color picker | |
By @Lewitje | |
Have fun with it! | |
*/ | |
var colorPicker = (function() { | |
var config = { | |
baseColors: [ | |
[46, 204, 113], | |
[52, 152, 219], | |
[155, 89, 182], | |
[52, 73, 94], | |
[241, 196, 15], | |
[230, 126, 34], | |
[231, 76, 60], | |
[180, 180, 180] | |
], | |
lightModifier: 20, | |
darkModifier: 0, | |
transitionDuration: 200, | |
transitionDelay: 25, | |
variationTotal: 10 | |
}; | |
var state = { | |
activeColor: [0, 0, 0] | |
}; | |
function init() { | |
createColorPicker(function() { | |
appendBaseColors(); | |
}); | |
addEventListeners(); | |
setFirstColorActive(function() { | |
setFirstModifiedColorActive(); | |
}); | |
} | |
function setActiveBaseColor(el) { | |
$('.color.active').removeClass('active'); | |
el.addClass('active'); | |
} | |
function setActiveColor(el) { | |
$('.color-var.active').removeClass('active'); | |
el.addClass('active'); | |
state.activeColor = el.data('color').split(','); | |
} | |
function addEventListeners() { | |
$('body').on('click', '.color', function() { | |
var color = $(this).data('color').split(','); | |
setActiveBaseColor($(this)); | |
hideVariations(function() { | |
createVariations(color, function() { | |
setDelays(function() { | |
showVariations(); | |
}); | |
}); | |
}); | |
}); | |
$('body').on('click', '.color-var', function() { | |
setActiveColor($(this)); | |
setBackgroundColor(); | |
}); | |
} | |
function setFirstColorActive(callback) { | |
$('.color').eq(1).trigger('click'); | |
callback(); | |
} | |
function setFirstModifiedColorActive() { | |
setTimeout(function() { | |
$('.color-var').eq(7).trigger('click'); | |
}, 500); | |
} | |
function createColorPicker(callback) { | |
$('.color-picker').append('<div class="base-colors"></div>'); | |
$('.color-picker').append('<div class="varied-colors"></div>'); | |
$('.color-picker').append('<div class="active-color"></div>'); | |
$('.color-picker').append('<div class="color-history"></div>'); | |
callback(); | |
} | |
function appendBaseColors() { | |
for (i = 0; i < config.baseColors.length; i++) { | |
$('.base-colors').append('<div class="color" data-color="' + config.baseColors[i].join() + '" style="background-color: rgb(' + config.baseColors[i].join() + ');"></div>'); | |
} | |
}; | |
function setBackgroundColor() { | |
$('body').css({ | |
'background-color': 'rgb(' + state.activeColor + ')' | |
}); | |
} | |
function createVariations(color, callback) { | |
$('.varied-colors').html(''); | |
for (var i = 0; i < config.variationTotal; i++) { | |
var newColor = []; | |
for (var x = 0; x < color.length; x++) { | |
var modifiedColor = (Number(color[x]) - 100) + (config.lightModifier * i); | |
if (modifiedColor <= 0) { | |
modifiedColor = 0; | |
} else if (modifiedColor >= 255) { | |
modifiedColor = 255; | |
} | |
newColor.push(modifiedColor); | |
} | |
var extraClass = ""; | |
if (newColor[0] > 220 && newColor[1] > 220 && newColor[2] > 220) { | |
extraClass = "light"; | |
} | |
$('.varied-colors').append('<div data-color="' + newColor + '" class="color-var ' + extraClass + '" style="background-color: rgb(' + newColor + ');"></div>'); | |
} | |
callback(); | |
} | |
function setDelays(callback) { | |
$('.color-var').each(function(x) { | |
$(this).css({ | |
'transition': 'transform ' + (config.transitionDuration / 1000) + 's ' + ((config.transitionDelay / 1000) * x) + 's' | |
}); | |
}); | |
callback(); | |
} | |
function showVariations() { | |
setTimeout(function() { | |
$('.color-var').addClass('visible'); | |
}, (config.transitionDelay * config.variationTotal)); | |
} | |
function hideVariations(callback) { | |
$('.color-var').removeClass('visible').removeClass('active'); | |
setTimeout(function() { | |
callback(); | |
}, (config.transitionDelay * config.variationTotal)); | |
} | |
return { | |
init: init | |
}; | |
}()); | |
colorPicker.init(); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
*{ | |
box-sizing: border-box; | |
padding: 0; | |
margin: 0; | |
} | |
body{ | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: 100vh; | |
transition: all 1s; | |
font-family: sans-serif; | |
} | |
.color-picker{ | |
width: 100%; | |
background-color: white; | |
padding: 40px 0; | |
} | |
.base-colors, | |
.varied-colors{ | |
overflow: hidden; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
} | |
.color, | |
.color-var{ | |
float: left; | |
border-radius: 50%; | |
cursor: pointer; | |
} | |
.color{ | |
transition: all .2s; | |
width: 25px; | |
height: 25px; | |
margin: 20px; | |
&.active{ | |
transform: scale(1.3, 1.3); | |
} | |
} | |
.color-var{ | |
transform: scale(0, 0); | |
width: 40px; | |
height: 40px; | |
margin: 10px; | |
&.visible{ | |
transform: scale(1, 1); | |
} | |
&.active{ | |
transform: scale(1.3, 1.3); | |
} | |
&.light{ | |
border: 1px solid #ccc; | |
} | |
} | |
footer{ | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
padding: 20px; | |
color: white; | |
text-align: center; | |
a{ | |
color: white; | |
text-decoration: none; | |
} | |
} |