background preloader

3D CSS Solar System

3D CSS Solar System
Related:  JavaScript

Getting Started with Web Audio API Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. The goal of this API is to include capabilities found in modern game audio engines and some of the mixing, processing, and filtering tasks that are found in modern desktop audio production applications. What follows is a gentle introduction to using this powerful API. Getting started with the AudioContext An AudioContext is for managing and playing all sounds. A single instance of AudioContext can support multiple sound inputs and complex audio graphs, so we will only need one of these for each audio application we create. The following snippet creates an AudioContext: Loading sounds Playing sounds full source code Volume:

Using the Google Maps API to Get Locations from Zip Codes 14 Sep 2012 rluna Google offers many API’s, among them is the Maps API. In this example we’ll show all the code necessary to hit Google with a zip code to get the location in the form of City, State and Country. First thing to do is to reference Google’s Map API: ... Next is a little form used to enter your zip code: ... You can see that I have a link which fires a function called “getLocation()” – below you’ll find that function and the related code: Thats it – open up the console in Chrome and notice the output as you enter different zip codes.

Transit - CSS transitions and transformations for jQuery What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (! Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.

How to Create an Interactive Graph using CSS3 & jQuery Topic: jQuery (Flot) & CSS3Difficulty: AdvancedEstimated Completion Time: 1 hour In this tutorial we will code an Interactive Graph using jQuery and CSS3. We will use the jQuery’s popular plotting plugin “Flot”. Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. This plugin is simple but powerful enough to create some nice and interactive graphs. Step 1 – HTML Markup To start we will create our html markup for the graph. Step 2 – jQuery and Flot Plugin Let’s include the JavaScript now. 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. Second of all we’ll add the gradient and the rounded corners. Step 6 – Graph Legend & Buttons Step 7 – Graph Toggle Step 8 – Typography

Swiss in CSS: animating the International Typographic Style There’s probably no style and technology that are quite as well paired as the International Typographic Style and CSS. When Detroit-based designer Jon Yablonski was looking for a way to flex his front-end muscles without client restraints, he decided to try and recreate some classic International Typographic Style posters, in CSS and vanilla JavaScript. The inherently grid-based, almost Atomic Design-like, nature of the International Typographic Style lends itself perfectly to the rectilinear bias of CSS. The solution for each poster was the same…Break the poster into smaller parts, take one step at a time recreating the layers, then experiment with different keyframe animations, timing-functions, and durations until it all feels right. The recreated posters include work by Josef Müller-Brockmann, Hans Neuburg, and Pierre Keller, and range from the 1950s to the 1970s.

Effets en CSS Sommaire Sommaire Dans ce tuto, je vous donnerais le code CSS et xHTML pour faire des choses que l'on fait normalement en JavaScript, comme des menus déroulants ou des lightbox. J'ai indiqué la compatibilité suivant les navigateurs. Les versions testés sont : Firefox 4.0/3.6, Internet Explorer 9,8, Opera 11.10, Safari 4, Chrome 10 ainsi que Konqueror 4.2.2. Permettez-moi de vous donner deux fichiers PDF qui sont pour moi les couteaux-suisses du codeur HTML/CSS : Ils montrent en une page la quasi-totalité des codes HTML et CSS2 :PDF sur le HTML (archive zip : 1.8Mio ; MD5 : 778bd3ea7c04408e75ecf50686d6c606)PDF sur les CSS (fichier pdf : 42Kio ; MD5 : f788c273f2ef4d1354e3c418492f1306) Ce que cette page est censé apporter, ce sont des bouts de codes, quelques explications ainsi que des exemples à chaque fois. Sauf mention contraire, les astuces visibles ici ne font appel qu'à du CSS. Compatibilité : xHTML Les menus sont souvent faits avec des listes <ul>, <li>. Code : HTML Code : CSS Essayer Voilà.

How to Create a Responsive Image Slider in jQuery and CSS3 Topic: jQuery (flexslider) / CSS3Difficulty: IntermediateEstimated Completion Time: 30 mins Today we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3. STEP 1 – Markup The slider html markup is very simple. Next we’ll include the jQuery library and the FlexSlider plugin. STEP 2 – Basic Styles First we will add some reset styles to clear all the margins, paddings, etc. and keep consistency trough all browsers. Then we will hide the slides to avoid jumping of the images during the page load. To finish this step we will add some styles to clear the floats from the slides. STEP 3 – Container Styles For the container we will set the background color to white and add a small shadow using the CSS3 property “box-shadow”. I’ve set a minimum and maximum width for the slider. STEP 4 – Next and Previous Arrows The arrows will be added using the “:before” pseudo-selector. STEP 5 – Slider Controls