CODEWITHSUNDEEP
vue.jsvuejs2
kipris
kipris

Reputation: 3039

Vuejs: Footer with Scroll Reveal

I try to do footer with a scroll reveal like that https://codepen.io/nickcil/pen/Eoqiv

#footer {
  height: 200px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
}

It has easy realization but because of content's margin links in footer won't be clickable. I tried this lib https://www.npmjs.com/package/vue-scroll-reveal And animation isn't exactly what I wanted.

I have no idea how to realize scroll reveal in my Vue project, help please!

Upvotes: 0

Views: 1543

Answers (1)

skav3n
skav3n

Reputation: 180

Do you want to have footer with a scroll reveal with clickable links? I created something like this: https://jsfiddle.net/cev2b7t6/1/

body {
  margin: 0;
}
#content {
  width: 100%;
  height: 800px;
  text-align: center;
  background-color: #FFF;
  background-image: url('http://www.clker.com/cliparts/r/q/r/j/F/K/black-and-white-skyline-hi.png');
  background-repeat:no-repeat; background-position:center 690px;
  background-size: 250px;
  margin-bottom: 220px;
  position: relative;
  z-index: 2;
}
#footer {
    background: tomato;
    color: #fff;
    padding-top: 375px;
    vertical-align: middle;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}
<div id="main">
  <div id="content">&nbsp;</div>
</div>
<div id="footer">
  <h1>San Francisco</h1>
  <p>123 Easy St<br>
    San Francisco, CA 94104<br>
    415 555 0234</p>
  <a href="/">link</a>
</div>

Upvotes: 1

Related Questions