background preloader

Effects

Facebook Twitter

CSS & jQuery Secondary Fixed Navigation. 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.

CSS & jQuery Secondary Fixed Navigation

Browser support ie Chrome Firefox Safari Opera 9+ 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. We see this effect a lot these days, a good example I can think of is Disqus For Websites. A nice touch is to animate the logo and the main call-to-action button to slide in once the navigation becomes fixed. Creating the structure We created a section#cd-intro to wrap our intro image, tagline and call-to-action button. Adding style Since we coded this resource starting from mobile, we assigned a position: fixed to the unordered list inside the .cd-secondary-nav, and placed it at the bottom-right of the viewport. 3D Animated Mockup in CSS and jQuery. A simple template to showcase your application features through a smooth 3d animation, powered by CSS and jQuery.

3D Animated Mockup in CSS and jQuery

Browser support ie Chrome Firefox Safari Opera 9+ With CSS 3D transformations supported by most modern browsers nowadays, we can enrich our web projects with powerful animations, and be confident most users will enjoy the full experience. Today’s template is just an example of how to turn a flat app screen into a 3D mockup, and animate it. We also integrated a popular resource, Points of Interest. Inspiration came from Prismic.io. Creating the structure The HTML is structured in 2 main <div> elements (.cd-product-intro and .cd-product-mockup) – the first containing the product intro (title, action buttons..) and the second the mockup (and the points of interest) – wrapped inside a section.cd-product. Adding style On small devices the CSS is pretty straightforward (you can give a look at the code for more details/comments). Events handling. Caption Hover Effects - Demo 1. Hover Effect Ideas. Hover Effect Ideas. App Showcase with Grid Overlay.

Natural Language Form with Custom Input Elements. An experimental form that uses natural language instead of the usual form display.

Natural Language Form with Custom Input Elements

Values are entered using custom input elements. View demo Download source There is something really interesting about Natural Language UIs and after visiting awesome Escape Flight, we wanted to play around with NL forms and custom form elements. The idea is to turn a classic form into one that uses natural language to obtain information from the user.

For that we’ll construct a sentence where some words and parts are select elements and text inputs. Natural language forms are quite suitable for some UI cases, not for all, of course. Please note: this only works as intended in browsers that support the respective CSS properties. Fullscreen Pageflip Layout with BookBlock. Table of Contents ← Previous Demo: Responsive Audio Player Back to the Codrops Article Self-destruction The Hon.

Fullscreen Pageflip Layout with BookBlock

Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. In New London, report says, the young men are falling into drinking habits as never before. "The pulse of a person in health beats about seventy strokes a minute, and the ordinary term of life is about seventy years.

"In New York, Mr. "Massachusetts is moving to build an asylum for her twenty-five thousand drunkards. "The same rate of fearful expenditure for intoxicating drinks extends across the ocean. CSS-Only Responsive Layout with Smooth Transitions. A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only.

CSS-Only Responsive Layout with Smooth Transitions

Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a "smooth scrolling" effect. View demo Download source In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a navigation which will allow us to navigate between the panels. We’ll use radio buttons for the navigation and animate the content to the right position with a transition, creating a “smooth scrolling” effect. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Note that we will exclude vendor prefixes in this tutorial. Annotation Overlay Effect with CSS3. Fluid CSS3 Slideshow with Parallax Effect.