<link href="https://fonts.googleapis.com/css?family=Kanit:300|Nosifer" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,700" rel="stylesheet">
<video playsinline autoplay muted loop poster="" id="bgvid">
<source src="http://www.danielsilber-baker.com/_content/turntable.mp4" type="video/mp4">
</video>
<div class="holder">
<button id = "theButton">
replay
</button>
<div id="text"></div>
</div>
/*SETUP*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
color: #FFA847;
font-family: 'oswald';
font-size: 16px;
width: 100vw;
margin: auto;
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
.line{
position:relative;
top: 54vh;
left: 63vw;
width: 60%
}
.character {
/* background-color: rgba(84, 11, 14, .5); */
text-shadow: 0 0em .5em rgba(68,68,68, .7);
border-radius: 50%;
/* letter-spacing: .09em; */
font-size: 110%;
font-weight: 500;
margin-left: 0;
float:left;
padding: 3em;
opacity: .1;
text-transform: uppercase;
}
/*CONTAINER FOR EVERYTHING*/
.holder {
position: relative;
height: 90vh;
padding: 1em;
margin: none;
}
/*CONTAINER FOR TEXT*/
#text {
z-index: -1;
}
#theButton{
background-color: transparent;
margin-left: 80%;
z-index: 1;
outline: none;
border: 2px solid #540B0E;
font-size: 150%;
color: #9E2A2B;
text-transform: uppercase;
}
$(document).ready(function() {
/*Part I: The Words */
var theText = [
"Sound",
"[es]Scape",
];
function makeGo() {
/*Part II: Creating Words On DOM */
theText.forEach(function(element, index) {
var newDiv = document.createElement("p");
var newContent = document.createTextNode(element);
newDiv.appendChild(newContent);
newDiv.className += "line";
// newDiv.id += "word" + index;
$textGrab = $("#text");
$textGrab.append(newDiv);
});
/* Part III: Blast text to make elements by character*/
$("#text").blast({
delimiter: "character", // Set the delimiter type (see left)
search: false,
tag: "div",
customClass: "character", // Add a custom class to wrappers
generateIndexID: true, // Add #customClass-i to wrappers
generateValueClass: true,
returnGenerated: true
});
/* Part IV: Selectors*/
var $characters = $(".character").toArray();
var $byWords = $(".character");
var radius = 180;
/*Part V: Create The Animations*/
/*spin words */
$.Velocity.RegisterUI("spin", {
defaultDuration:7900,
calls: [
[
{
translateX: '-=62vw',
rotateX: 360,
// transformOriginX: "-=66vw",
// transformOriginZ:"-=27vw",
translateZ: "-=10vw",
textShadowY: "-=.2em",
opacity: .9,
fontSize: "+=.8em",
rotate:-360,
margin:0,
padding:0
},
1,
{easing: "easeInOutBounce", delay: 350, drag:true }]]
});
var stew = [];
for (var i = 0; i < $characters.length; i++) {
var wave = {
e: $characters[i],
p: "spin",
o: { easing: "easeInOutSine", sequenceQueue: false }
};
stew.push(wave);
}
// create the second part of the animation once all initial characters are done with Anim1
var secondWave = {
e: $characters,
p: { translateY: "-=65vh",
fontSize: "+=.9em",
margin: "+=1.2em",
textShadowX: "+=.2em",
skewY: -9},
o: {sequenceQueue: false, duration: 1100} //end o section
}
stew.push(secondWave)
$.Velocity.RunSequence(stew);
} //end function
// call function
makeGo()
/* VI: Replay */
$("#theButton").click(function() {
// empty text and then call makeGo again
$('#text').empty()
makeGo()
console.log("go")
});
}); // end on load
This Pen doesn't use any external CSS resources.