CODEWITHSUNDEEP
javascriptjquerycss
Alexander Solonik
Alexander Solonik

Reputation: 10230

creating a consistent simple banner text animation

hey guys i am new to javascriptand i tried creating a banner carousel animation , I.E, i have 3 banners and everytime , a slide comes in the text appears with a animation , the problem i am facing is the animations on my 3 slides ony work till the 3 slide scrolls after that , when again slide 1 slides in , the text on slide 1 is not animated and the animations just don't happen from here on .

I was inspired by banner animations from this website :

banner text animation inspiration .

now what i have tried is the following CSS animations : 

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  100% {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}



@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

see the fiddle and u'll understand better .

I am really fascinated by text animations on banners , i am new to Jquery and JS in general , what will i have to do to make the animations appear on the slide , every time a new slide comes in. I have created the CSS-3 animations myself but am stuck here .

Thank you.

Alexander.

Upvotes: 0

Views: 1600

Answers (1)

user4301281
user4301281

Reputation:

If you have 3 items to show in a carousel method you can try this. Make a "master" div that contain the other 3 divs. Every div contain image background and text and use the javascript animation for text. And slide the 3 divs like that:

//function that slide the divs
$(document).ready(function() {
 var counter = 1;
 $("#d1").show();
 function change(){
      //Change the 3 divs inside a master div
      if(counter == 0){
         $("#d3").hide();
         $("#d1").show();
         counter++;
     }else if(counter == 1){
         $("#d1").hide();
         $("#d2").show();
         $("#d3").hide();
         counter++;
     }else if(counter == 2){
         $("#d1").hide();
         $("#d2").hide();
         $("#d3").show();
         counter++;
     }else{
         counter = 1;
         $("#d3").hide();
         $("#d1").show();
     }

 }
//every 6 seconds
setInterval(change, 6000);
});

With the css set the d2 and d3 invisible so you can show and hide them with this javascript code.

Is that you are looking for?

Upvotes: 1

Related Questions