The image shows everything

On the image everything is shown, help to realize this effect.

Help to realize this effect, maybe someone did something similar?

I implemented it like this. But smoothness does not work and does not cross-browser:

$(document).on('mousewheel DOMMouseScroll', function(event){ var course = event.originalEvent.wheelDelta; var top = parseInt($('.about_info-content-inner').css('top')); var height = parseInt($('.about_info-aerostat').css('height')); var right = parseInt($('.about_info-aerostat').css('right')); if (top == 0 || top < -185) { if (course > 0) { $('.about_info-content-inner').css({'top': 0}); } else if (course < 0) { $('.about_info-content-inner').css({'top': -1}); } } else if (top == -185) { if (course > 0) { $('.about_info-content-inner').css({'top': -184}); } else if (course < 0) { $('.about_info-content-inner').css({'top': -185}); } } else { if (course > 0) { $('.about_info-content-inner').css({'top': (top + 1)+'px'}); $('.about_info-aerostat') .css({'height': (height + 1)+'px'}) .css({'right': (right - 2)+'px'}) } else if (course < 0) { $('.about_info-content-inner').css({'top': (top - 1)+'px'}); $('.about_info-aerostat') .css({'height': (height - 1)+'px'}) .css({'right': (right + 2)+'px'}) .animate({opacity: .6}, 2500); } } }); 
 .layout_container { width: 1920px; height: 1080px; display: flex; flex-direction: column; } .layout_header { display: flex; flex-direction: column; flex: 0 0 92px; } .layout_content { position: relative; flex: 1 0 auto; } .layout_footer { @include space-between; align-items: flex-end; flex: 0 0 76px; border-top: 1px solid darken($gray, 35%); } .about_info-title { font-size: 2em; font-weight: 400; color: $gold; margin-top: 18rem; margin-left: 16.5rem; margin-bottom: 2.5rem; } .about_info-content { font-size: 1.3em; line-height: 2.5rem; color: $white; width: 440px; height: 170px; margin-left: 17rem; overflow: hidden; position: relative; } .about_info-content-inner { position: absolute; top: 0; } .about_info-aerostat { position: absolute; height: 500px; min-height: 300px; max-height: 500px; top: 10%; right: 20%; } .about_info-aerostat img { height: 100%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="layout_container"> <div class="layout_header"> header </div> <div class="layout_content"> <div class="about_info"> <div class="about_info-title">Content-title</div> <div class="about_info-content"> <p class="about_info-content-inner">content content content content content content content content content content content content content content content content content content content content content content content content content content content</p> </div> <div class="about_info-aerostat"> <img src="http://placehold.it/500x300" alt=""> </div> </div> </div> <div class="layout_footer"> footer </div> </div>

    1 answer 1

    Look here This is the site of one of the javascript plugins for parallax scrolling. There are other libraries.

    A very simple application example for a background.

     skrollr.init({ smoothScrolling: true, forceHeight: false }); 
     #bg1 { background-attachment: fixed; background-image: url(http://placehold.it/150x150); } #skrollr-body { height: 1000px; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script> <div id="bg1" data-0p="background-position:0px 0px;" data-100p="background-position:-500px -1000px;"> <div id="skrollr-body"> </div> </div>