Geek Answers Handbook

CSS Vertical Image Slide

I noticed this nice effect on Pinterest .

The background image scrolls vertically, giving the impression that it is larger than the viewing area. I tried playing with CSS with no luck.

HTML

<div class="out">
    <div class="inner">hello</div>
</div>

CSS

@keyframes scrollBgGridLinks {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-330px);
    }
}
.inner {
    animation: 35s linear 0s normal forwards 1 scrollBgGridLinks;
    background-color: red;
    position: absolute;
    clip:rect(0px, 50px, 50px, 0px);
    width:200px;
}
.out {
    height:200px;
}
+4
source share
1 answer

Pseudo-element sliding background

One or two background pseudo-elements <body>that position: fixedhave a percentage of height and width.

To show elements above the background, use this:

element-to-show-above {
    position: relative;
    z-index: 1;
}

For pages with a lot of content, it would be advisable to apply the above properties to a wrapper containing all of your elements.

Two examples

" " , .

# 1 -

  • 200%

  • -50% forwards

. Safari -webkit- transform.

body {
  margin: 0;
}
body:before {
  content: '';
  display: block;
  -webkit-animation: 80s bg linear forwards;
  animation: 80s bg linear forwards;
  background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  height: 300%;
  width: 200%;
  top: 0;
  left: 0;
}
@-webkit-keyframes bg {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@keyframes bg {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

# 2 - -

  • 0 -100%.

  • 100%, 0.

HTML-!

body {
  margin: 0;
}
body:before {
  content: '';
  display: block;
  -webkit-animation: 5s bg linear infinite;
  animation: 5s bg linear infinite;
  background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
body:after {
  content: '';
  display: block;
  -webkit-animation: 5s bg2 linear infinite;
  animation: 5s bg2 linear infinite;
  background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
@-webkit-keyframes bg {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes bg2 {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes bg {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes bg2 {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
+4

More articles:


All Articles