<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<div class = "controls">
<div class = "opt" id = "wildside">
Mono
  </div>

<div class = "opt"  id = "deep">
Spectral
  </div>
<div class = "opt" id = "playful">
Sunset
  </div>
</div>
<div id = "app">




<!-- <div id = "programming"> programming
  </div> -->
  <div id = "cc" >  Imagination  </div>


</div> <!-- end app -->
/*SETUP*/

html {
box-sizing: border-box;

}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{

/* background-color: rgba(49, 93, 127, .9); */
  background-color: #4F0010;
/*  background-color: rgba(202, 251, 229, .3); */
  
font-family: 'Oswald';
color:#FFFFF8;
font-size: 3.1vw;
width: 100%;
margin:auto;
}
@media (max-width: 599px) {
body {
/*  background: purple; */
}
}

@media (min-width: 900px) {
body{
/* font-size: 1.5vw;  */
}
}


.controls{
  background-color: rgba(68,68,68, .4);
  height: 4em;
  width: 35vw;
  margin: auto;
font-size: 65%;
}
.opt{
/*   height: auto; */
/*   float: left; */
  background-color: #f4f4f4;
  color: #444;
  display: inline;
  margin: 1em;
  padding: .5em;
}
/*CONTAINER FOR EVERYTHING*/

#app{
  position: relative;
/* background-color: rgba(68, 68, 68, .05); */
width : 90%;
margin-left: auto;
margin-right: auto;
height: 30vh;
margin-bottom: 30vh;
margin-top: 20vh;
/*  border: solid 1px #84FFA6; */
}

@media (min-width: 900px) {
#app{
/*   width: 80%; */

}
}

@media (min-width: 1600px) {
#app{
/*   width: 70%; */

}
}


#cc{
/* border: solid 5px #0F3B72; */
position: relative;
width: 90%;
margin: auto;
  padding:.5em;
  height: 80%;
/*   margin-top: 5em; */
  top: 1em;
/*   background-color: rgba(253, 200, 189, .05); */

}


.byWord{
/* position: absolute; */
/* text-align: center; */
float: left;
  font-size: 250%;
text-transform: uppercase;
/* padding:.1em; */
  color: #FFFFF8;
border: solid 0em rgba(168, 34, 34, .39);
/* border: solid 1.5em rgba(8, 103, 136, 1); */
 text-shadow: 0em 0em #B4331A;
 box-shadow: 0em 0em 0em 0em #70171A;
  
}

/* @media (min-width: 900px) {
.byWord{
left: 22vw;

}
} */
$( document ).ready(function() {
/*PROGRAMMING LANGUAGE*/
// have blast js create elements from each of the letters in the div #cc
$("#cc").blast({
  delimiter: "character", // Set the delimiter type (see left)
  search: false,
  tag: "div", // Set the wrapping element type (e.g. "div")
  customClass: "byWord", // Add a custom class to wrappers
  generateIndexID: true, // Add #customClass-i to wrappers
  generateValueClass: true,
  returnGenerated: true
});


var $elementWord = $("#cc");

var $element = $(".byWord").toArray();

var $elements = $(".byWord");

var easings = [
  "easeInElastic",
  "easeInOutQuad",
  "easeOutCirc",
  "easeInBack",
  "easeInQuad"
];

/* COLOR CREATIONS*/


let momo = chroma
  .scale(["#FDC8BD", "#D90429"])
  .mode("lch")
  .colors($element.length);
  
let sunset = chroma
  // .scale(["#FDC8BD", "#B4331A"])
  // .scale(["#0085FF", "#D90429"])
  .scale(["#F8FA9D", "#D90429"])
  .mode("lch")
  .colors($element.length);

  
let liter = chroma

  .scale(["#771427", "#D3F6FA"])
  .mode("lch")
  .colors($element.length);

$elements.each(function(index, element){
  // console.log(index, sunset)
  $(this).css("color", sunset[index])
} ) 

  
  $('#deep').click(function(){
$elements.each(function(index, element){
  // console.log(index, element)
  $(this).css("color", liter[index])
} ) 
  
})
  
    $('#playful').click(function(){
$elements.each(function(index, element){
  $(this).css("color", sunset[index])
} ) 
  
})
  
    $('#wildside').click(function(){
$elements.each(function(index, element){
  // console.log(index, element)
  $(this).css("color", momo[index])
} ) 
  
})
  

/*Language Animation to Register!*/

$.Velocity.RegisterUI("whirling", {
  defaultDuration: 900,
  calls: [
    [
      {
        scale: [1, 3],
        borderBottomWidth: "+=.1em",
        rotateX:[0, 120],
        padding: '+=.1em',
        borderRadius: "+=12%"
        
        
        
      },
      1,
      { loop: true, delay: 500, easing: easings[0] }
    ]
  ]
});
$.Velocity.RegisterUI("whirlingBack", {
  defaultDuration: 3000,
  calls: [
    [
      {
        rotateX: [0, -90],
        textShadowY: "+=.05em",
        textShadowBlur: ["+=0em", "+=2em"],
        scale: [0.9, 1],
        borderBottomWidth: "+=.1em",
        borderTopWidth: "+=.1em",
        borderRadius: ["5%", "0%"]
        // letterSpacing: [-1, 1]

        // backgroundColor: ["#B4331A", "#000712" ]
        // boxShadowX:['0em', '.5em']
        // boxShadowBlur:['0em', '.5em']
      },
      1,
      { sequenceQueue: false, loop: true, delay: 200, easing: easings[4] }
    ]
  ]
});

//set up a variable to hold each of the letter's animation
var timeTable = [];


for (var i = 0; i < $element.length; i++) {
  var two = {
    e: $element[i],
    p: "whirling",
    // p: "whirlingBack",

    o: {
      duration: 3000,
      delay: 400,
      sequenceQueue: false,
      loop: true

      // loop: true
    }
  };

  timeTable.push(two);
}
$.Velocity.RunSequence(timeTable);



})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/particles.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js
  6. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js
  7. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.ui.min.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.fittext.js
  9. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/chroma.js