Latest Addition: You can now view it online at https://codepen.io/nikczemnydev/pen/WNmXjyL
HTML, CSS, Vanilla JavaScript - ExpandingGallery - a pretty gallery to showcase some pretty pictures as well as my skills. : ) This web application product is an engaging image gallery that features five panels. Each panel displays a portion of a picture, creating an intriguing mosaic effect. One of these panels is always expanded, revealing the full image. The magic lies in the smooth animations: when a panel expands, it elegantly grows in size, and when it contracts, it seamlessly transitions back to its original panel state. This interactive gallery provides an enjoyable browsing experience, allowing users to explore images with a touch of elegance and flair. 📸✨
What it looks like (please keep in mind GIF framerate is very limited, the animations are buttery smooth):
- Download index.html, style.css and script.js files.
- Put all 3 of them in the same folder (I know it's good practice to use subfolders - I kept it this way for ease of use, which is also why I linked photos online as opposed to local pics.)
- Click index.html, it should open in your browser, if it doesn't (maybe because your default .html program is a text/code editor) then drag the index.html file and drop it in your browser window.