{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/049db931b443420dbaf7531f3e3a96f0\" frameborder=\"0\" width=\"1280\" height=\"960\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":960,"width":1280,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":960,"thumbnail_width":1280,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/049db931b443420dbaf7531f3e3a96f0-00001.gif","duration":168,"title":"Animation image au scroll groupe Facebook","description":"Voici le code HTML à mettre sur la page :  \n\n                                                                                                                                                                                                \n \n  \n    \n      \n    \n  \n\n\n.image{\n  display:block;\n  width:auto;\n\n}\n.flex{\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n}\n\n.splitting.cells img {\n  width: 100%;\n  display: block;\n}\n@supports (display: grid) {\n  .splitting.cells {\n    position: relative;\n    overflow: hidden;\n    background-size: cover;\n    visibility: hidden;\n  }\n  .splitting .cell-grid {\n    background: inherit;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -ms-grid;\n    display: grid;\n    grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr);\n  }\n  .splitting .cell {\n    background: inherit;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    opacity: 1;\n  }\n  .splitting .cell-inner {\n    background: inherit;\n    position: absolute;\n    visibility: visible;\n    /* Size to fit the whole container size */\n    width: calc(100% * var(--col-total));\n    height: calc(100% * var(--row-total));\n    /* Position properly */\n    left: calc(-100% * var(--col-index));\n    top: calc(-100% * var(--row-index));\n  }\n\n\nwindow.addEventListener(\"load\", () => {\n  const results = Splitting({\n    target: \".image\",\n    by: \"cells\",\n    image: true,\n    rows: 6\n  });\n\n  function myCallback(el) {\n    var a = new TimelineMax();\n    return a.staggerFromTo(\n      \".cell\",\n      0.5,\n      {\n        x: 400,\n        opacity: 0\n      },\n      {\n        x: 0,\n        opacity: 1,\n        ease: Power2.ease\n      },\n      0.15\n    );\n  }\n\n  $(\".image\").waypoint(\n    function(direction) {\n      if (direction === \"down\") {\n        /* add this.destroy() if you want the animation to only play once */\n        myCallback();\n      }\n    },\n    {\n      offset: \"100%\"\n    }\n  );\n});\n \n\n\n\n\n\n\n\nVoici le code à mettre dans le pied de page :\n\n\n\n\n\n\n\n\n"}