Good afternoon, tell me, probably someone has a paralax in mind, only that he would be lightly demanding, let's say, light, can crossbarusernaya implementation on css. And maybe there is a similar plug-in to realize the effect as on the first screen, the mouse movement actuates 5 blocks with information.

  • If you need a light example, there is an option on pure css, but I would not say that it is very cross-browser codepen.io/evolutionxbox/pen/sLvrJ - Vasya Shmarovoz
  • 2
    The best and most resource-free parallax is the absence of parallax. - KoVadim
  • @KoVadim I completely agree, but it’s all about his presence. - Anton Essential

2 answers 2

By parallax effect:

$(document).ready(function() { var wHeight = $(window).height(); function parallax() { var pHeight = $(this).outerHeight(); var pMiddle = pHeight / 2; var wMiddle = wHeight / 2; var fromTop = $(this).offset().top; var scrolled = $(window).scrollTop(); var speed = $(this).attr('data-parallax-speed'); var rangeA = (fromTop - wHeight); var rangeB = (fromTop + pHeight); var rangeC = (fromTop - wHeight); var rangeD = (pMiddle + fromTop) - (wMiddle + (wMiddle / 2)); if (rangeA < 0) { rangeA = 0; rangeB = wHeight } var percent = (scrolled - rangeA) / (rangeB - rangeA); percent = percent * 100; percent = percent * speed; percent = percent.toFixed(2); var animFromBottom = (scrolled - rangeC) / (rangeD - rangeC); animFromBottom = animFromBottom.toFixed(2); if (animFromBottom >= 1) { animFromBottom = 1; } $(this).css('background-position', 'center ' + percent + '%'); $(this).find('.parallax-content').css('opacity', animFromBottom); $(this).find('.parallax-content').css('transform', 'scale(' + animFromBottom + ')'); } $('.parallax').each(parallax); $(window).scroll(function(e) { $('.parallax').each(parallax); }); }); 
 body { margin: 0; padding: 0; height: 800px; } .main-slide { width: 100%; height: 100vh; margin-bottom: 400px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parallax main-slide" style="background: transparent url(http://duetdress.com/images/mslide.jpg) no-repeat scroll center 0% / cover ;" data-parallax-speed="-1"></div>

Here you can see.

As for the movement of the blocks, I usually use jParallax for such solutions.

http://stephen.band/jparallax/

  • Thanks for the example, I’m more interested in how to track mouse movement and translate parameters to objects, probably tell me how to do this, here is the structure jsfiddle.net/antonessential/fsvq4odm - Anton Essential

Here is the solution for the second parallax effect:

  var $layerParallax = $('.layer-parallax'); if ( ! Modernizr.touch ) { if ( $layerParallax.length > 0 ) { $layerParallax.parallax(); } } 
 .layer-parallax { display:flex; margin: 0 auto; width: 800px; margin-top: 20vh; } .layer { background: red; color: white; float: left; width: 10%; height: 100px; border: 1px solid black; transform-style: preserve-3d; backface-visibility: hidden; } .layer:nth-child(1) { left: 0; z-index: 1; } .layer:nth-child(2) { left: 10% !important; z-index: 2; } .layer:nth-child(3) { left: 20% !important; z-index: 3; } .layer:nth-child(4) { left: 30% !important; z-index: 4; } .layer:nth-child(5) { left: 40% !important; z-index: 3; } .layer:nth-child(6) { left: 50% !important; z-index: 2; } .layer:nth-child(7) { left: 60% !important; z-index: 1; } 
 <script src="http://agstudio.pro/js/jquery-2.1.4.min.js"></script> <script src="http://agstudio.pro/js/jquery.parallax.min.js"></script> <script src="http://agstudio.pro/js/modernizr.custom.js"></script> <div class="row layer-parallax"> <div class="layer" data-depth="0.25">1</div> <div class="layer" data-depth="0.5">2</div> <div class="layer" data-depth="1">3</div> <div class="layer" data-depth="1.5">4</div> <div class="layer" data-depth="1">5</div> <div class="layer" data-depth="0.5">6</div> <div class="layer" data-depth="0.25">7</div> </div>

I think the principle will be clear, and the rest will be finalized by yourself.

  • I took your copy-paste code, it does not work for me, there are no translays, for some reason the parent container only moves, and the example does not work here for some reason - Anton Essential
  • The example works exactly. Look at the code on your site, the values ​​change? Is the browser version the latest? - Alexey Giryayev
  • Yes, thank you very much, I’m sorry, forgive me, I ignored the layer class, only the parent translates for this, oddly, judging by everything, something is screwed into this class in the library. - Anton Essential