FrontendPik | Frontend projects with effects and examples for free

Upload Button

A no JS upload animation/microinteraction.

File Upload Interaction Design

A simple file upload interaction design.

slidr

A simple JS library to handle HTML sliders

Carousel Slider Slider Slideshow

Pacman Pagination

Pagination animation with HTML, CSS and JS.

Pagination Pagination Animation

CSS Text Shadow Animation

Text Animation Text Shadow Animation

3D CSS Letter Transition

3D Text Text Animation

cookit

A jQuery plugin to add a cookies consent banner on a website.

Cookie Banner Cookie Consent

GlowCookies

GlowCookies - Powerful Cookie Consent Banner In JavaScript

Cookie Banner Cookie Consent GDPR

agreetocontent

Pure javascript content warning. Uses cookies to see if someone has agreed to the content already.

Content Popup Popup

Direct Messaging

Bot Chat

botui

A JavaScript framework for building conversational UIs

Bot Chat

Fixer Uppers

Card Layout Layout

CSS Winter Animation Calendar

A calendar with beautiful subtle animation made in CSS featuring a beautiful night in the mountains with moon and twinkling stars in the clear sky.

Calendar

Hand Drawn Border Effects

A one line border-radius technique.

Border

Blog Card

Blog Card Card

Spinin’ Load Arrow

Loading animation for down arrow.

Arrow Load Arrow

3D Sloped Tiles Tessellated Pattern. No Div. Pure CSS

3D Background Pattern Background Pattern

CSS Ripples with Masks and Custom Properties

Basic example about how to make ripples and dot grids with CSS.

Background Pattern

Accessible Modal Dialog Component In Vanilla JavaScript

a11y-dialog-component

Vanilla JS Accessible Dialog Library

Accessibility Modal Tooltip javascript-dialog

Apply A CSS Class To Element When It Gets Focus

keyboardFocus.js

keyboardFocus.js is a JavaScript alternative to the CSS :focus pseudo-class that dynamically adds a CSS class keyboardFocus to element when it gets focus with the Tab key.

Accessibility Focus

accessibility-plugin

Accessibility is an easy yet powerful JavaScript plugin that makes websites or web applications usable and friendly for everyone, including those with visual impairments or other disabilities.

Accessibility

css-grid-12-column-layout

A CSS-only 12-column grid system for web designers and developers to create responsive and flexible layouts using CSS Grid.

12 Column Layout Layout css-grid-layout

buzz-notify

Small and Clean JavaScript Toast Notifications

Notification Toast javascript-alert

Star-rating-using-pure-css

pure css rating

Star Rating

markup2json

A library for converting HTML and XML into JSON

HTML to JSON XML to JSON

jQuery.ddMap

ddMap is a lightweight jQuery plugin that allows developers to embed customizable, interactive, responsive Yandex maps into webpages.

Map Yandex Map

datera

Datera is a customizable date and date range picker JS library that transforms a regular input field into a date selection input.

Calendar Date Picker

Use Youtube/Vimeo/HTML5 Videos As A Fullscreen Background - youtube-background.js

jquery.youtube-background

ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.

Video Video Background Vimeo Video Background Youtube Video Background

vimeo-lazyload

LazyLoad Embed Vimeo Player - simple and lightweight plugin - pure JavaScript

Video Player Vimeo Vimeo Video Player

LazyTube

A simple, ultra-lightweight, Vanilla JS library to lazy load youtube players (and make them responsive)

Youtube Youtube Video Player

Editor Picks