Paper stack code 4/10/25

In this post ill be going over how i made this paper stack effect! feel free to use the code no credit needed, Im gonna be honest im pretty new to coding so this code might be a bit jank/there might be a better way to do it/it might not always work. please let me know in my Guestbook if you use this code or if you have any problems. there is some javascript btw.

CSS:
.stack { position: relative; flex: 1; padding: 40px; } .post { position: absolute; width: 90%; left: 5%; background-color: white; padding: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);/*creates a subtle shadow*/ border-radius: 6px; transition: transform 0.4s ease, z-index 0.3s ease; transform-origin: center center; } /* Unique offsets and styles for each post*/ #post1 { --original-transform: rotate(-2deg) translateY(0px); transform: var(--original-transform); z-index: 1;/*puts first post on bottom of stack, give the post you want on top the largest z index*/ } #post2 { --original-transform: rotate(1.5deg) translateY(15px); transform: var(--original-transform); z-index: 2; } #post3 { --original-transform: rotate(-1deg) translateY(30px); transform: var(--original-transform); z-index: 3; }

HTML:
<h2>Posts</h2> <ul id="postList"> <li onclick="bringToTop('post3')">Post 3 title</li> <li onclick="bringToTop('post2')">Post 2 title</li> <li onclick="bringToTop('post1')">Post 1 title</li> </ul> <main class="stack"> <div class="post" id="post1"> /*post 1 content*/ </div> <div class="post" id="post2"> /*post 2 content*/ </div> <div class="post" id="post3"> /*post 3 content*/ </div>

JS:
<script> let zIndex = 100; function bringToTop(postId) { const allPosts = document.querySelectorAll('.post'); allPosts.forEach((post) => { // Reset each to its original transform from the CSS variable const originalTransform = getComputedStyle(post).getPropertyValue('--original-transform'); post.style.transform = originalTransform; }); const selected = document.getElementById(postId); selected.style.zIndex = zIndex++; selected.style.transform = 'rotate(0deg) translateY(0px)'; } </script>

I made this because I couldnt find any interactive/non static paper stack effects on the interwebs. I built this for my own use primarily so its not perfect, again let me know if you try this out, have any problems, or reccomendations.

description of all the videos in the video player pt1. 4/9/25

1. Moomin Stream

This one is fairly self explanitory, its a stream of the moomin tv show from the 90s.

more info and links

From the Wikipedia article "Moomin[a] is a Dutch-Japanese[1][2] anime television series produced by Telecable Benelux B.V. and animated by Telescreen Japan. Based on the Moomin novels and comic strips by the Finnish illustrator and author Tove Jansson and her brother Lars Jansson,[3] it was the third anime adaptation of the property and the first to receive distribution in different countries worldwide. Moomin first aired on TV Tokyo from April 12, 1990, to October 3, 1991. The series had also been dubbed into English and aired on CBBC in United Kingdom during the same year."
checkout the Official Moomin Website for more info

2. Whale Shark Stream

A stream of the large tank at osaka aquarium.

more info and links

Music used: Glitch;"Astral travel","Serenity". Chino Yoshio:"Autumn of Kyoto","Small Happiness","Tsutsuji","Playing At the Bridge","The Way Home","Peace","Winter Cherry Blossoms","Sakurasakukoro"
check out the Aquarium Official Website

3. Time Masters(1982)

The full Time Masters Movie by René Laloux Known most prominantly for his work as the director of Fantastic Planet in Collaboration with the fantastic(no pun intended) artist Moebius who i(will) have a page for in my Graphics Junkyard

more info and links

Time Masters Wiki Page. There's apparently going to be an hd rerelease eventually..but we'll see. On a personal note I love this movie so much, i definately reccomend giving it a watch. I might be adding more short films by Rene Laloux to the videoplayer but as of 4/8/25 this is the only one, I recommend both time masters and Fantastic Planet very Highly, if you want more full length cinema by Laloux yo could also check out Gandahar I enjoyed it but it' not as solid throughout as fantastic planet or time masters. Both Fantastic planet and Gandahar are available on streaming services so I wont be adding them here but they are available on the Internet archive.

4. And Then We'll Be Okay

A philosophical story about a man, a snake, and a god.

more info and links

This was my first video from Exurb1a and i have since watched many more, check out his Youtube channel for more!

5. 1001 Nights

A feverish short film directed by and based on the work of Yoshitaka Amano who is known for their work on the Final Fantasy games and several anime (I have a page for his work in the Graphics Junkyard. The short film has an excellent score by the Philharmonic Orchestra.

more info and links

from the IMDB page:"Princess Budu sleeps, and dreams. She dreams of whimsical fairies and a wicked, restless beastial spirit. Her dream is one unmoored from identity and self - perhaps she is the fairy, perhaps those other fairies are other persons also. Also moving through her dream, always recurring in her thoughts is her lover Prince Kamar. The beastial spirit desires Budu; Kamar desires Budu, and she only has eyes for Kamar. Through her dream she floats and fades across an Arabian fantasia of minarets and mosques. These flickering moments, fleeting snatches of slumbered thought, are filled with an intoxicating, ethereal beauty."
Check out Yoshitaka Amano's Website

6. Cat Purring

A cat purring- it's very cute and calming.

7. Dimensions of Dialouge

Dimensions of Dialouge is a contected seires of stop motion short films by Czech director Jan Švankmajer whose work will be futher covered in an upcoming blog post about global animation in the 20th century (probably).

more info and links

Svankmajer has an ecellent adapation of Alice in Wonderland called Alice which I strongly reccomend. More of his short films may be added to the video player at a later date.
Learn more about Czechoslovakian Animation

8. Windaria

Windaria is a sci-fi fantasy anime movie released in 1986.

more info and links

from IMDB "As two countries wage war, a great valley is doomed for destruction. In an effort to save his home, Alan agrees to be a message carrier. In the process he is tricked into destroying a whole kingdom and his own life. The movie ends with him vowing to lead in the rebuilding of the valley to help right the incredible wrongs he has committed."