JavaScript that splits images into left and right halves for a page‑turn effect (mamImgPager.js)
A lightweight JavaScript that splits each image into left and right halves and switches them with a page‑turn‑style animation.
By splitting the image cleanly down the middle and animating both halves, this script creates a unique and visually engaging page‑turn effect.
How to Use
-
Download mamimgpager.js using the button above.
-
In the file where you want to use mamImgPager, include the script as follows
using a relative or absolute path:
<script src="./js/mamimgpager.js"></script>
-
At the location where you want to display the pager, create a <div> with the class
"mamimgpager" and place <img> tags inside it.
All images must be the same size.
<div class="mamimgpager"> <img src="./imgs/c001.jpg"> <img src="./imgs/c002.jpg"> <img src="./imgs/c003.jpg"> <img src="./imgs/c004.jpg"> </div>
