JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<img src="http://m.megagroup.ge/i/images/website.png" alt="website production" class="apoimg" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="http://m.megagroup.ge/i/images/seo.png" alt="website production" class="apoimg2" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="http://m.megagroup.ge/i/images/website.png" alt="website production" class="apoimg" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="http://m.megagroup.ge/i/images/seo.png" alt="website production" class="apoimg2" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />

CSS

.apoimg, .apoimg2 {
    opacity:0;
}
/*FONTS*/
 @font-face {
    font-family:'Ubuntu';
    src:url("../fonts/ubuntu_r.ttf");
    -webkit-font-smoothing: antialiased !important;
}
@font-face {
    font-family:'Prime';
    src:url("../fonts/mega_prime.otf");
    -webkit-font-smoothing: antialiased !important;
}
/*END FONTS*/

/*FONTS*/
 @font-face {
    font-family:'Ubuntu';
    src:url("../fonts/ubuntu_r.ttf");
    -webkit-font-smoothing: antialiased !important;
}
@font-face {
    font-family:'Prime';
    src:url("../fonts/mega_prime.otf");
    -webkit-font-smoothing: antialiased !important;
}
/*END FONTS*/

/******************************** Mega Group ***************************************/
 * {
    margin: 0px;
    padding: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline:none;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-wrapper {
    min-height: 100%;
    margin-bottom: -500px;
}
* html .page-wrapper {
    height: 100%;
}
.page-buffer {
    height: 15px;
    width:100%;
    float:left;
    margin-top:10px;
}
html {
    overflow-y:scroll;
}
img {
    border:none;
    max-width:100%;
}
body {
    background:#fff;
    font:13px/1.3"MegaGroup";
}
h1, h2, h3, h4, h5, h6 {
    font-weight:normal;
    color:#3a3e3f;
}
/*===========Main page===========*/
 .b-main_services {
    overflow:hidden;
    margin-bottom:50px;
}
.b-main_services span {
    color:#333;
    font:bolder 50px/70px'MegaGroup Bolder';
    text-align:center;
    width:100%;
    margin-top:30px;
    float:left;
}
.s-service {
    overflow:hidden;
    float:left;
    margin-top:60px;
}
.s-website_img {
    width:50%;
    text-align:center;
}
.s-content {
    width:50%;
    margin-top:30px;
    float:left;
}
.s-content h2 {
    font-size:25px;
    font-weight:bold;
    margin-bottom:25px;
    color:#565f65;
}
.s-content_title {
    font-size:25px;
    font-weight:bold;
    margin-bottom:25px;
    color:#565f65;
}
.s-content p {
    font-size:20px;
   ...

JavaScript

$(document).ready(function () {
    $('.apoimg:first').addClass('fadeInLeft').removeClass('apoimg');
});

document.body.onscroll = function() {
    $('img.apoimg').each(function() {
        if($('body').scrollTop() >= $(this).offset().top-$(this).height()) {
            $(this).addClass('fadeInLeft').removeClass('apoimg');
        };
    });
     $('img.apoimg2').each(function() {
        if($('body').scrollTop() >= $(this).offset().top-$(this).height()) {
            $(this).addClass('fadeInRight').removeClass('apoimg2');
        };
    });
};