background preloader


Related:  Javascript libraries

Notification Styles Inspiration Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects. View demo Download source Today we’d like to share a couple of simple styles and effects for website notifications. In this small set of notification style variations our aim was to do exactly that. Note that the effects will only work in browsers that support CSS animations and 3D transforms. There are several issues in IE: Animating the stroke-dashoffset of the SVG path for the circular loading animation using a CSS animation does not work. Firefox (Win) does not seem to like box shadows when flipping things, but we’ve left it nonetheless in the bouncy flip effect because it looks so neat in all the other browsers. We’ve used some great resources that helped creating the effects: The icons used in some of the demos are from the Linecons icon set and the web font was created with the IcoMoon App.

Tab Styles Inspiration A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques. View demo Download source Today we’d like to share a couple of tab styles with you. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. For the demo we’ve used a flexbox layout so make sure you view it with a modern browser. The icons in most of the tabs are from the fantastic Elegant Themes Line Icon Set and we’ve used the Icomoon app to create our custom icon font. For the tab functionality we’ve used the Blueprint Responsive Full Width Tabs and adjusted it for our needs. The main common tab style for all tabs can be found in tabs.css and all individual styles are in tabstyles.css Take a look at some of the examples: There are a couple of example media queries and fallbacks that can be customized. We hope you enjoy these styles and get inspired :)

Off-Canvas Menu Effects Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. View demo Download source Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. Like with everything, style evolves and today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. We use CSS transitions, CSS animations created with bounce.js and animated SVGs with the help of Snap.svg. Please note that the effects serve as inspiration and will work (best) in modern browsers. Let’s take a look at some of the styles. This first demo is inspired by the Dribbble shot Old Designspiration Menu Concept One by Michael Martinho. This demo is using Snap.svg for animating SVG paths.

Animated Background Headers A collection of animated background header effects for your inspiration. We use Canvas and Javascript to create an animated background for large site headers. View demo Download source Today we’d like to share some animated header backgrounds for your inspiration. The full-page background image header has been a web design trend for some time. This collection uses JavaScript and Canvas to create various header animations. an animation loop using requestAnimationFrameshapes (circles, triangles, lines) that are being modified to create different effects Demo 1 follows mouse movement on non-touch devices. When working with animated website headers, there are a couple of performance issues to keep in mind: Take a look at the four different header backgrounds: The image in demo 1 is by ESO and it was taken by the Visible and Infrared Survey Telescope for Astronomy (VISTA). We really hope you enjoy these examples and feel inspired to create some animated Canvas effects soon :)

Minimal Form Interface A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website. View demo Download source Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. We spotted one in the end of the PageLanes website and thought that this is a really nice and user-friendly concept for a form. So, the idea is to show the user just one input field at a time, without any clutter or distractions, but only with elements that are helpful in indicating how much needs to be filled. Please note that we are using some modern CSS properties like pointer-events and animations which are not supported in older browsers. Initially, we don’t show the navigation arrow. The numbers in the bottom right tell the user how many questions there are in total and which question is the current one.

slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:

rangeslider.js Side Comments - style commenting 1. Download SideComments.js Install with Component You can install SideComments via component. component install aroc/side-comments or include side-comments in your component.json file dependencies object. 2. jQuery Required You must include jQuery in your project in order for SideComments.js to work. You'll need to include the following single JavaScript file and two CSS files to get SideComments.js working. You can choose not to include default-theme.css, but you'll need to style SideComments youself if you choose not to include it, as side-comments.css handles only the basic layout styling. 3. You need to have a wrapper element to point SideComments at and two things on each commentable section; the class commentable-section and the data attribute data-section-id, which holds the unique ID of that commentable-section for this page. 4. The current user is an object and is expected to be in the following format: 5. SideComments Constructor Methods deselectSection(sectionId) removeCurrentUser()

Draggable Dual-View Slideshow An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed. View demo Download source Today we’d like to share an experimental slideshow with you. The idea is based on the great navigation concept from the Wild website where one can view the projects in either fullscreen or in a carousel mode. There are different techniques that would allow for such a layout; we tried to re-create this slideshow concept by using the Dragdealer.js library and 3D transforms. Please note that this slideshow is highly experimental and only works properly in modern browsers. The images used in the demo are from When the slideshow is loaded, we show some info initially, that shows which interaction possibilities exist: The main view of the slideshow is the fullscreen one. When clicking on the arrow button, the content will be revealed in a sliding transition:

Requorm.js by asaskevich JavaScript library for checking and validating HTML forms. If any of the fields in the form incorrectly filled, submit buttons will be disabled. Content Examples Let's watch some examples! Example 1: Input should be not empty Type any text in input field and you will see green border on it! Used checkers: notEmpty Example 2: Input length should be between six and ten Type any text with length in range [6..10] and you will see green border on it! Used checkers: minLength(6); maxLength(10) Example 3: Input should be alphabetic in one case and numeric in second Type any letter in first field and any numeric character in second field and you will see green border on it! Used checkers: alpha; numeric Example 4: Input should be valid e-mail with minimal length ten characters Type and you will see green border on it! Used checkers: email; minLength(10) Example 5: Input should be equal to "Hello" Type Hello and you will see green border on it! Used checkers: equal(Hello) Installation

Page Preloading Effect A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs. View demo Download source Today we want to show you how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. In this tutorial we will re-create the effect seen on Fontface Ninja with some adjustments and a second demo with slightly different effects. Please note that we’ll be using CSS animations and CSS 3D transforms, so this will only work as intended in browsers that support them. So, let’s get started! The Markup Let’s wrap a header and the main content division into a container. The initial view consists of a header that contains the logo and the loading element. The main content has the class ip-main and later on we’ll apply animations to its children, the headline, the division and the inner boxes: Let’s go on and style this. The CSS Let’s remove any margins from the logo headline: The JavaScript