The Memory Games
Simple match the pairs game built in ReactJs.
Made with: HTML,CSS,JS (Babel)
3d Buttons With Scroll Effect
CSS buttons with parallax effect.
Made with: HTML,CSS (SCSS)
React-Spotify
This is React-Spotify, a React front end client that communicates with the Spotify API.
Made with:
Bootstrap 4 Mega Dropdown Menu Navbar
Mega Dropdown Menu Navbar - Bootstrap 4 code snippet full width dropdown menu.
Made with: HTML,CSS,JS
Bootstrap 4 Mega Dropdown Menu Navbar
Mega Dropdown Menu Navbar - Bootstrap 4 code snippet example demo.
Made with: HTML,CSS,JS
Glowing Stuff
Exploration of pulsing glow effects for a banner animation.
Made with: HTML,CSS
Animated Svg Frame Slideshow
An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles. Used anime.js for the animations.
Made with: HTML,CSS,JavaScript
Bootstrap 4 Switches
Bootstrap 4 switches (customizable via Sass).
Made with: HTML,CSS,JS
Css Custom Pproperty Hover Effects
Adding a cool hover/focus effect to icons from the Orion Icon Library with the help of CSS custom properties.
Made with: HTML,CSS (SCSS)
Document Thumbnail With Css Custom Property
Dog-ear will position itself it top right corner regardless of original size / aspect ratio of image. Effect achieved by using hidden img to set size of relatively positioned parent container - then two absolutely positioned pseudo elements with the same image as a background overlap to leave dog-ear gap top right. Image url supplied by custom property declared inline in HTML.
Made with: HTML (Slim),CSS (SCSS)
☑️ Transform Toggles, Will-Change ☑️
A transform-only version of Flexbox Toggles to compare performance and code. This takes it a little further with will-change for buttery-smooth animation without repaints.
Made with: HTML,CSS (Less)
Expanding Grid Item Animation
A grid item animation where the thumbnail scales up when the details view is opened. Used anime.js.
Made with: HTML,CSS,JavaScript
