Footer animation

Developer
Andrew Canham
Size
4,240 Kb
Views
32,384
  1. Footer animation Previews
  2. Footer animation HTML Codes
  3. Footer animation CSS Codes
  4. Footer animation JS Codes

How do I make an footer animation?

What is a footer animation? How do you make a footer animation? This script and codes were developed by Andrew Canham on 23 August 2022, Tuesday.

Footer animation Previews
IQ Test

Footer animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Footer animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header></header>
<section></section>
<footer> <div class='first-row'> <div class='prog-details'> <div class='img'></div> <span class='txt'>small lines of text</span> <span class='txt'>that are turned</span> <span class='txt'>into blocks</span> <span class='txt'>for mockup purposes</span> </div> <div class='menu'> <ul class='menu-list'> <li class='txt'>A</li> <li class='txt'>B</li> <li class='txt'>C</li> <li class='txt'>D</li> <li class='txt'>E</li> <li class='txt'>F</li> <li class='txt'>G</li> <li class='txt'>H</li> <li class='txt'>I</li> <li class='txt'>J</li> <li class='txt'>K</li> <li class='txt'>L</li> </ul> </div> </div> <div class='second-row'> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Footer animation - Script Codes CSS Codes

body,
html { background: #323b40; height: 100vh; overflow: hidden; margin: 0; padding: 0;
}
section { background: url(http://s4c.cymru/amg/iplayer/3_lle_2016_alex_jones.jpg); background-size: cover; bottom: 0; left: 0; opacity: 0.7; position: absolute; right: 0; top: 0; z-index: 0;
}
section { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55);
}
footer { background: #e9eaea; height: 540px; left: 0; overflow: hidden; position: absolute; right: 0; top: 100%; -webkit-transform: translate3d(0, -160px, 0); transform: translate3d(0, -160px, 0); -webkit-transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
footer .first-row { height: 160px;
}
footer .first-row .prog-details { padding: 30px; position: relative; -webkit-transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); width: 360px; z-index: 1;
}
footer .first-row .prog-details .img { background: #b8bcbd; float: left; height: 100px; margin-right: 20px; width: 168px;
}
footer .first-row .prog-details span { white-space: nowrap;
}
footer .menu { background: #e9eaea; border-left: 2px solid #b8bcbd; height: 100px; left: 460px; padding: 60px 0 0 80px; position: absolute; top: 0; -webkit-transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); z-index: 10;
}
footer .menu ul { margin: 0; padding: 0; min-width: 1020px;
}
footer .menu ul li { border-radius: 2px; cursor: pointer; display: inline-block; height: 40px; list-style: none; margin: 0 25px 0 0; padding: 0; width: 40px;
}
footer .menu ul li:hover { background: #808080; color: #808080;
}
footer .menu ul li.on { background: #4f585e; color: #4f585e;
}
footer .second-row ul { margin: 0; padding: 60px 30px 0 30px; white-space: nowrap;
}
footer .second-row ul li { background: #b8bcbd; display: inline-block; margin: 0 30px 0 0; opacity: 0; padding: 0; height: 280px; width: 224px; -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); -webkit-transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55); transition: all 0.2s 0s cubic-bezier(0.65, 0.19, 0.94, 0.55);
}
footer .second-row ul li:nth-child(1) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s;
}
footer .second-row ul li:nth-child(2) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
footer .second-row ul li:nth-child(3) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
footer .second-row ul li:nth-child(4) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s;
}
footer .second-row ul li:nth-child(5) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s;
}
footer .second-row ul li:nth-child(6) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s;
}
footer .second-row ul li:nth-child(7) { -webkit-transition-delay: 1.0s; transition-delay: 1.0s;
}
footer .second-row ul li:nth-child(8) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s;
}
footer .second-row ul li:first-child { width: 472px;
}
footer.open { -webkit-transform: translate3d(0, -540px, 0); transform: translate3d(0, -540px, 0); -webkit-transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94); transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94); -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
footer.open .prog-details { opacity: 0.35; -webkit-transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94); transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94);
}
footer.open .menu { left: 60px; -webkit-transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94); transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94);
}
footer.open .second-row ul li { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94); transition: all 0.3s cubic-bezier(0.15, 0.64, 0.41, 0.94);
}
footer.open .second-row ul li:nth-child(1) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
footer.open .second-row ul li:nth-child(2) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
footer.open .second-row ul li:nth-child(3) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s;
}
footer.open .second-row ul li:nth-child(4) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s;
}
footer.open .second-row ul li:nth-child(5) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s;
}
footer.open .second-row ul li:nth-child(6) { -webkit-transition-delay: 1.0s; transition-delay: 1.0s;
}
footer.open .second-row ul li:nth-child(7) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s;
}
footer.open .second-row ul li:nth-child(8) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s;
}
section.open { opacity: 0.05;
}
.txt { background: #b8bcbd; color: #b8bcbd; line-height: 1.4em;
}

Footer animation - Script Codes JS Codes

$(function() {	var footerElem = $("footer"),	sectionElem = $("section");	$(document).click(function(event) {	$(".on").removeClass("on");	if (!$(event.target).closest('footer').length) {	footerElem.removeClass("open");	sectionElem.removeClass("open");	} else {	if ($(event.target).closest('ul.menu-list').length) {	$(event.target).addClass("on");	footerElem.addClass("open");	sectionElem.addClass("open");	}	}	})
});
Footer animation - Script Codes
Footer animation - Script Codes
Home Page Home
Developer Andrew Canham
Username candroo
Uploaded August 23, 2022
Rating 3
Size 4,240 Kb
Views 32,384
Do you need developer help for Footer animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andrew Canham (candroo) Script Codes
Name
Cube grid
A Pen by Andrew Canham
Angled nav reveal
Hover effect
Hover flower
Wrinkle links
Color hover buttons
3D Fold out reveal
3D cube - hover rotate
Motivational message
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!