Créer un effet de zoom-out sur un bloc html

Comment dézoomer une image ou tout autre bloc sur une page

Voici un bout de code jquery, recopié tel quel depuis les templates de codyhouse. Cet effet contrairement à d’autres de leurs template, a l’avantage de s’appliquer directement et marche à merveille sans effort. Je le recopie donc pour le garder en réserve. J’ai une div.home_image qui contient une image en arrière plan. En appliquant tel quel cet effet, j’obtiens un effet de zoom-out dès que je scroll à la page et qui revient à sa position initiale quand je remonte la page.


jQuery(document).ready(function($){
  var introSection = $('.home_image'),
    introSectionHeight = introSection.height(),
    //change scaleSpeed if you want to change the speed of the scale effect
    scaleSpeed = 0.3,
    //change opacitySpeed if you want to change the speed of opacity reduction effect
    opacitySpeed = 1; 
  
  //update this value if you change this breakpoint in the style.css file (or _layout.scss if you use SASS)
  var MQ = 1170;

  triggerAnimation();
  $(window).on('resize', function(){
    triggerAnimation();
  });

  //bind the scale event to window scroll if window width > $MQ (unbind it otherwise)
  function triggerAnimation(){
    if($(window).width()>= MQ) {
      $(window).on('scroll', function(){
        //The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
        window.requestAnimationFrame(animateIntro);
      });
    } else {
      $(window).off('scroll');
    }
  }
  //assign a scale transformation to the introSection element and reduce its opacity
  function animateIntro () {
    var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5),
      scaleValue = 1 - scrollPercentage*scaleSpeed;
    //check if the introSection is still visible
    if( $(window).scrollTop() < introSectionHeight) {
      introSection.css({
          '-moz-transform': 'scale(' + scaleValue + ') translateZ(0)',
          '-webkit-transform': 'scale(' + scaleValue + ') translateZ(0)',
        '-ms-transform': 'scale(' + scaleValue + ') translateZ(0)',
        '-o-transform': 'scale(' + scaleValue + ') translateZ(0)',
        'transform': 'scale(' + scaleValue + ') translateZ(0)',
        'opacity': 1 - scrollPercentage*opacitySpeed
      });
    }
  }
  });

Mis à jour le Par Copier coller | Dans jQuery