Jquery - Animation as Slide

Question

Hello I've simple animation car using HTML & CSS & JQuery but I'd like to add some effects, for example I need to stop car wheel rotation after the car come in and run the car wheel rotation when the car started to leave the screen, this was the first Problem.

Second Problem

that I need when the car is come in screen change the car angle (rotate) and reduce the car speed.
and when the car is started to leave the screen, animation the car angle (rotate) and increase the car speed.

Youtube Video

Here my code:

$('.wheelEleContainer .slectWheel').click(function (e) {
    e.preventDefault();
    var getImgWheel = $(this).find('img').attr('src');
    $('.car .car__wheel').css('background-image',
      'url(' + getImgWheel + ')'
    );
});

var $cars = $('.car');
$('.car-model').on('click', function () {

    var $current = $cars.find('.current');
    var $next = $current.next();
    if ($next.length === 0) $next = $current.prevAll().last();

    $current.addClass('car--trans-out');
    setTimeout(function () {
        $current.removeClass('current').removeClass('car--trans-out');
        $next.addClass('current').addClass('car--trans-in');
        setTimeout(function () {
            $next.removeClass('car--trans-in');
        }, 1000)
    }, 1000);
})

.car{
    height:600px;
    padding:40px 0;
    background-color:#efefef;
    overflow:hidden;
}
.car .click{
    width:100%;
    padding:10px;
    text-align:center;
    border:1px solid #0094ff;
    margin-bottom:30px;
}
.car-image-container{
    position: absolute;
    left: 100%;
    overflow: hidden;
}
.current{
    position: relative;
    left: 0;
}
.current .current{
    left: 0;
}

.car .car-image .car__wheel{
    width:99px;
    height:100px;
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
}
.car .car-image .car__wheel.left{
    background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
    top:94px;
    left:98px;
}
.car .car-image .car__wheel.right{
    background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
    top:94px;
    right:75px;
}
.car--trans-in .car__wheel{
   animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
   animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
   animation: trans-in 1s ease-out;
}
.car--trans-out .car-image{
   animation: trans-out 1s ease-in;
}
.car--trans-in .car__wheel{
   animation: roll-in 1s ease-out;
}
.car--trans-out .car__wheel{
   animation: roll-out 1s ease-out;
}
.car--trans-in .car-image img{
   animation: bounce-in 1s ease-out;
}
.car--trans-out .car-image img{
   animation: bounce-out 1s ease-in;
}

@keyframes trans-in {
    0% {transform: translateX(100%);}
    80% {transform: translateX(0%);}
    100% {transform: translateX(0%);}
}
@keyframes trans-out {
    0% {transform: translateX(0%);}
    10% {transform: translateX(0%);}
    80% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}
@keyframes roll-in {
    0% {transform: rotate(0deg);}
    80% {transform: rotate(-720deg);}
    100% {transform: rotate(-720deg);}
}
@keyframes roll-out {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-720deg);}
}
@keyframes bounce-in {
    0% {transform: rotate(2deg);}
    70% {transform: rotate(2deg);}
    80% {transform: rotate(-1deg);}
    90% {transform: rotate(1deg);}
    100% {transform: rotate(0deg);}
}
@keyframes bounce-out {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(2deg);}
    100% {transform: rotate(2deg);}
}






.car .wheelEleContainer{
    cursor:pointer;
}



    
        
            
            
                
                    
                        
                            Car Model 1
                        
                    
                    
                        
                            Car Model 2
                        
                    
                    
                        
                            Car Model 3
                        
                    
                    
                        
                            Car Model 4

Note: please run code snippet in fullscreen

Jackson · Accepted Answer

You could use CSS animations to get the car to transition into the frame, another animation to make the car rotate as it is moving.

Take a look at this example jsFiddle I have done.

I am using a html structure like this:

...

Using jQuery I am adding some classes to the

which will allow us to attach CSS animations.

var $cars = $('.cars');
$('button').on('click', function(){

  var $active = $cars.find('.car--active');
  var $next = $active.next();
  if($next.length===0) $next = $active.prevAll().last();

  $active.addClass('car--trans-out');
  setTimeout(function(){
    /*Wait a second before removing the class*/
    $active.removeClass('car--active').removeClass('car--trans-out');
    $next.addClass('car--active').addClass('car--trans-in');
    setTimeout(function(){
        $next.removeClass('car--trans-in');
    },1000)
  },1000);
})

Edit: Here is another jsFiddle which is using the same markup and script as the original post with the addition of some class names and animations

Jquery - Animation as Slide

Second Problem

Answers (1)

Related Questions