Search
A CSS and HTML Only Carousel Slider
Why is it that sliders and carousels need a bunch of javascript and other css files to get them working? I have seen so many complex sliders with a lot of javascript and libraries that may not even b..
Two Clickable Logo Promo Box Section Foundation
Just a quick clickable two box section with some logos and radial backgrounds, foundation for grid and responsive action. Quick demo:
Magical Text Effect
Add some sparkles to your text. Add some stars and rainbow colour effects to your text, source linked below.
Make your site look like windows 7
How can i make my website look like Windows 7? You can just add the Windows 7 CSS Framework to your site, and it will look like windows 7. Well almost like it, you will also have to add some custom c..
Change your cursor into an Emoji Cursor or Image Cursor
You can use the following property to change the cursor on an element. The property we will be changing is cursor Preview of the Cursor States About the Cursor CSS Property The curso..
Radial Glow under cursor on box hover over effect
What is Radial Glow under cursor on box hover over effect? This code will allow the targeted boxes to have a radial glow effect on mouse over, so when you move your pointer over the box or element th..
Pure CSS 3D Flipping Book with Animations
What is Pure CSS 3D Flipping Book? Pure CSS 3D Flipping Book is a pure CSS and HTML flipping book animation that you can use to display content in a virtual book format. Preview a preview of Pure C..
button animations hover and fill animation
Why would i want to use animations on my buttons? Button animations can be used for a variety of reasons. They can be used to add aesthetic appeal to a website or web application, or to provide a vis..
button on focus swing animation
Creates a swing animation on focus. Use an appropriate transition to animate changes to the element. Use the :focus pseudo-class to apply an animation that uses ..
A fresh new and super tiny CSS Reset
A nice and small CSS reset script using newer selector tags than some of the older reset scripts. Features This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘..
Lightweight and powerful image lightbox and previewer script
Lightweight and powerful javascript image preview plug-in, silky animation allows you to elegantly preview the images in your website. Out of the box, you don't need extra configuration (by default) o..
zoomist.js: Library for easy Image Zoom & Pan
What is zoomist.js? zoomist is a javascript library that adds some nice zoom controls to your selected image. Rather than popping out the image in a modal or some other kind of overlay it adds contro..
Atropos Stunning touch-friendly 3D parallax hover effects
Atropos Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Preview Features Touch Friendly: Atro..
Slider Show - a standalone object and image slider
What is Slider Show ? Slider Show is a standalone image carousel and slider. You can add text and images into each item and the number of the slide, and it will switch between them. This library..
Micro Modal a tiny animated light accessible modal script
What is Micro Modal? Micro Modal is a Tiny, dependency-free javascript library for creating accessible modal dialogs The aim of this library is to make modal dialogs accessible and easy to include i..
Drop Shadow Rotation on Card Element
What is it? A Card element with a rotating drop shadow animation with colour changes. What can i use this for? You could use this animation to add some character to your own elements. Conc..
A Collection of Button Hover Over Effects
What is it? A Large collection of buttons with hover over animations and styles. What can i use this for? You can use these to make the buttons on your website or web project more animated Concl..
Amazing Stripe Website Gradient Animation
What is it? An animated background using javascript html and css to achieve. What can i use this for? You could use is on the background in your website, or maybe on a hero type image. ..
Animated Success Button with Confetti
What is Animated Success Button with Confetti? This is a success button, well an action button that has a loading function as well as a success message and confetti when clicked, all contained within..
Project Management Dashboard UI Elements
Very slick Project management dashboard, showing some amazing UI Elements. Features Dark and Light Mode Listing Modes, in grid vs list Client Messages Popout section This is all in pure h..
404 Lost in Space Animated
An interesting take on a 404 error not found page with a space theme.
Login form with floating placeholder text and very animated bright submit button
Here is a login form with animation around the submit button and as you mouse over it the button glows like a crazy nut! Also notice that the placeholder text floats over the input fields and when yo..
checkbox groups with icons that highlight when checked
Here we have a nice way to layout some checkboxes in group format, giving each checkbox an icon and also a title. A nice form layout for checkboxes. Also would be good for touch input. &..
Blob Navigation Menu Selection Animated
This seemingly innocent menu has a hidden animation in it, just click on each icon to see the change, something different and out of the box for this one.
Neumorphic UI Element Examples
Here is a very slick example of Neumorphic ui elements, with some active examples. Credits Codepen, Maria M. Muñoz
Image slider with multiple controls and mobile swipe control
A snazzy looking image and content slider, with some nice content animations. Using GSAP for the animations, no JQuery required for this slider.
Glassmorphism Creative Cloud App Redesign
A full ui for Creative Cloud redesigned in html css and javascript, amazing work by Aysenur Turk. It even has responsive views, dark and light mode, and the tabs are functional.
Animated Tab Bar
A very stylish and animated tab bar navigation with reveal text once the icon is clicked. Demo of Menu Items being Activated Credits Designed by: Hoang NguyenAuthor: abxlfazlOriginal image:..
Card Form Design, Very Slick and Rounded
A very cool looking form design here also using vue.js. As you type in the details the animated card fills in. Also as you select each element it will show you on the demo card which one is sel..
Scroll Trigger Parallax Clouds Snow
Another example of smooth animations using GSAP and Scroll Trigger. Good for scroll page animations. I cant get this one working correctly in the demo code, you will need to check out the pen ..
Center Mode Carousel using GSAP
I am so excited about this carousel, it looks amazing! The 1st thing i thought when viewing this carousel, was wow, and the second thing i thought was what is GSAP. What is GSAP? Simply put, GSAP i..
Card Hover Interaction Examples
Do you have boxes on your home page that need some new interactions.. Well go no further than these shiney boxes! :) Thanks to Ryan Mulligan for this code pen. Slightly tweaked and compiled t..
Animation Buttons - satisfying neumorphic animation designs
Some very nice examples of button animations using the neumorphic style of design. Check out the original codepen here.
Parallax scroll animation
Found this awesome animation on codepen, link below, Not sure how re-usable it is, but wow!
Animated Parallax 404 Error Page
Found this awesome animated 404 error page on codepen the other day, crazily awesome animations on this one, just reload the demo page and you can see the animation as it loads in as well.
Vanilla JS Center Mode Carousel
Here we have a sliding center mode carousel gallery made with css & vanilla js. This carousel is good if you need to keep your content up front and in the middle of the display. It can handle ima..
Random Quote
