Waves. Action/Event Works fully with jQuery and JavaScript click event handlers, like Snarl Download the latest version of Waves from Github repository.
You can also install it via Bower with bower install waves or via npm with npm install node-waves. Include waves.min.css and waves.min.js to your HTML file and Waves is ready to use! <! Advanced: Waves also provide LESS, SCSS, and SASS source. Attach the effect To attach Waves's effect (or we usually called it as "the ripple") to HTML element, you can use Waves.attach() <a href="#" class="button">Click Here</a><script type="text/javascript"> Waves.attach('.button');</script> Waves.attach() comes with 2 parameters, the first is DOM element that you want to be attached (or string that represent it, like jQuery), and the second one is array of CSS classes that will be put on the element.
Notification Styles Inspiration. Pure. Off-Canvas Menu Effects - Elastic. FullPage.js One Page Scroll Site Plugin. jQuery One Page Scroll by Pete R. FullPage.js - Créez un site fullscreen en scrolling vertical. FullPage.js est un plugin jQuery permettant de mettre en place rapidement un site web fullscreen avec scrolling vertical.
C'est très tendance aujourd'hui lorsque vous devez présenter un service, un produit, un nouveau script ... On aime ou on déteste mais les pages en fullscreen et scrolling vertical ont le vent en poupe. fullPage.js est un plugin jQuery qui vous permettra de créer en quelques minutes ce type de pages web. Il vous suffit de définir une structure HTML classique à l'aide de section / div pour définir les différentes pages, et créer si besoin le menu associé. 01. 02. Inspiration for Custom Select Elements. Select a Dinner.
Notification Styles Inspiration. CSS Shake. Animated Text and Icon Menu with jQuery. Pure CSS animated menu and icon on hover. Transformicons: Animated Navigation Icons with CSS3. Quotes Rotator. Expanding Search Bar Deconstructed. A tutorial on how to create a mobile-friendly and responsive expanding search bar.
View demo Download source Maybe you have noticed the little adjustments that we did to our theme lately here on Codrops. One of the things we thought might be nice to change is the search input. Caption Hover Effects. A tutorial on how to create some subtle and modern caption hover effects.
View demo Download source Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations. Please note: this only works as intended in browsers that support the respective CSS properties. Dynamic Grid with Transitions. A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions. View demo Download source. Blueprint: On Scroll Effect Layout. Creative Link Effects. An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.
View demo Download source Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation. Please note that pseudo-element transitions don’t work in every browser. Building a Circular Navigation with CSS Transforms.
A tutorial on how to create a circular navigation using CSS transforms.
View demo Download source In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) And simple logic behind them so you get a clear understanding of the technique. Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. Transitions for Off-Canvas Navigations. Animated Checkboxes and Radio Buttons with SVG. By animating an SVG path with JavaScript, we can do many fancy things.
Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected. View demo Download source Today we’d like to share some fancy “check” animations for checkboxes and radio buttons with you. The idea is to animate an SVG to create a nice visual effect for selecting a checkbox or radio input.
Medium-Style Page Transition. An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page.
This effect is characterized by the lower article easing upward as the current article fades up and out. View demo Download source Medium, a blogging platform which has gained popularity over the past several months, has one of the smoothest, most polished user interfaces on the web. As you click and touch the interface, you’ll notice that great attention has been paid to transitions, white space, color, fonts, imagery, and iconography. CSS Overlay Techniques. There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements.
In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle.
This principle is based on the fact that page refreshes are disruptive to the user’s mental flow, causing what is known as “change blindness”, and that we need to be able to avoid breaking the visual flow of the user wherever and whenever we can. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. Elastic Stack: Elastic Dragging Interaction. ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one.
It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out. Techniques for Responsive Typography. When it comes to responsive type on the web, there's more to do than just resizing the text's container and having the text reflow inside of it.
This in-depth article covers various techniques for making text responsive. Applying App Design Concepts to Website Design. Should we let app design guide us more in website design? In this article we'll explore how app design concepts can help rethink the planning and design of websites for a better user experience. If you ever look up best practices, design techniques, or trends in application design, you’ll notice something significant: there seems to be a much greater focus on what is most important, that being the user experience, usability, and functionality. We see this stressed every now and then for that in web design too, but how often is it done? Web design should not only be about making things look good, but also about good user experiences and a website’s goals.
Most designers probably know this. SVG Icons FTW. "Look Inside" Book Preview with BookBlock. Dot Navigation Styles. Techniques for Creating Textured Text. Creating a Border Animation Effect with SVG and CSS. Responsive Multi-Level Menu - Demo 1. Fullscreen Layout with Page Transitions. A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Text Opening Sequence with CSS Animations. Fixed Background Scrolling Layout. A fixed background image scrolling layout with 100% height panels and smooth scrolling. A Collection of Page Transitions. A showcase collection of various page transition effects using CSS animations.
Vertical Timeline. A responsive vertical timeline layout with icons and example media queries. Morphing Buttons Concept. Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG) How to Create a Tiled Background Slideshow. Ideas for Subtle Hover Effects. Draggable Dual-View Slideshow. Zoomy, un plugin jQuery pour zoomer sur vos images. jQuery Twinkle, un plugin qui attire l’attention. jQuery Transit, plugin pour utiliser facilement les transitions CSS3. 21 outils et générateurs CSS pour développeurs web. Real Shadow, une ombre interactive avec jQuery et CSS3. Arctext.js, du texte incurvé avec CSS3 et jQuery. Tooltipster, une tooltip jQuery moderne et flexible.
Textillate.js, un plugin jQuery pour animer vos textes avec CSS3. Buttons, une librairie CSS pour créer des boutons personnalisables. Tabulous.js, un système d’onglets animé avec jQuery et CSS3. Custom Scrollbar, une scrollbar jQuery personnalisée avec CSS. OwlCarousel, un carousel jQuery responsive et multi-fonctions. CSS Sine Waves. Adaptive Backgrounds, un arrière-plan assorti avec jQuery. ScrollReveal.js, une librairie JS pour déclencher des animations au scroll. CSShake.css, des classes pour faire vibrer vos éléments HTML. LightGallery, une lightbox responsive avec galerie d’images. 12 outils et fonts indispensables pour gérer vos polices d’icônes. HTML5 UP! Responsive HTML5 and CSS3 Site Templates. ScrollMagic - Demo. SUPERSCROLLORAMA.