CODEWITHSUNDEEP
csscss-transitionscss-animationskeyframe
Javid
Javid

Reputation: 512

Background image slide up transition

Revolution slider have option to set slide up image transition and I'm trying to copy that effect so I can use this without revolution slider..

This is slide transition effect.

This is the page where I'm trying to adopt above transition effect.

I tried this CSS but no luck, I don't know how to use key-frames for animation.

Thanks 

.full-img.parallax-yes{
    overflow-y: hidden;
    max-height: 330px;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition: background-position 1s;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 0% 0% 0px;
}

Upvotes: 2

Views: 5489

Answers (3)

mmativ
mmativ

Reputation: 1414

You can do like this, and use at lease window.load() so the animation start only, when your page already loaded.

$(window).load(function(){
$('.banner').addClass('loaded');
});
.banner{
  width: 100%;
  height: 200px;
  background-image: url(https://source.unsplash.com/user/erondu);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-y: 100%;
  color: #fff;
  transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.banner.loaded{
  background-position-y: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="banner">
<p>this is banner text</p>
</div>

Upvotes: 0

frnt
frnt

Reputation: 8795

Hope this what you are trying for, simple background-image slide-up animation using CSS animation.

Define two different class inside of your parent div, one for background image and another for text which is positioned as absolute, position:absolute, to move background-image up-side use background-position-y in keyframes and negative value, for downward background-position-y and positive values.

@-webkit-keyframes ani{
 from{
     background-position-y:0px;
 }
 to{
     background-position-y:-100px;
   }
}


#bx{
  width:100%;
  height:300px;
  overflow:hidden;
  position:relative;
 }
 #bx > .iim{
  width:100%;
  height:600px;
  background:url('https://source.unsplash.com/user/erondu');
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:fixed;
  animation:an 5s forwards;
  transition:5s ease forwards;  
 }
@-webkit-keyframes an{
  from{
    background-position-y:0px;
  }
  to{
    background-position-y:-100px;
  }
}

#bx > .txt{
  width:100%;
  height:300px;
  overflow:hidden;
  position:absolute;
  color:black;
  font-size:32px;
  z-index:6;
  top:0;
  left:0;
}
<div id="bx">
<div class="iim">
</div>
<div class="txt">
Replace following content by your text.
</div>
</div>

Upvotes: 1

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

Here I have given an sample code for using the keyframes

<div class="full-height"> </div>; 


    .full-height {
      max-height: 330px;
      min-height: 330px;
      background-image: url("http://carbongroup.com.au/wp-content/uploads/2015/10/bridge.jpg");
      background-size: cover;
      background-position: 0% 0%;
      background-repeat: no-repeat;
      background-color: green;
      animation-name: move;
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: 1;
    }

    @keyframes move {
      0% {
        background-position: 0% 0%;
      }

       100% {
        background-position: 100% 100%;

      }
    }

Upvotes: 2

Related Questions