This is a call-to-action button that animates and turns into a full-size modal window coded by Codyhouse.Modal windows are used to display related content, by hiding temporarily the main content. If we imagine our web page as layers distributed along the z-axis, modal windows are on top.The main idea here is the button that triggers the action animates and turns into a full-width new page. The final result is powered by a combination of CSS…
Flickity is a carousel,slider,gallery library created by David DeSandro.Flickity makes galleries, sliders and carousels that feel lively and effortless. Start using Flickity in three steps. Download Flickity flickity.css and flickity.pkgd.min.js files Add the Flickity .css and .js files to your site Add js-flickity class to gallery elements That’s it! You’re all set to start using and customizing Flickity.
This is a slide-in filter panel powered by CSS and jQuery and created by Codyhouse.It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates by reducing the time needed by the user to find what he’s looking for. It takes advantage of CSS Transitions, CSS Transformations and jQuery muscles to smoothly slide in when needed.
TheaterJS is a typing effect mimicking human behavior. – Everything you need to know is demonstrated and explained in this codepen. DEMO:The demo is also available on the TheaterJS page. See the Pen TheaterJS by Gabin Aureche (@Zhouzi) on CodePen. Features: Multiple actors Mistakes Variable speed Scenario creation Events
Another great tutorial from Codyhouse.A list of split blocks that reunite on scrolling, simulating a movement along the z-axis with the help of CSS transformations and jQuery. The 2-blocks design approach is quite common nowadays. On one side the text paragraph, on the other a visual element. With this nugget Codyhouse tried to “spice-up” the transition between the sections by simulating a movement along the z-axis while the user is scrolling (or using the 2…
snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices. snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that…
This is a tutorial by Codrops on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid. The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title. The technologies used…
ClassyCountdown is a jQuery plugin written by Marius Stanciu – Sergiu, a plugin that allows you to easily create clean circular countdowns. It is fully customizable and includes 12 themes, which can be modified and it uses HTML5 canvas for rendering the circles. This jQuery plugin is distributed under the MIT license. Enjoy!
LetterFx is a jQuery plugin to apply animated visual effects to text – letters, words & custom patterns. LetterFx works by temporarily injecting markup into the text of an $(“element”) and sequentially adding & removing transition-based CSS classes. Effects can be combined with the exception of transform-based and some position-based effects.
This is a secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other. A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. A good example I can think of is Disqus For Websites. A nice touch is to…