this an animation made in sort of traditional way, there is 10 frames to it, and each one of them plays at a different speed. this is set with CSS custom variables, as it can be seen on the inline style for each frame
you can start the animation by clicking the lightbulb
as you could see, when the first event fired, the whole screen went blank, thats an animation of a gradient on an invisible overlay on top of the whole page.
when you clicked the book on the other window, a signal was sent and the overlay turned invisible again, also this piece of text was "unhidden".
this are a bunch of really interesting implementations for interactive media, a web game could be made where your inventory is a separated window, as well of your character sheet and gamemap.
(like kingsway)
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius a magni facere. Nobis dignissimos, laboriosam nihil consequatur facere pariatur aliquid eum consequuntur unde explicabo voluptatibus eligendi tempora architecto soluta iure veritatis modi et a. Accusamus optio distinctio commodi
aut odio sint architecto obcaecati, natus beatae, sed veniam itaque laboriosam ea. Exercitationem repudiandae maxime ullam aperiam ipsam ab? Optio ratione reiciendis tempore, quod deleniti aliquid minima quae veniam voluptatem possimus magni iure eaque? Perferendis dolor laudantium inventore
adipisci. Aut, optio iure. Esse beatae quasi eligendi perspiciatis quam commodi dignissimos autem rerum eum doloremque ullam tenetur amet ratione voluptatum ut explicabo quae quod veritatis facere, magnam sed sit. Deserunt ut sint aspernatur veniam dolorum molestias, dolor quisquam error
recusandae itaque est voluptatum facere odit ex. Corrupti quas, maiores numquam ea repellat excepturi est ratione labore, nobis id a molestiae fugit tempore voluptate sapiente enim ipsum esse maxime temporibus magnam unde porro accusamus! Harum, rerum. Ea illum at nemo ratione quas maiores
suscipit blanditiis, dolorem iusto natus dolor et laborum asperiores, id, nulla commodi cumque. Eveniet inventore quasi veritatis laudantium, blanditiis quibusdam accusamus non veniam tempore nesciunt mollitia corporis quaerat laboriosam porro! Nisi aperiam error, possimus aliquid magnam
suscipit consequatur provident voluptatum ex, vel illum quo labore facilis itaque exercitationem ad velit. Eum quibusdam voluptatibus a, blanditiis tenetur delectus nam dicta aut neque dolor dolore distinctio ipsa ipsum. Recusandae voluptate ipsa eveniet commodi nihil, facilis adipisci
quidem minima. Nobis distinctio corrupti explicabo magnam aut provident amet vitae laboriosam dolore cupiditate quasi, excepturi ea necessitatibus. Dolores facilis asperiores eius rerum perspiciatis rem necessitatibus vel inventore, aliquam quasi quisquam odio et, doloribus sapiente
possimus, sit sunt soluta veritatis harum. Veniam mollitia quia labore rerum nostrum. Dolor, labore ipsam aperiam minus voluptate perferendis. Iusto voluptas voluptates esse deserunt ratione reiciendis eaque totam quidem eum. Asperiores, unde?