5+ JavaScript Footer Examples

This post contains a total of 5+ JavaScript Footer Examples with Source Code. All these Website Footers are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Footer Examples

1. By Austin

Made by Austin. Parallax Fixed Footer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<style>
#site-content {
	min-height: 100%;
	min-height: 100vh;
	padding-top: 65px;
	position: relative;
	z-index: 1;

	-webkit-box-shadow: #000 0 7px 35px 0;
	-moz-box-shadow: #000 0 7px 35px 0;
	box-shadow: #000 0 7px 35px 0;
  
}

#site-footer {
	padding: 25px 0;
	font-size: 85%;
	background-color: #2A2A2A;
	position: fixed;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0;
}

@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css);

html, body {
	padding: 0;
	margin: 0;
	background-color: #D1D1D1;
}
#site-content {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('http://dummyimage.com/3000x3000/D1D1D1/2A2A2A.png?text=Scroll+Down');
}

#site-footer {
	min-height: 20vw;
	background-size: cover;
	background-position: center;
	background-image: url('http://dummyimage.com/1500x1500/2A2A2A/FFF.png?text=Footer+Area+(Resize+Me)');
}
</style>
</head>
<body>
  <div id="site-content"></div> 
<div id="site-footer"></div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  // INITIATE THE FOOTER
  siteFooter();
  $(window).resize(function () {
    siteFooter();
  });

  function siteFooter() {
    var siteContent = $('#site-content');
    var siteContentHeight = siteContent.height();
    var siteContentWidth = siteContent.width();

    var siteFooter = $('#site-footer');
    var siteFooterHeight = siteFooter.height();
    var siteFooterWidth = siteFooter.width();

    console.log('Content Height = ' + siteContentHeight + 'px');
    console.log('Content Width = ' + siteContentWidth + 'px');
    console.log('Footer Height = ' + siteFooterHeight + 'px');
    console.log('Footer Width = ' + siteFooterWidth + 'px');

    siteContent.css({
      "margin-bottom": siteFooterHeight + 50 });

  };
});
    </script>
</body>
</html>

2. By Sheelah Brennan

Made by Sheelah Brennan. Animated Footer with Toggle. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,400i,700">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
html {
  font-size: 1rem;
}

body {
  margin: 0;
  padding: 0;
  background: #464646;
  background-image: linear-gradient(147deg, #4a4a4a 0%, #25303c 74%);
  color: #3c3c3c;
  font-family: "Lato", arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

.feature_image {
  grid-row: 1/1;
}

.container {
  max-width: 450px;
  margin: 20px auto;
  background-color: #fbfbfd;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

header {
  grid-row: 2/span 1;
  color: #fff;
}
header h1 {
  font-family: "Merriweather", serif;
  margin: 0.4rem 0;
  font-size: 2.5rem;
}
header p {
  margin: 0;
}

header,
main {
  padding: 30px 20px;
}

article {
  display: grid;
  grid-template-rows: 570px auto 1fr;
  height: 100%;
}

.toaster {
  background-color: #02324a;
  color: #fff;
  position: absolute;
  bottom: 0;
  height: 60px;
  padding: 0 20px;
  transition: height 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}
.toaster.is_open {
  height: 320px;
}
.toaster h1 {
  font-size: 1.1rem;
  margin: 0.1rem 0;
  font-family: "Lato", arial, sans-serif;
}
.toaster header {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toaster .wrapper {
  display: grid;
  grid-template-rows: 60px 1fr 1fr;
  height: 100%;
  position: relative;
}

.airplane_icon {
  fill: #fff;
  width: 40px;
  height: auto;
  display: block;
  width: 32px;
  height: auto;
}

.airplane_icon_wrapper {
  position: absolute;
  opacity: 0;
  bottom: 0;
}
.airplane_icon_wrapper.airplane_left {
  left: 50px;
}
.airplane_icon_wrapper.airplane_left.is_moving {
  opacity: 1;
  animation: flyby_left 1s ease-in forwards;
}
.airplane_icon_wrapper.airplane_right {
  right: 160px;
}
.airplane_icon_wrapper.airplane_right.is_moving {
  animation: flyby_right 1s ease-in forwards;
}

.cta {
  letter-spacing: 0.07rem;
  background-color: #337a96;
  border-color: #337a96;
  display: block;
  color: #fff;
  border-radius: 4px;
  padding: 16px 12px;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: bold;
  font-family: "Lato";
  width: 100%;
  margin: 20px 0 0;
  transition: all 0.3s ease-in;
}
.cta:hover, .cta:active, .cta:focus {
  background-color: #49a1c3;
  border-color: #49a1c3;
}

.expand_icon {
  fill: #fff;
  width: 30px;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}
.expand_icon.is_reversed {
  transform: rotate(180deg);
}

@keyframes flyby_left {
  0% {
    transform: translateY(0%) translateX(-5%) rotate(-5deg) scale(0);
  }
  10% {
    transform: translateY(-80%) translateX(-7%) rotate(-10deg) scale(1);
  }
  25% {
    transform: translateY(-200%) translateX(-8%) rotate(-15deg) scale(1.1);
  }
  50% {
    transform: translateY(-250%) translateX(10%) rotate(-20deg) scale(1.2);
  }
  80% {
    transform: translateY(-680%) translateX(-100%) rotate(-40deg) scale(0);
  }
  100% {
    transform: translateY(-870%) translateX(-340%) rotate(-55deg) scale(0.8);
  }
}
@keyframes flyby_right {
  0% {
    opacity: 1;
    transform: translateX(-5%) translateY(-70) rotate(5deg) scale(0);
  }
  10% {
    transform: rotate(8deg) scale(1);
  }
  25% {
    transform: translateY(-200%) translateX(50%) rotate(10deg) scale(1.2);
  }
  50% {
    transform: translateY(-250%) translateX(80%) rotate(20deg);
  }
  80% {
    transform: translateY(-680%) translateX(380%) rotate(45deg) scale(0.9);
  }
  100% {
    transform: translateY(-950%) translateX(620%) rotate(65deg);
  }
}
</style>
</head>
<body>
  <div class="container">
  <article><img class="feature_image" src="https://images.unsplash.com/photo-1482624056776-f0cda15a49cf?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=906&amp;q=80" alt=""/>
    <header>
      <h1>Hello, vacation</h1>
      <p>Isn't it time you got away from it all?</p>
    </header>
    <main>
      <p>All about it</p>
      <p>Swimsuit pool surfing music amusement park summer fins, stand up paddleboarding seashells getaway sushi snorkel popsicle. Chalet ship pool postcard mojito seashore, catamaran scenery vacation Bluetent longboard sailing pool. Photographs offpiste airplane holiday guided tour, catamaran snorkel seashells offpiste comfort popsicle.</p>
      <p>Clam bake eco tour destination, offpiste family sunscreen museum souvenirs amenities water taxi surfing amenities. Sights read a book explore summer sea coast, safari wedding sun photographs.</p>
    </main>
  </article>
  <div class="toaster">
    <div class="wrapper">
      <header class="cta_header">
        <h1>Want more info? Check out our guides!</h1>
        <svg class="expand_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </header>
      <div class="airplane_icon_wrapper airplane_left">
        <svg class="airplane_icon" viewBox="0 0 24 24">
          <path d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z"></path>
        </svg>
      </div>
      <div class="airplane_icon_wrapper airplane_right">
        <svg class="airplane_icon" viewBox="0 0 24 24">
          <path d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z"></path>
        </svg>
      </div>
      <div class="promo">
        <p>The mountains are beckoning, and your dream vacation awaits.</p>
        <p>Check out our trekking guides to get your trip planning satarted!</p>
        <button class="cta">Start Browsing</button>
      </div>
    </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
const cta = document.querySelector('.cta_header');
const footer = document.querySelector(
'.toaster');
const expandIcon = document.querySelector('.expand_icon');
const airplaneIcon = document.querySelectorAll('.airplane_icon_wrapper');

function toggleFooter() {
  footer.classList.toggle('is_open');
  expandIcon.classList.toggle('is_reversed');
  Array.from(airplaneIcon).map(icon => icon.classList.toggle('is_moving'));
}

cta.addEventListener('click', toggleFooter);
    </script>
</body>
</html>

3. By Alex Caldwell

Made by Alex Caldwell. Simple Responsive Footer. Source

JavaScript Footer by Alex Caldwell
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/* HTML Set up */
footer {
  background: #191919;
  color: #fff;
  margin: 0;
  @import 'https://fonts.googleapis.com/css?family=Open+Sans';
  font-family: "Open Sans", sans-serif;
}
footer .centered {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
footer .centered .footer-logo {
  width: 20%;
}
footer .centered .footer-logo img.logo {
  padding: 30px 20px 10px 20px;
  max-width: 100%;
}
footer .centered .footer-contact {
  width: 20%;
}
footer .centered .footer-navigation {
  width: 60%;
}
footer .centered .footer-navigation .footer-links-holder {
  width: 33.33333%;
  position: relative;
  float: left;
  margin: 0;
}
footer .centered .footer-navigation .footer-links-holder .footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-transition: max-height 0.5s;
  transition: max-height 0.5s;
}
footer .bottom-bar {
  position: relative;
  text-align: center;
  font-size: 0.8em;
  text-transform: uppercase;
  background: #000;
  padding: 15px 0;
}

/* Responsive Tablet Sizes */
@media only screen and (max-width: 749px) {
  footer .centered {
    flex-wrap: wrap;
  }
  footer .centered .footer-logo {
    max-width: 250px;
    width: 50%;
  }
  footer .centered .footer-contact {
    width: 50%;
    padding: 0 20px;
  }
  footer .centered .footer-navigation {
    width: 100%;
  }
  footer .centered .footer-navigation .footer-links-holder {
    padding: 0 20px;
  }
}
/* Responsive Mobile Sizes */
@media only screen and (max-width: 500px) {
  footer .centered .footer-logo {
    width: 100%;
    margin: 0 auto;
  }
  footer .centered .footer-contact {
    width: 100%;
  }
  footer .centered .footer-navigation .footer-links-holder {
    width: 100%;
    padding: 0;
  }
  footer .centered .footer-navigation .footer-links-holder h3 {
    margin: 0;
    padding: 10px 20px;
    border-top: #000 1px solid;
    cursor: pointer;
    /* Down Arrows */
  }
  footer .centered .footer-navigation .footer-links-holder h3::after {
    float: right;
    margin-right: 10px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-top: 7px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
  }
  footer .centered .footer-navigation .footer-links-holder .footer-links {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
  }
  footer .centered .footer-navigation .footer-links-holder.active h3::after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  footer .centered .footer-navigation .footer-links-holder.active .footer-links {
    max-height: 10000px;
  }
}
/* Social Icons */
.social {
  text-align: center;
}
.social a {
  display: inline-block;
  padding: 7px;
  width: 35px;
  height: 35px;
  margin: 0 2px;
  background: #fff;
  border-radius: 50%;
  vertical-align: middle;
}
.social a:hover {
  background: #65c2ed;
}
.social a.linkedin {
  padding: 4px;
}
.social a svg .face, .social a svg .twit, .social a svg .link {
  fill: #000;
}

/* Typography */
footer h3 {
  font-weight: lighter;
  font-style: italic;
  margin-bottom: 0;
}
footer p, footer li {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0;
}
footer a {
  color: #fff;
  text-decoration: none;
  -webkit-transition: color 0.5s, background 0.5s;
  transition: color 0.5s, background 0.5s;
}
footer a:hover {
  color: #65c2ed;
}

/* Misc CSS */
.clearfix:before, .clearfix:after {
  content: " ";
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
  clear: both;
}

body {
  margin: 0;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
</head>
<body>
  <footer>
  <div class="centered clearfix">
    <div class="footer-logo">
      <img class="logo" src="https://brolik.com/images/BRO_logo.svg">
      <div class="social">
        <a href="#" class="facebook">
          <svg viewBox="0 0 33 33"><g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path></g></svg>
        </a>
        <a href="#" class="twitter">
          <svg viewBox="0 0 33 33"><g><path d="M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z"></path></g></svg>
        </a>
        <a href="#" class="linkedin">
          <svg viewBox="0 0 512 512"><g><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path></g></svg>
        </a>
      </div>
    </div>
    <div class="footer-contact">
       <h3><a href="">Contact</a></h3>
       <p><a href="#">Email</a></p>
       <p><a href="tel:">123-456-7890</a></p>
       <p><a href="">123 Fake St<br />Fake, PA 11111</a></p>
    </div>
    <div class="footer-navigation">
      <div class="footer-links-holder">
        <h3><a href="">Section 1</a></h3>
        <ul class="footer-links">
          <li><a href="">Page Title 1</a></li>
          <li><a href="">Page Title 2</a></li>
          <li><a href="">Page Title 3</a></li>
          <li><a href="">Page Title 4</a></li>
        </ul>
      </div>
      <div class="footer-links-holder">
        <h3><a href="">Section 2</a></h3>
        <ul class="footer-links">
          <li><a href="">Page Title 1</a></li>
          <li><a href="">Page Title 2</a></li>
          <li><a href="">Page Title 3</a></li>
          <li><a href="">Page Title 4</a></li>
        </ul>
      </div>
      <div class="footer-links-holder">
        <h3><a href="">Section 3</a></h3>
        <ul class="footer-links">
          <li><a href="">Page Title 1</a></li>
          <li><a href="">Page Title 2</a></li>
          <li><a href="">Page Title 3</a></li>
          <li><a href="">Page Title 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="bottom-bar">
      All Rights Reserved Β© 2016 | <a href="">Privacy Policy</a> | <a href="">Terms of Service</a>
  </div>
</footer>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
$(function () {
  $('.footer-links-holder h3').click(function () {
    $(this).parent().toggleClass('active');
  });
});
    </script>
</body>
</html>

4. By Mātthīas

Made by Mātthīas. Simple Fixed Footer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
:root {
  --clr1: #ddd;
  --clr2: #efefef;
  --clr3: #333;
  --clr4: tomato;
  --border-radius: 0px;
  --text-radius: 0em;
}

body {
  background: var(--clr1);
  padding: 50px 0 0 0;
  margin: 0 10px;
}
body *, body :after, body :before {
  box-sizing: border-box;
}

.transparent {
  background: transparent !important;
}

.wrap {
  max-width: 960px;
  min-width: 360px;
  margin: 0 auto;
  position: relative;
}
.wrap.sticky {
  margin-top: 150px;
  /* set height from header */
}

.fluid .wrap {
  max-width: 100% !important;
}

header {
  background: var(--clr2);
  padding: 50px;
  width: 100%;
  border-radius: var(--border-radius);
  position: relative;
  z-index: 99;
}

.wrap.sticky header {
  background: var(--clr2);
  padding: 50px;
  position: fixed;
  top: 0px;
  max-width: 960px;
  width: calc(100% - 20px);
  min-width: 360px;
  border-radius: 0px 0px var(--border-radius) var(--border-radius);
}

.fluid .wrap.sticky header {
  max-width: 100% !important;
}

header .logo {
  background: var(--clr4);
  width: 50px;
  height: 50px;
  border-radius: var(--text-radius);
}
header nav {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50px, -50%);
}
header nav ul li {
  display: inline-block;
  list-style: none;
  width: 60px;
  height: 10px;
  background: var(--clr3);
  border-radius: var(--text-radius);
}

section {
  background: var(--clr2);
  padding: 100px 50px;
  width: 100%;
  border-radius: var(--border-radius);
  position: relative;
  margin: 10px 0 0 0;
}
section .headline {
  display: block;
  margin: 0 auto;
  list-style: none;
  max-width: 260px;
  height: 30px;
  background: var(--clr3);
  border-radius: var(--text-radius);
}
section .text {
  display: block;
  margin: 10px auto;
  max-width: 500px;
  height: 14px;
  background: var(--clr3);
  border-radius: var(--text-radius);
}
section .button {
  display: block;
  margin: 20px auto 0 auto;
  max-width: 120px;
  height: 35px;
  background: var(--clr4);
  border-radius: var(--text-radius);
}
section.contentbox .headline {
  margin: 10px 0 !important;
  max-width: 65%;
}
section.contentbox .text {
  margin: 10px 0 !important;
  max-width: 100%;
}
section.contentbox .button {
  margin: 10px 0 !important;
}
section.cards {
  padding: 0px;
  background: transparent;
  display: table;
}
section.cards .card {
  background: var(--clr2);
  width: calc(33.6% - 10px);
  margin: 0 5px;
  border-radius: var(--border-radius);
  display: inline-block;
}
section.cards .card:first-child {
  margin: 0 5px 0 0;
}
section.cards .card:last-child {
  margin: 0 0 0 5px;
}
section.cards .card .content {
  padding: 40px;
}
section.cards .card img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

footer {
  background: var(--clr3);
  padding: 50px;
  width: 100%;
  border-radius: 0;
  position: relative;
}
footer .logo {
  background: var(--clr2);
  width: 50px;
  height: 50px;
  border-radius: var(--text-radius);
}
footer nav {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50px, -50%);
}
footer nav ul li {
  display: inline-block;
  list-style: none;
  width: 60px;
  height: 10px;
  background: var(--clr2);
  border-radius: var(--text-radius);
}

@media (max-width: 728px) {
  section.cards .card {
    width: 100%;
    display: block;
    margin: 10px 0 0 0 !important;
    padding: 0;
  }
}
body {
  margin: 0px;
  padding: 0px;
}

.wrap {
  z-index: 1;
  position: relative;
  height: 100%;
  padding: 50px 0 0 0;
  background: var(--clr1);
}

.wrapper {
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

footer {
  position: relative;
  z-index: -2;
  height: 270px;
  background: var(--clr4);
}
footer .content {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 110px;
  transform: translate(-50%, 0);
  width: 100%;
  max-width: 960px;
  padding: 0 50px;
}

section:last-child {
  margin-bottom: 100px;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.arrow {
  position: fixed;
  bottom: 50px;
  left: 50%;
  cursor: pointer;
  margin-left: -20px;
  width: 20px;
  height: 20px;
  padding: 20px;
  z-index: 99;
  background-color: var(--clr4);
  border-radius: 50em;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: 20px 15px;
  background-repeat: no-repeat;
  background-position: center;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrap">
  <header>   
    <div class="logo"></div>
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </header>
  
  <div class="arrow animated bounce"></div>
  
  <section class="transparent">
    <div class="headline"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="button"></div>
  </section>
  
  <section class="cards">
    <div class="card">
      <img src="https://imgplaceholder.com/500x300/transparent/ddd/ion-image" alt="">
      <div class="content">
        <div class="headline"></div>
        <div class="text"></div>
        <div class="text"></div>
        <div class="button"></div>
      </div>
    </div>
    <div class="card">
      <img src="https://imgplaceholder.com/500x300/transparent/ddd/ion-image" alt="">
      <div class="content">
        <div class="headline"></div>
        <div class="text"></div>
        <div class="text"></div>
        <div class="button"></div>
      </div>
    </div>
    <div class="card">
      <img src="https://imgplaceholder.com/500x300/transparent/ddd/ion-image" alt="">
      <div class="content">
        <div class="headline"></div>
        <div class="text"></div>
        <div class="text"></div>
        <div class="button"></div>
      </div>
    </div>
  </section>
  
  <section class="contentbox">
    <div class="headline"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="button"></div>
  </section>
  
</div>
</div>
  
<footer>
  <div class="content">
  <div class="logo"></div>
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
  </div>
</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(window).on('scroll', function () {

  if ($(window).scrollTop() + $(window).height() > $('.wrapper').outerHeight()) {
    $('.arrow').hide();
  } else {
    $('.arrow').show();
  }
});


$('.arrow').click(function () {
  $("html").animate({ scrollTop: $('html').prop("scrollHeight") }, 1200);
});
    </script>
</body>
</html>

5. By Alex Labanino

Made by Alex Labanino. Show/Hide Footer On Scroll. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
    margin: 0;
}
.block {
    height: 2000px;
}
.header img {
    width: 100%;
}
.footer-nav {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    display: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.show, .footer-nav:hover {
    display: block;
}
</style>
</head>
<body>
  <div class="header">
    <img src="http://lorempixel.com/920/300/" alt="">
</div>
    
<div class="block"></div>
    
<div class="footer-nav">
    <p>This is my footer</p>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(window).scroll(function (event) {
  function footer()
  {
    var scroll = $(window).scrollTop();
    if (scroll > 50)
    {
      $(".footer-nav").fadeIn("slow").addClass("show");
    } else

    {
      $(".footer-nav").fadeOut("slow").removeClass("show");
    }

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
      if ($('.footer-nav').is(':hover')) {
        footer();
      } else

      {
        $(".footer-nav").fadeOut("slow");
      }
    }, 2000));
  }
  footer();
});
    </script>
</body>
</html>

6. By Pete Lloyd

Made by Pete Lloyd. Animated Mobile Footer Menu. Source

JavaScript Mobile Footer by Pete Lloyd
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css'>
<style>
.navbar {
  position: fixed;
}
.navbar img {
  margin: 1em 0 0 1em;
  width: 200px;
}

#content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("https://s3.amazonaws.com/plloyd/codepen/eidfjord.jpg") no-repeat center center;
  background-size: cover;
}
#content h1, #content h3 {
  margin: 0.5em 0;
  color: #fff;
  text-align: center;
}

#mobile-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
@media (min-width: 768px) {
  #mobile-footer {
    display: none;
  }
}

#mobile-menu {
  background: rgba(138, 172, 214, 0.8);
}

#mobile-footer-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
}

.mobile-link {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}

.mobile-link a {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

#mobile-footer-close {
  position: relative;
}

#mobile-footer-btn {
  position: absolute;
  bottom: 25px;
  right: 5px;
  width: 30px;
  height: 30px;
  background-color: #959192;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
  cursor: pointer;
}
#mobile-footer-btn:focus {
  outline: 0;
}

.mobile-btn-close span,
.mobile-btn-close span::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 18px;
  top: calc(50% - 9px);
  right: calc(50% + -2.5px);
  background-color: #fff;
  transform: rotate(-90deg);
  transition: 0.3s ease-out;
}

.mobile-btn-close {
  transition: 1s ease-out;
}
.mobile-btn-close::focus {
  transition: 1s ease-out;
}

.mobile-btn-close span {
  transform: rotate(45deg);
}
.mobile-btn-close span::before {
  content: "";
  transform: rotate(-90deg);
}

.is-rotating {
  transform: rotate(135deg);
}

.is-rotating-back {
  transform: rotate(-90deg);
}

.mobile-menu-hide {
  animation: hideFooter 10s forwards;
}

.mobile-menu-show {
  animation: showFooter 1s forwards;
}

@keyframes hideFooter {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px);
    opacity: 0;
  }
}
@keyframes showFooter {
  0% {
    transform: translateY(300px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
</head>
<body>
  <nav class="navbar" role="navigation">
  <img src="https://s3.amazonaws.com/plloyd/codepen/animated-menu-logo.svg" />
</nav>

<div id="content">
  <h1>Mobile Footer Menu</h1>
  <h3>Shrink the browser window to see</h3>
</div>

<footer id="mobile-footer">
  <div id="mobile-menu">
    <div id="mobile-footer-container">
      <div class="mobile-link">
        <a href="#" class="text-center">My Account</a>
      </div>
      <div class="mobile-link">
        <a href="#" class="text-center">Reviews</a>
      </div>
      <div class="mobile-link">
        <a href="#" class="text-center">Contact Us</a>
      </div>
    </div>
  </div>
  <div id="mobile-footer-close">
    <button id="mobile-footer-btn">
      <div class="mobile-btn-close is-rotating-back">
        <span></span>
      </div>
    </button>
  </div>
</footer>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function ($) {
  $(function () {
    // Store menu container
    var mobileMenu = '#mobile-menu';
    // Store Trigger
    var mobileBtn = '#mobile-footer-btn';

    var rotation = '.mobile-btn-close';

    $(mobileBtn).on("click", function (e) {
      e.stopPropagation();
      if ($(mobileMenu).hasClass('mobile-menu-hide') || $(rotation).hasClass('is-rotating')) {
        $(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
        $(rotation).removeClass("is-rotating").addClass("is-rotating-back");
      } else {
        $(mobileMenu).removeClass("mobile-menu-show").addClass("mobile-menu-hide");
        $(rotation).removeClass('is-rotating-back').addClass('is-rotating');
      }
    });
  });
})(jQuery);
    </script>
</body>
</html>