On Scroll Header Effects. Some inspiration for headers that animate when scrolling the page. View demo Download source You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started. Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.
Please note: this only works as intended in browsers that support the respective CSS properties. Also note that scrolling super fast might cause a jump from the beforementioned class A to class C which might not always look very fancy. The header is composed of various parts for showcasing all the effects. Inspiration for Text Input Effects. Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements. View demo Download source 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. We are used to the default form resembling its paper counterpart but in the digital world we can be more creative. Today we want to share some experimental styles and effects for text inputs with you. Andrej Radisic has done some great work on Dribbble, like the Jawbreaker input field, which we’ve based one of the effects on.
Most of the effects use CSS transitions together with pseudo-elements. Please note that this is for inspiration only and that we use CSS properties which only work in modern browsers. For the markup we use a span as a wrapper for the input and its label. The label is our powerful element here. Customize checkboxes and radio buttons with iCheck (jQuery and Zepto) plugin. iCheck plugin works with checkboxes and radio buttons like a constructor.
It wraps each input with a div, which you may customize yourself or use one of the available skins. You may also place inside that div some HTML code or text using insert option. For this HTML: <label><input type="checkbox" name="quux" disabled> Foo </label><label for="baz">Bar</label><input type="radio" name="quux" id="baz" checked><label for="baz">Bar</label><input type="radio" name="quux" id="baz"> With default options you'll get nearly this: <label><div class="icheckbox disabled"><input type="checkbox" name="quux" disabled></div> Foo </label><label for="baz">Bar</label><div class="iradio checked"><input type="radio" name="quux" id="baz" checked></div><label for="baz">Bar</label><div class="iradio"><input type="radio" name="quux" id="baz"></div> By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).
Options These options are default: Tourist.js. Tourist.js is a simple library for creating guided tours through your app. It's better suited to complex, single-page apps than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need to open a window or menu, or wait for the user to complete a task. Tourist gives you hooks to do this. Installation The code is available via bower install tourist or on github. Get started quickly Specify steps explaining elements to point at and what to say. Example Hey look at me! No look at me! Powerful Tourist was designed for complex apps rather than websites. Control the interface for each step move to the next step only after the user completes a specific task Just use the setup() and teardown() functions in your step options.
Dependencies Tourist depends on Backbone and jQuery. Tourist comes with the ability to use either Bootstrap popovers (default) or QTip2 tips, so you'll need either Bootstrap 3 CSS (only the CSS is necessary!) Chart.js | Documentation. Everything you need to know to build great looking charts using Chart.js Getting started Include Chart.js First we need to include the Chart.js library on the page.
Step 3 – Graph Data The data of a graph is an array with data series (ex: [series1, series2, … ]). Step 4 – Load Graphs Now we will load the two graphs, the one with lines and the one with bars. Step 5 – Graph Container Styles First of all we will add some reset styles to clear the browser defaults. FlexSlider 2. Créer une carte interactive. Blueprint: Responsive Content Slider. Circular Content Carousel with jQuery. Expanding Image Menu with jQuery. In today’s tutorial we will create an expanding image menu with jQuery.
The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat […] View demoDownload source In today’s tutorial we will create an expanding image menu with jQuery. The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream.
So, let’s get started! The Markup The HTML structure consists of a main container and an unordered list where each item is one of the columns. Let’s take a look at the style. The CSS We are going to stretch the container for the list over the page and hide the overflow. We will give enough width to the ul so that the li elements which will be floating, don’t wrap to the next “line” when they expand: The overflow of the li elements is going to be hidden as well because our content inside is actually much bigger.
Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations. View demo Download source Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations. The images are by Mark Sebastian and they are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License. Note that this will only work in browsers supporting CSS animations. This tutorial is a part of our latest CSS3 experiments; you can find more of those here: The Markup We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading: <ul class="cb-slideshow"><li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li><li></li><li></li></ul> The CSS Let’s style the unordered list first.
No conflict Events <! Navigation en Onglets. Animated Border Menus | Demo 5. Fullscreen Pageflip Layout. A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. View demo Download source We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to customize BookBlock and use some available options for navigating the content. The idea is to navigate the pages using the arrows or swiping the pages, and to slide out the menu when clicking on the menu button.
We’ll also use jScrollPane by Kevin Luck to add a custom scrollbar for the content when needed. Please note: CSS 3D transforms will only work in modern browsers that support those properties. The demo contains excerpts form the hilarious “The Funny Side of Physic” by A. The following libraries and jQuery plugins will be used: So, let’s get started! The Markup The CSS.
With the right techniques and modern browser support, developers can now produce some pretty impressive animations, effects and interactions using SVG. Preparing an SVG file The HTML The CSS.