<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});
This Pen doesn't use any external CSS resources.