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…
Story Box is a plugin using CSS3 animations triggered while scrolling.This jQuery Extension works alone, you don’t need any Javascript Skills, Only HTML.Transitions are provided by Animate.CSS, they are smooth & awesome + 10 Zen Special Animations.The Exit Effects ( hide after display ) are optional Story tale works on any major browser, it doesn’t effect older browsers and it simply doesn’t animate anything.
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
icono is an icon pack that needs no external resources. Every tags can be an icon made with pure CSS. How to use To get going with icono you can: Download icono.min.css or Install it with Bower: bower install https://github.com/saeedalipoor/icono.git And then load it in your page: or You can add icono folder in your project and import icono.less for compile. iconos maincolor can be changed in variable.less. and then just add iconos classes to…
This is a tutorial of effects on text inputs using CSS transitions, animations and pseudo-elements.Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some point and making them fun to use can enhance the experience. Please note that this is for inspiration only and that we use CSS properties which only work in modern browsers.
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…
Papier is a minimal, pretty semantic, responsive CSS library.While other frameworks force you to be very explicit about the intended styling of your elements by adding lots of classes , Papier is very semantic and simply styles e.g. all buttons as Papier-buttons (no need to add additional classes,). This is especially handy for rapid prototyping. Everything is responsive: alerts, panels, grids – everything! Papier is perfect for rapid prototyping. This is also an area where…
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…