Keyframe Activation

In this example below you will see how to do a Keyframe Activation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by michaelrappaz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright michaelrappaz ©
  • HTML
  • CSS
  • JavaScript
    <div class="content">
	<h1>Scroll me</h1>
</div>
<div class="container">
 <div class="animation"></div>
</div>

/*Downloaded from https://www.codeseek.co/michaelrappaz/keyframe-activation-KmRxGO */
    /*NEEDS OPTIMISING AND ALOT OF IT*/
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
body {
	background: linear-gradient(to right, #1c92d2, #f2fcfe);
}
/*Allowing me to scroll on this pen and font options*/
.content {
	height: 500px;
}
.content h1 {
	color: white;
	font-family: 'Ubuntu', sans-serif;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 10px;
}
/*Basic skin for the loading bar*/
.container {
	width: 400px;
	height: 30px;
	border-radius: 20px;
	border: 1px solid black;
	overflow: hidden;
	/*Position for the pen*/
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
/*Allowing the red background to be visible*/
.animation {
	position: relative;
	display: block;
	height: 30px;
	width: 0px;
}
/*Class that will be added*/
.animation.lvl {
	animation: lvl 600ms forwards;
	animation-timing-function: ease-in-out;
	background-color: white;
}
.animation.lvl:before {
	content: "Text, and more text";
	position: fixed;
	top: 50%;
	left: 30%;
	opacity: 1;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	font-family: "Ubuntu";
	color: black;
	animation: title 600ms forwards;
}
@keyframes lvl {
	0% {
		width: 0%;
	}
	100% {
		width: 75%;
		border-right: 4px solid black;
	}
}
@keyframes title {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



/*Downloaded from https://www.codeseek.co/michaelrappaz/keyframe-activation-KmRxGO */
    var $window = $(window);
var $animation = $(".animation");

function isScrolledIntoView($animation, $window) {
	var docViewTop = $window.scrollTop();
	var docViewBottom = docViewTop + $window.height();
	var animationTop = $animation.offset().top;
	var animationBottom = animationTop + $animation.height();

	return animationBottom <= docViewBottom && animationTop >= docViewTop;
}

$(document).on("scroll", function() {
	if (isScrolledIntoView($animation, $window)) {
		$animation.addClass("lvl");
	}
});


Comments