<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Roboto+Condensed" rel="stylesheet">
<div class="holder">
<!-- <h1>We All Deserve a Safe Space to Become Ourselves</h1> -->
<div class="innerText">
<div id="back">
</div>
<div id="text">
</div>
</div>
</div>
</div>
/*SETUP*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #FFFFF8;
/* font-family: 'Permanent Marker', cursive; */
font-family: 'Anton', sans-serif;
font-size: 1.5vw;
width: 99%;
margin: auto;
}
@media (max-width: 599px) {
body {
/* font-size: 5.5vw; */
}
}
@media (min-width: 900px) {
body {
/* font-size: 5vw; */
}
}
h1{
color: #444;
font-family: 'Oswald', sans-serif;
font-size: 200%;
text-align: center;
}
.line {
/* controls color of the burning couldron */
box-shadow: inset 0em 0em 0em #B4331A;
/* makes up the body of the couldron and the chrysalis */
border: solid 0em rgba(68,68,68, .9);
width: 75%;
height: 90%;
margin: auto;
margin-bottom: 1em;
}
.word {
letter-spacing: .07em;
font-size: 110%;
font-weight: 200;
/* text-shadow: 0em 0em 0em #F9DA78; */
/* border: dotted 1em rgba(180, 51, 26, .6); */
/* box-shadow: 1.5em 1.5em .5em 3.5em #EF6E73; */
border-radius: 5%;
color: #FFFFF8;
}
/*CONTAINER FOR EVERYTHING*/
.holder {
/* border: solid .05em rgba( 85, 0, 0,1); */
position: relative;
height: 90vh;
padding: 1em;
margin: auto;
}
/*CONTAINER FOR TEXT*/
.innerText {
position: relative;
height: 90vh;
width: 80%;
margin: auto;
}
#back{
position: absolute;
height: 75vh;
width: 100%;
z-index: -1;
}
#text {
border: solid 0em #F0C808;
text-shadow: 0em 0em rgba(51, 0, 0, .8);
font-weight: 800;
height: auto;
padding: .5em;
margin: 0;
}
/*SETUP*/
$(document).ready(function() {
var theText = [
"Everything we are",
"we become in a process",
"The cauldron",
"The chrysalis",
"The potion, the metamorphosis",
"no matter-we come from",
"and become back the world"
// "We will become ourselves-no matter-what",
// "we remake the world in our imagination of us",
// "Nothing deserves more protection than what we might become"
];
/*FUNCTION TO CREATE STRUCTURED POEM ELEMENTS FROM STRUCTURED DATA */
theText.forEach(function(element, index) {
// create a new element
var newDiv = document.createElement("p");
//create a text node from the parameter passed to the function
var newContent = document.createTextNode(element);
// //add the text node to the newly created element
newDiv.appendChild(newContent);
newDiv.className += "line";
newDiv.id += "line" + index;
$textGrab = $("#text");
$textGrab.append(newDiv);
});
/* Blast text to make elements by word*/
$("#text").blast({
delimiter: "word", // Set the delimiter type (see left)
search: false,
// tag: "div",
// Set the wrapping element type (e.g. "div")
customClass: "word", // Add a custom class to wrappers
generateIndexID: true, // Add #customClass-i to wrappers
generateValueClass: true,
returnGenerated: true
});
/* variables to select and animate text*/
var $words = $("#text").text();
var $poem = $(".word").toArray();
var $byWords = $(".word");
var $byLine = $(".line").toArray();
//select the words by lines
var $lines = [];
var selector = $("#line0").find(".word");
var selector1 = $("#line1").find(".word");
var selector2 = $("#line2").find(".word");
var selector3 = $("#line3").find(".word");
var selector4 = $("#line4").find(".word");
var selector5 = $("#line5").find(".word");
var selector6 = $("#line6").find(".word");
$lines.push(
selector,
selector1,
selector2,
selector3,
selector4,
selector5,
selector6
);
// background button to activate animation
// var $all = $("#back");
/*Making colors with chroma js*/
var colors = chroma
.scale(["#2B2D42", "#D90429"])
.mode("lch")
.colors($poem.length);
//animation sequence to set the colors of each word element
let colorSet = [];
for (var i = 0; i < $poem.length; i++) {
var cSet = {
e: $poem[i],
p: { backgroundColor: colors[i], color: colors[i] },
o: { sequenceQueue: false }
};
colorSet.push(cSet);
}
$.Velocity.RunSequence(colorSet);
//animation to show user can click on boxes to start animation
$.Velocity.RegisterUI("bubble", {
defaultDuration: 1800,
calls: [
[
{
boxShadowY: "+=.09em",
boxShadowBlur: "+=.8em"
},
1,
{ loop: true, easing: "easeInSine" }
]
]
});
/*CREATE THE INTERACTIVE ANIMATION*/
var stew = [];
var bubble = {
e: $lines,
p: "bubble",
o: {}
};
stew.push(bubble);
$.Velocity.RunSequence(stew);
/*STOP THE STEW AND START THE POEM ANIMATION*/
$(".innerText").click(function() {
/*VARIABLES AND EFFECTS FOR THE POEM ANIMATION*/
var colorHold = "#FFFFF8";
var $textSize = 18;
$.Velocity.RegisterUI("exist", {
defaultDuration: 300,
calls: [
[
{
textShadowX: 0,
textShadowY: 0,
textShadowBlur: 0,
boxShadowY: 0,
boxShadowX: 0,
boxShadowBlur: 0,
boxShadowSpread: 0,
border: 0,
backgroundColor: colorHold,
fontSize: $textSize,
color: "#444"
},
1,
{ easing: "easeInSine" }
]
]
});
$.Velocity.RegisterUI("become", {
defaultDuration: 800,
calls: [
[
{
textShadowX: 0,
textShadowY: 0,
textShadowBlur: 0,
boxShadowY: 0,
boxShadowX: 0,
boxShadowBlur: 0,
boxShadowSpread: 0,
backgroundColor: colorHold,
fontSize: $textSize,
color: "#444"
},
1,
{ easing: "easeInSine" }
]
]
});
$.Velocity.RegisterUI("cauldron", {
defaultDuration: 800,
calls: [
[
{
textShadowX: 0,
textShadowY: 0,
textShadowBlur: 0,
boxShadowX: 0,
boxShadowSpread: 0,
fontSize: "+=50%",
width: "/=1.3",
color: "#444",
borderBottomWidth: "+=1.5em",
paddingBottom: "+=2.5em",
borderRadius: "50%"
},
1,
{ easing: "easeInSine" }
]
]
});
$.Velocity.RegisterUI("cauldronBurn", {
defaultDuration: 2800,
calls: [
[
{
textShadowX: [0, 10],
textShadowBlur: [0, 20],
boxShadowX: [0, -10],
boxShadowY: [0, -10],
boxShadowSpread: [0, 5],
boxShadowBlur: [0, 25]
// fontSize:[46,48]
},
1,
{ easing: "easeInSine", loop: true }
]
]
});
$.Velocity.RegisterUI("chrysalis", {
defaultDuration: 1800,
calls: [
[
{
textShadowX: 0,
textShadowY: 0,
textShadowBlur: 0,
boxShadowX: 0,
boxShadowSpread: 0,
fontSize: $textSize + 8,
width: "/=1.3",
backgroundColor: "#FFFFF8",
color: "#444",
borderBottomWidth: "+=.15em",
borderTopWidth: "+=.15em",
paddingBottom: "+=1.5em",
borderRadius: "50%"
},
1,
{ easing: "easeInSine" }
]
]
});
$.Velocity.RegisterUI("chrysalisText", {
defaultDuration: 300,
calls: [
[
{
textShadowX: 0,
textShadowY: 0,
textShadowBlur: 0,
boxShadowY: 0,
boxShadowX: 0,
boxShadowBlur: 0,
boxShadowSpread: 0,
border: 0,
opacity: 0.5,
backgroundColor: "#FFFFF8",
fontSize: $textSize,
color: "#444",
padding: 0
},
1,
{ easing: "easeInSine" }
]
]
});
$.Velocity.RegisterUI("chrysalisBurn", {
defaultDuration: 2800,
calls: [
[
{
backgroundColor: ["#DA8A98", "#B4331A"],
textShadowX: [0, 10],
textShadowY: [0, 40],
textShadowBlur: [0, 5]
// boxShadowY:[0,25],
// boxShadowX: 0,
// boxShadowBlur: [0,25],
// boxShadowSpread: [0,25]
},
1,
{ easing: "easeInSine", loop: true }
]
]
});
$.Velocity.RegisterUI("basic", {
defaultDuration: 500,
calls: [
[
{
textShadowX: 0,
textShadowY: 0,
textShadowBlur: 0,
boxShadowY: 0,
boxShadowX: 0,
boxShadowBlur: 0,
boxShadowSpread: 0,
border: 0,
backgroundColor: colorHold,
fontSize: $textSize,
color: "#444"
},
1,
{ easing: "easeInSine" }
]
]
});
/*Collect the animations in an array */
var animations = [
"exist",
"become",
"cauldron",
"cauldronBurn",
"chrysalis",
"chrysalisBurn",
"basic",
"chrysalisText"
];
/* Animation Sequence For The Poem */
var runThePoem = [];
//stop the interactivity animation
selector.velocity("stop");
//apply the animation to each word in the first line
for (var i = 0; i < selector.length; i++) {
var p1 = {
e: selector[i],
p: animations[0],
o: {
complete: function() {
//stop the interactivity animation for the next two lines
selector1.velocity("stop");
selector2.velocity("stop");
}
}
};
runThePoem.push(p1);
}
//line 2
for (var i = 0; i < selector1.length; i++) {
var p2 = {
e: selector1[i],
p: animations[1],
o: {}
};
runThePoem.push(p2);
}
//line 3: The cauldron setup and text
for (var i = 0; i < selector2.length; i++) {
var couldronSetup = {
e: selector2[i],
p: animations[1],
o: {
complete: function() {
//set the color of the chrysalis by it's border color
$("#line3").css("border", "dotted 0em #B4331A");
//stop the rest of the interactivity animations
selector3.velocity("stop");
selector4.velocity("stop");
selector5.velocity("stop");
selector6.velocity("stop");
}
}
};
runThePoem.push(couldronSetup);
}
/* create the couldron */
var createCouldron = {
e: $("#line2"),
p: animations[2],
o: {}
};
runThePoem.push(createCouldron);
/*couldron burn: looping animation that continues for the couldron*/
var burnCouldron = {
e: $("#line2"),
p: animations[3],
o: { sequenceQueue: false }
};
runThePoem.push(burnCouldron);
/* line 4: The chrysalis setup and text */
for (var i = 0; i < selector3.length; i++) {
var chrysalisText = {
e: selector3[i],
p: animations[7],
o: { sequenceQueue: false }
};
runThePoem.push(chrysalisText);
}
//create the chrysalis body
var chrys = {
e: $("#line3"),
p: animations[4],
o: {
sequenceQueue: false
}
};
//chrysalis burn: looping animaton for chrysalis
var chrys2 = {
e: $("#line3"),
p: animations[5],
o: {
delay: 10
}
};
runThePoem.push(chrys);
runThePoem.push(chrys2);
/* End The chrysalis */
//line 5
for (var i = 0; i < selector4.length; i++) {
var line5 = {
e: selector4[i],
p: animations[6],
o: { duration: 800, stagger: 50, sequenceQueue: false }
};
runThePoem.push(line5);
}
//line 6
for (var i = 0; i < selector5.length; i++) {
var line6 = {
e: selector5[i],
p: animations[6],
o: { duration: 500, delay: 10 }
};
runThePoem.push(line6);
//
}
//line 7
for (var i = 0; i < selector6.length; i++) {
var line7 = {
e: selector6[i],
p: animations[6],
o: { duration: 500, delay: 10 }
};
runThePoem.push(line7);
}
//run the poem animation sequence
$.Velocity.RunSequence(runThePoem);
//end on click funtion
});
//end document on ready function
});
This Pen doesn't use any external CSS resources.