CODEWITHSUNDEEP
javascript
Jason Axelrod
Jason Axelrod

Reputation: 7805

Animated javascript without jQuery?

So I wrote a very simple html/js script to be used in OBS (Open Broadcaster Software):

http://8wayrun.tv/scripts/sf4.html

setTimeout(function() {
    $("#file1").show('slide', {direction: 'left'}, 1500);
    $("#file2").show('slide', {direction: 'right'}, 1500);
    setTimeout(function() {
        $('#vs').fadeIn({queue: false, duration: 500});
        $('#vs').animate({ width: "300", top: "160", left: "490" }, 500);
    }, 1500);
}, 1000);

The problem with this is that jQuery and jQuery-UI I gigantic libraries. Loading up half a meg of libraries in OBS causes some severe performance issues. As you can see, I am doing some pretty simple stuff. I was wondering if someone could help me get this function running without the use of any external libraries. I need it to run as smooth as possible as I broadcast in 60fps.

Upvotes: 0

Views: 122

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Pure css alternative (Fluid, fast and easy):

*{box-sizing:border-box;padding:0; margin:0;}

:root,body{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background: ghostwhite;
}

main,figure{
    width:100%;
    height:100%;
    overflow:hidden
}
main{
    position:absolute;
    left:0;
    top:0
}
figure{
    position:relative
}
figure img:nth-child(1){
    animation: introLeft .6s ease
}
figure img:nth-child(2){
    transform:scaleX(-1);
    animation: introRight .6s ease
}
figure img:nth-child(3){
    width:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -100px;
    animation: introScale .9s ease
}
figure img:not(:nth-child(3)){
    width:48%
}

@keyframes introLeft {
    from{transform:translate3d(-100%,0,0)}
    to{transform:translate3d(0,0,0)}
}

@keyframes introRight {
    from{transform:translate3d(100%,0,0) scaleX(-1)}
    to{transform:translate3d(0,0,0) scaleX(-1)}
}
@keyframes introScale {
    0%{transform:scale(4);opacity:0}
    80%{transform:scale(4);opacity:0}
    100%{transform:scale(1);opacity:1}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<main>
  <figure>
      <img src=http://i.imgur.com/9iHCndo.png />
      <img src=http://i.imgur.com/ARZv1dy.png />
      <img src=http://i.imgur.com/Q2jTGlE.png />
  </figure>
</main>

Upvotes: 2

Related Questions