Footer Revealing Effect

Footer Revealing Effect

HTML

<main class="mainContainer">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <!-- web site -->
          <h1 class="text-center text-white my-5">
            Scroll Down to reveal Footer
          </h1>
        </div>
      </div>
    </div>
  </main>
  <div class="revealFooter bg-red fixed-bottom">
    <div class="py-2">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="d-flex justify-content-center my-2">
              <strong>&copy; Copyright FrontEndFunn 2019</strong>
            </div>
          </div>
          <div class="col-md-6">
            <ul class="list-inline d-flex justify-content-center mb-0">
              <li class="nav-item">
                <a
                  href="#"
                  class="nav-link icon mx-3 rounded-circle bg-blue text-red"
                  ><i class="fa fa-facebook"></i
                ></a>
              </li>
              <li class="nav-item">
                <a
                  href="#"
                  class="nav-link icon mx-3 rounded-circle bg-blue text-red"
                  ><i class="fa fa-twitter"></i
                ></a>
              </li>
              <li class="nav-item">
                <a
                  href="#"
                  class="nav-link icon mx-3 rounded-circle bg-blue text-red"
                  ><i class="fa fa-instagram"></i
                ></a>
              </li>
              <li class="nav-item">
                <a
                  href="#"
                  class="nav-link icon mx-3 rounded-circle bg-blue text-red"
                  ><i class="fa fa-youtube-play"></i
                ></a>
              </li>
              <li class="nav-item">
                <a
                  href="#"
                  class="nav-link icon mx-3 rounded-circle bg-blue text-red"
                  ><i class="fa fa-linkedin"></i
                ></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Montserrat");
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
* {
  font-family: "Montserrat", sans-serif;
}

$colors: (
  red: #f63f59,
  blue: #0a1a4d
);

@each $colorName, $colorValue in $colors {
  .bg-#{$colorName} {
    background-color: #{$colorValue};
  }
  .text-#{$colorName} {
    color: #{$colorValue};
  }
}

.mainContainer {
  height: 800px;
  @extend .bg-blue;
  position: relative;
  z-index: 1031;
}
.icon {
  height: rem(40px);
  width: rem(40px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  &:hover {
    color: #ffffff;
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
  font-family: "Montserrat", sans-serif;
}

.bg-red {
  background-color: #f63f59;
}

.text-red {
  color: #f63f59;
}

.bg-blue, .mainContainer {
  background-color: #0a1a4d;
}

.text-blue {
  color: #0a1a4d;
}

.mainContainer {
  height: 800px;
  position: relative;
  z-index: 1031;
}

.icon {
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon:hover {
  color: #ffffff;
}

JAVASCRIPT

$(document).ready(function() {
  var calculateMargin = function() {
    $(".mainContainer").css("margin-bottom", $(".revealFooter").outerHeight());
  };
  calculateMargin();
  $(window).resize(function() {
    calculateMargin();
  });
});

 

Add a Comment

Your email address will not be published. Required fields are marked *