Transition Effect with CSS Masks

    Transition Effect with CSS Masks

    Today we’d like to show you how to create an intriguingly simple, yet eye-catching transition effect using CSS Masks. Together with clipping, masking is another way of defining visibility and composite with an element. In the following tutorial we’ll show you how to apply the new properties for a modern transition effect on a simple slideshow. We’ll be applying animations utilizing the steps() timing function and move a mask PNG over an image to achieve an interesting transition effect.

    EQCSS : CSS Extension for Element Queries with Javascript

    EQCSS : CSS Extension for Element Queries with Javascript

    EQCSS is a JavaScript plugin that lets you write element queries inside CSS today. With performance in mind, this plugin is written in pure JavaScript, so it doesn’t require jQuery or any other libraries on your page in order to function – add EQCSS.js to your HTML and you’re ready to get started!

    Conditionize.js : jQuery plugin for Handling conditional Form Fields

    Conditionize.js : jQuery plugin for Handling conditional Form Fields

    A small jQuery plugin for handling showing and hiding things conditionally based on input – typically groups of form fields. It works using data attributes to keep all of the name/values for inputs directly in the markup and saves you the trouble of having to manually show/hide a bunch of stuff through JS, as well as improving maintenance if you need to change the name or value of an input you were listening to.

    Choreographer.js : JavaScript Library for Complex CSS Animations

    Choreographer.js : JavaScript Library for Complex CSS Animations

    Choreographer.js is a simple library to take care of complex CSS animations.

    Tingle.js : JavaScript Modal Plugin

    Tingle.js : JavaScript Modal Plugin

    Tingle is a minimalist and easy-to-use modal plugin written in pure JavaScript.

    • No dependencies required
    • Fully customizable via CSS
    • CSS transitions
    • Simple API
    • No extra files to download
    • Created with UX in mind

    Background Segment Effect with CSS & Anime.js

    Background Segment Effect with CSS & Anime.js

    Today we’d like to share a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer. Adding a fitting shadow and some parallax makes all this look quite interesting. Furthermore, we’re employing anime.js, the easy-to-use JavaScript animation library by Julian Garnier.

    Fancy SVG Letter Animation

    Fancy SVG Letter Animation

    Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.

    TabSlideOut.js : jQuery plugin to Create a side/top/bottom Tab

    TabSlideOut.js : jQuery plugin to Create a side/top/bottom Tab

    jQuery plugin to create tabs that slide out from the window edges to show a feedback form, contact form, notepad etc.

    Includes methods to programmatically interact with tabs, and events and handlers fire on open, close and bounce (bounce is used to attract attention to a tab).

    Zingtouch : JavaScript Gesture Detection Library

    Zingtouch : JavaScript Gesture Detection Library

    A modern JavaScript touch gesture library. Allows developers to configure pre-existing gestures and even create their own using ZingTouch’s life cycle.

    ZingTouch is built to make implementing gestures for the browser as easy or complex as you need it to be. ZingTouch comes with 6 main gestures :

    • Tap
    • Swipe
    • Pinch
    • Expand
    • Pan
    • Rotate

    Ultimate Styleswitcher Framework with jQuery

    Ultimate Styleswitcher Framework with jQuery

    Ultimate Styleswitcher is style switch framework built for designers and developers, or anyone else who have made some awesome template, plugin, etc. and now need some creative way to display all the possibilities of his/her latest project.