serggrodno,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 2000px;
position: relative;
overflow-x: hidden;
}
#qrleft, #qrright{
opacity: 0;
width: 41.5%;
height: 250px;
width: 41.5%;
background-color: rgb(243, 242, 235);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
margin-top: 40px;
margin-bottom: 80px;
box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
position: absolute;
-webkit-transition: all 4s ease-in-out 0s;
-moz-transition: all 4s ease-in-out 0s;
-o-transition: all 4s ease-in-out 0s;
transition: all 4s ease-in-out 0s;
}
#qrleft{
left: -43%;
}
#qrleft.qr_download_add
{
left: 0px;
opacity: 1;
-webkit-transition-duration: 2.5s;
-moz-transition-duration: 2.5s;
-o-transition-duration: 2.5s;
transition-duration: 2.5s;
}
#qrright
{
right: -43%;
}
#qrright.qr_download_add
{
opacity: 1;
right: 0px;
-webkit-transition-duration: 2.5s;
-moz-transition-duration: 2.5s;
-o-transition-duration: 2.5s;
transition-duration: 2.5s;
}
.qr_button{
display:block;
height: 35px;
background: url(../images/QR/more.png) no-repeat;
background-size: 53%;
background-position: center center;
width: 150px;
position: relative;
top: 9px;
margin: auto;
border-radius: 8px;
border: 1px solid rgba(143, 143, 143, 0.83);
box-shadow: 3px 10px 10px -10px rgba(0, 0, 0, 0.5);
}
.qr_center_block{
width: 120px;
height: 120px;
background: transparent url("../images/button_back/ico_photo.png") no-repeat scroll center center / 65% auto;
position: relative;
left: 31%;
bottom: 3px;
transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-webkit-transition: .3s ease;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
}
.qr_underline{
vertical-align: middle;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.qr_underline:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #FFFFFF;
height: 2px;
-webkit-transition-property: left, right;
-moz-transition-property: left, right;
-o-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.qr_underline:hover:before, .qr_underline:focus:before, .qr_underline:active:before {
left: 0;
right: 0;
}
.qr_top{
background: url(../images/QR/qr_look_vd.png) no-repeat;
background-position: center center;
position: relative;
width: 90%;
height: 55px;
margin: 10px 5%;
box-shadow: 3px 10px 10px -10px rgba(0, 0, 0, 0.5);
-webkit-filter: grayscale(90%);
-webkit-filter: grayscale(.9);
filter: grayscale(90%);
filter: gray;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var a = $("#qrleft, #qrright");
$(window).scroll(function(){
if ( $(this).scrollTop() > 55 && a.hasClass("qr_download_add") ){
a.removeClass("qr_download_add");
} else if($(this).scrollTop() <= 55 && !a.hasClass("qr_download_add")) {
a.addClass("qr_download_add");
}
}).scroll();
})
</script>
</head>
<body>
<div id="qrleft" >
<div class="qr_top"></div>
<div class="qr_center_left"><div style="position: relative; width: 100%; height: 100%; bottom: 25px;"><div id="qr_center_l" class="qr_center_block"></div></div>
</div>
<div class="qr_bottom">
<a id="qr_button_left" class="qr_button qr_underline" style="background-color: #bf0e0e;" href="#" title=""></a>
</div>
</div>
<div id="qrright" >
<div class="qr_top"></div>
<div class="qr_center_right"><div id="qr_center_r" class="qr_center_block" ></div></div>
<div class="qr_bottom">
<a id="qr_button_right" class="qr_button qr_underline" style="background-color: #bf0e0e;" href="#" title=""></a>
</div>
</div>
</body>
</html>