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