CSS and JavaScript projects

Buttons

Ease examples ⇨ Button tilt with letter spin ⇨ Circle swipe ⇨ Cross swipe ⇨ Diagonal swipe ⇨ Expanding border line ⇨ Expanding border line even sides ⇨ Flip and replace slide ⇨ Flip open slides ⇨ Jenga slide boxes ⇨ Button experiments ⇨ Pulsing button ⇨ Rounded corner push up or down ⇨ Scale down appear ⇨ Shaking button hover ⇨ Slide flip ⇨ Slide transform ⇨ Social media button highlight hover ⇨ Swap borders ⇨ Swipe color change ⇨ Triangle to center white to color ⇨ Wave button ⇨

Menus

Angle corner & background corner ⇨ Color background faded menu items ⇨ Color under title ⇨ Four angle corners ⇨ Four box popup ⇨ Menu item scroll upon hover ⇨ Top bottom border ⇨

Images

Diagonal caption cover ⇨ Fadeout image zoom in elements ⇨ Popup bottom caption box ⇨ Popup caption opacity ⇨ Rotate in caption cover ⇨ Scale out image caption cover ⇨ Spin out picture caption ⇨ Tilt and caption appear ⇨ Top down fade in caption cover ⇨

Cards

Cover shrink down reveal text ⇨ Hover over card description to side ⇨ Pop down card description ⇨ Pop up top reveal card ⇨ Slide up color on hover card ⇨ Stack cards profile ⇨ Scaleup details cover picture ⇨

Text

Smoky text ⇨ Swiping color ⇨ Text box swiping border ⇨

Animation

Background animation ⇨ Background animation2 ⇨ Bouncing balls ⇨ Button hover animation dotted circle ⇨ Chasing boxes loader ⇨ Clacker toy animation ⇨ Color bar across words ⇨ Color boxes loading spinner ⇨ Fade out squares loader ⇨ Hexagon slider balance ⇨ Infinite scroll animation ⇨ Line loader ⇨ Loading color change words ⇨ Loading circle edge ⇨ Loading circles ⇨ Loading text animation ⇨ Menu background popup menu background popup ⇨ Phone call pulse animation ⇨ Pulsing heartbeat ⇨ Rain animation ⇨ Rotating box ⇨ Rotating title ⇨ Scrolling background ⇨ Slideshow ⇨ Text background scroll ⇨ Text rotater ⇨ Vertical colored lines music levels ⇨ Vertical lines music levels ⇨ Border radius swirly ⇨ Glowy circle loader ⇨ Clip path text change color ⇨ Pencil draw outline button ⇨ Large text transparent background menu ⇨ Rainy cloud ⇨ Glowing loader dots ⇨ Glowing loader dots ⇨ Swiping menu list ⇨ Bouncy circle loader ⇨ Shrink menu list ⇨

Clip Path

Split text loading ⇨ Split background color loading ⇨ Circle expanding background ⇨ Expanding text clip path ⇨ Expanding photo clip path ⇨ Flip image page clip path ⇨ Split menu item ⇨

JavaScript and CSS Animations

Text popup colors on hover ⇨ Circle menu spread out icons ⇨ Parallax website ⇨ Expanding profile card ⇨ Clip path animation ⇨ Section website animated ⇨ Scrolling background ⇨ Website animated banner ⇨ Collapsing navigation banner ⇨ Scrolling background and text ⇨ Focus background ⇨ Text focus hover ⇨ Glassmorphism animation ⇨ Stacked cards animation ⇨ Glowy buttons ⇨ Rolling circles animation ⇨ Liquid glass animation ⇨

JavaScript Tutorial Projects

Guess the numbers ⇨ Tip calculator ⇨ Running tracker ⇨ Photo effects ⇨ Memory game ⇨ Music player app ⇨ Number game ⇨ Parallax-Flower pages ⇨ Parallax-Googly eyes ⇨ Parallax ⇨