background preloader

Velocity.js

Velocity.js
Related:  mood ring

jquery/jquery-color: jQuery plugin for color manipulation and animation support. D3.js - Data-Driven Documents Creating Vue.js Transitions & Animations In a rush? Skip to tutorial & live demo. My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation... you name it. More importantly, they gave me the opportunity to learn Vue.js. These two apps were my last projects for Spektrum. We decided I'd start by sharing what I've learned working with Vue. Part 1? I've prepared live demos on CodePen, code snippets, and an open source GitHub repo for you guys. So let's get into it! Vue.js "transformations"—context Disclaimer: this post digs into Vue.js and the tools it offers with its transition system. Animations & transitions. Even for those of us who are drawn to the field by an urge to create intricate micro-interactions and smooth page transitions, it quickly becomes difficult to reason about our work, given the need to rely on CSS for performance purposes. This is where frameworks like Vue.js step in, taking the guess-work and clumsy chains of setTimeout functions out of transitions. 1. 1.1 Lists 2.

chroma.js api docs! chroma.js is a tiny JavaScript library (12kB) for dealing with colors! Quick-start Here are a couple of things chroma.js can do for you: read colors from a wide range of formatsanalyze and manipulate colorsconvert colors into wide range of formatslinear and bezier interpolation in different color spaces Here's an example for a simple read / manipulate / output chain: Aside from that, chroma.js can also help you generate nice colors using various methods, for instance to be used in color palette for maps or data visualizations. chroma.js has a lot more to offer, but that's the basic gist of it. chroma The first step is to get your color into chroma.js. If there's no matching named color chroma.js checks for a hexadecimal string. In addition to hex strings, hexadecimal numbers (in fact, just any number between 0 and 16777215), will be recognized, too. If you pass the RGB channels individually, too. chroma.hsl chroma.hsv chroma.lab chroma.lch L: Lightness, c: chroma (0-1), h: hue (0-1). chroma.hcl color

Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). En pratique

Adding Transition Effects - vue.js With Vue.js’ transition hooks you can apply automatic transition effects when elements are inserted into or removed from the DOM. There are three options to implement transitions with Vue.js: CSS transitions, CSS animations, and JavaScript functions. All Vue.js transitions are triggered only if the DOM manipulation was applied by Vue.js, either through built-in directives, e.g. v-if, or through ViewModel instance methods, e.g. vm.$appendTo(). CSS Transitions To enable CSS transitions on an element, simply give it an empty v-transition directive: You will also need to provide CSS rules for v-enter and v-leave classes (the class names can be configured with Vue.config()): Now when the show property changes, Vue.js will insert or remove the <p> element accordingly, and apply transition classes as specified below: It is important to ensure that the target element’s CSS transition rules are properly set and it will fire a transitionend event. CSS Animations Look at me! JavaScript Functions

color JavaScript library for color conversion and manipulation with support for CSS color strings. var color = ; color; console; Install Usage Setters var color = Pass any valid CSS color string into Color() or a hash of values. Set the values for individual channels with alpha, red, green, blue, hue, saturation (hsl), saturationv (hsv), lightness, whiteness, blackness, cyan, magenta, yellow, black Getters Get a hash of the rgb values with rgb(), similarly for hsl(), hsv(), and cmyk() Get an array of the values with rgbArray(), hslArray(), hsvArray(), and cmykArray(). Get the value for an individual channel. CSS Strings Different CSS String formats for the color are on hexString, rgbString, percentString, hslString, hwbString, and keyword (undefined if it's not a keyword color). Luminosity The WCAG luminosity of the color. 0 is black, 1 is white. The WCAG contrast ratio to another color, from 1 (same color) to 21 (contrast b/w white and black). Manipulation color Clone And more to come... Propers

airbnb/javascript: JavaScript Style Guide Enter/Leave & List Transitions — Vue.js Overview Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to: automatically apply classes for CSS transitions and animationsintegrate 3rd-party CSS animation libraries, such as Animate.cssuse JavaScript to directly manipulate the DOM during transition hooksintegrate 3rd-party JavaScript animation libraries, such as Velocity.js On this page, we’ll only cover entering, leaving, and list transitions, but you can see the next section for managing state transitions. Transitioning Single Elements/Components Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts: Conditional rendering (using v-if)Conditional display (using v-show)Dynamic componentsComponent root nodes This is what an example looks like in action: When an element wrapped in a transition component is inserted or removed, this is what happens: CSS Animations

RGB color parser in JavaScript What is it A JavaScript class that accepts a string and tries to figure out a valid color out of it. Some accepted inputs are for example: rgb(0, 23, 255)#336699ffee66fb0reddarkbluecadet blue For more accepted inputs - see the demo. Here's the javascript class - rgbcolor.js. Some history / motivation I was playing around with an idea (will post later) and I needed to get color information using the so-called computed styles. In FireFox when you get a computed style, it's in the format rgb(xxx, yyy, zzz) In IE, it's #xxyyzz. I decided to take my script one step further and make the color parsing into a seperate class. The result is something you can use, among other purposes, as a friendlier user input field. How to use The class is defied in a function RGBColor(). Example use: var color = new RGBColor('darkblue'); if (color.ok) { alert(color.r + ', ' + color.g + ', ' + color.b); alert(color.toHex()); alert(color.toRGB()); } How it works All yours

Related: