Добрый день!
Есть код:
div id="imagesequence">
img id="myimg" src=
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00000.jpg
/div
style
#imagesequence {
width: 100%;
height: 100vh;
}
#myimg {
width: 100%;
height: 100vh;
object-fit: cover;
overflow: hidden;
}
style
script
// define images
var images = [
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00001.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00002.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00003.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00004.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00005.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00006.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00007.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00008.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00009.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00010.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00011.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00012.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00013.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00014.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00015.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00016.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00017.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00018.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00019.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00020.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00021.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00022.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00023.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00024.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00025.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00026.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00027.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00028.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00029.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00030.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00031.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00032.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00033.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00034.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00035.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00036.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00037.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00038.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00039.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00040.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00041.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00042.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00043.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00044.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00045.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00046.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00047.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00048.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00049.jpg",
"
https://portal.illan.ru/landing/Farfor_cups/SEQ_WE... 1_00050.jpg"
];
// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};
// create tween
var tween = TweenMax.to(obj, 0.5,
{
curImg: images.length - 1, // animate propery curImg to number of images
roundProps: "curImg", // only integers so it can be used as an array index
repeat: 0, // repeat 3 times
immediateRender: true, // load first image automatically
ease: Linear.easeNone, // show every image the same ammount of time
onUpdate: function () {
$("#myimg").attr("src", images[obj.curImg]); // set the image source
}
}
);
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave',
}
});
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: "100%"})
.setTween(tween)
.setPin("#imagesequence")
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
