Help me find a framework that could make such an animation (with pictures that)

    2 answers 2

    http://jsfiddle.net/cvcpzknp/6/

    The idea is this. If there is a need to support older browsers, then you need to add the appropriate prefixes and, possibly, change the unit of measurement.

    function update() { var scrolled = $(document).scrollTop(); var vh = $(window).height() / 100; $("main section").each(function(i) { var section = $(this); var angle = Math.max(0, Math.min(1, (section.offset().top - (scrolled + 10*vh)) / (100 * vh))); console.log(i, section.offset().top - (scrolled + 10*vh), angle); section.css('transform', 'rotate(' + (i&1 ? '-' : '') + angle*8 + 'deg)'); }); } $(document).scroll(update); $(window).resize(update); $(update); 
     header { height: 50vh; } main { overflow: hidden; } main section { width: 90vw; height: 90vh; background: silver; margin: 1vh auto; transition: transform linear .25s; transform-origin: top left; } main section:nth-child(even) { transform-origin: top right; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> Some content to be scrolled </header> <main> <section>First</section> <section>Second</section> <section>Third</section> </main>

      If we are talking about logo animation, then there is just an animated gif on hover that shows:

       .logo:hover img:first-child { display:none } .logo:hover .logo-gif { display:block }

      If you want to do something like css, you need to use keyframes. Although it seems to have written somewhere that with a change in the background of them there can be problems. Need to check.

      • thanks, but there was another meaning, animation when scrolling, large blocks change their rotate, I'm interested in it - rostov88
      • Got it. In the evening I will answer if I do not forget. It is not difficult to do. - Qwertiy ♦