<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">

<!-- <!-- <!-- particles.js container --> 
<div id="particles-js">
  <div class = "blastText">

<!-- <h1>PROGRAMMING LANGUAGE</h1> -->
    
<div class = "quote">
  "everything you touch you change" 
</div>
    <div id = "attribution">
<!--       <h2><a href = "https://en.wikipedia.org/wiki/Earthseed" >Earthseed: The Books of the Living </a></h2> -->
    </div>
  </div> 
  
body {
/*   background-color: #0C385F; */
  background-color: rgba(  6, 52, 87,1);

  font-family: 'Oswald', sans-serif;
  color: #BCD2FF;
  font-size: 16px;
/*   border: 5px solid #444; */
  width: 95%;
/*   height: 450px; */
   margin-left: auto;
  margin-right: auto; 
   text-align: center;
  
}


h1 {
  font-size: 160%;
  line-height: 1.2em;
  text-align: center;
}

.blastText{
  font-size:250%;
  z-index:1;
}
a {
  color:inherit;
  text-decoration: none;
 }
#attribution{
  position: absolute;
  top: 75%;
}
.quote{
  font-size: 140%;
  height: 50%;
  margin-top: 25%;
}

canvas{
  display:block;
  vertical-align:bottom;
  position:absolute;
  top:0;
  z-index:-1;
}

/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
/*   position:absolute; */
/*   background-color:#fcfcfc; */

}

$(".quote").blast({   
  delimiter: "character",
  generateValueClass: true,
  customClass: "changed",
  // generateIndexID: true 
    });


$(".blastText").blast({   
  delimiter: "character",
  generateValueClass: true,
  customClass: "demo",
  // generateIndexID: true 
    });

var changeText = $('.changed')

var brewer = chroma.brewer.OrRd

// console.log(changeText)
  var colors = chroma
    .scale(["#042037", "#226666"])
    .mode("hsl")
    // .mode("rgb")
    // .mode("lab")
    // .mode("lch")
  
    .colors(changeText.length);

  let colorSet = [];

  for (var i = 0; i < changeText.length; i++) {
    var cSet = {
      e: changeText[i],
      p: {  color: colors[i] },
      o: {  }
    };

    colorSet.push(cSet);
  }
  $.Velocity.RunSequence(colorSet);

$.Velocity.RegisterUI("callout.twirl", {
    defaultDuration: 3000,
    calls: [ 
			[ { rotateZ: 1080 }, 0.50 ],
			[ { scaleX: 0.5 }, 0.25, { easing: "spring" } ],
			[ { scaleX: 1 }, 0.25, { easing: "spring" } ]
    ]
});



$mutate = $('.demo').toArray()
$(".demo").hover(function() {
  $element = this;
   console.log($element)
    var sequence = [
{e:$element, p: { translateY: '-40px', translateX: '-70px', fontSize: '-=65%', left: '-=12px', }, o:{ duration: 1500}},
]

$.Velocity.RunSequence(sequence);
}, function() {
  //mouse off the item
      var sequence = [
{e:$element, p: { translateY: '80px', translateX: '50px', fontSize: '+=65%', left: '-=12px', }, o:{ duration: 1500}},
]

$.Velocity.RunSequence(sequence);
  
});


/* Particles */

particlesJS("particles-js", 
{"particles":
{"number":

{"value":500,"density":

{"enable":true,"value_area":1200}},

 //node color 
"color": {"value":"#042037"},

 "shape":
{"type":"circle","stroke":
{"width":.1,"color":"#6B0062"},"polygon":
{"nb_sides":5},

"image":
{"src":"img/github.svg","width":100,"height":100}},

"opacity":
{"value":0.5,"random":false,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},

"size":
{"value":2.5,"random":false,"anim":
{"enable":false,"speed":20,"size_min":0.1,"sync":false}},

 //'edges' connectors between two nodes
"line_linked":
{"enable":true,"distance":150,
 "color":"#226666",
 // "color":"#EF6E73",
 "opacity":0.4,"width":1},

"move":
{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":
{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":
{"detect_on":"canvas","events":
{"onhover":
{"enable":true,"mode":"repulse"},"onclick":
{"enable":true,"mode":"push"},"resize":true},"modes":
{"grab":
{"distance":400,"line_linked":
{"opacity":1}},"bubble":
{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":
{"distance":200,"duration":0.4},"push":
{"particles_nb":4},"remove":


{"particles_nb":2}}},"retina_detect":true});

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. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js
  5. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.ui.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/particles.min.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/chroma.js