Responsive 3D Panel Layout
A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects. View demo Download source Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. Please notice that this is very experimental. Some of the jQuery plugins used for this: jQuery Transit for most of the CSS transitionsModernizr for checking browser support of the CSS properties The placeholder text is from Veggie ipsum. An example for the HTML structure is the following: The first slide, which is a list item, will contain four images in this example. Each element/image can have a data attribute for the transition effect. The structure that we will create dynamically is the following: Each image or element will be wrapped in a division with the class sg-box. The background images will have the style background-size: cover which will make them cover the whole panel. To call the plugin, simply do:
Hacking for Artists
Augmented Reality with #Processing - Tutorial by Amnon Owed
All of the visuals in the above video were created using NyArtoolkit for Processing. NyARToolkit is an augmented reality toolkit built with 100% pure Java. It is derived from ARToolkit-2.72.1. Like Processing itself it’s open source and free! In this tutorial you will learn how to use it to place computer generated imagery correctly onto real world footage. To do this in real-time NyArtoolkit uses markers – black and white images – to determine the three-dimensional position and orientation in the real world. All right so let’s start with the general setup. 1. 2. 3. 4. All right, time to recap. Example 1: Basic The first example is basic, but holds all of the important techniques that are necessary for more advanced uses of the NyArtoolkit. If you input the following image (place it in the sketch’s data subdirectory)… …into the first code example, you should end up with something like this… Example 2: Dynamic Time to get a little more dynamic. Main Sketch ARObject
28 Exciting New jQuery Tutorials & Plugins
The open source movement has created a lot of new web developers. Over the past decade it’s been common to work on code projects in a private setup. But libraries such as MooTools and jQuery allow for rapid development of newer plugins and add-ons. In this gallery I’ve collected 28 plugins for jQuery users. CSS3 Swatch Book with jQuery Tablecloth.js Handsontable Complexify Plugin Turn.js Curtain.js PageScroller Sammy.js jQuery Picture jQuery Scroll Path Crafty.js FitVids.JS Blueberry Image Slider Sequence.js Rhinoslider Handlebars.js jStat Bacon timeago Caman.js Popcorn.js simpleCart.js gameQuery.js Spritely Response.js jQuery Vector Maps Blur.js Sigma.js
Prism - coloration syntaxique
Encore un outil de coloration syntaxique me direz-vous ! Il est vrai qu'on en trouve pas mal sur le Web : GeSHi (php), SyntaxHighlighter (JavaScript), Pygments (Python). Mais Prism (JavaScript et CSS) apporte d'indéniables avantages par rapport à ces concurrents : il est léger, très simple d'utilisation, facile à styler et extensible par l'ajout de plugins. De plus, il favorise l'utilisation d'une syntaxe HTML sémantiquement correcte : ce sont les éléments code qui sont utilisés pour repérer le code à mettre en évidence. Description et utilisation Téléchargement Prism est composé de deux fichiers uniquement : prism.css et prism.js. Sur cette page vous pouvez choisir (à l'heure ou nous écrivons cet article) : un des 3 thèmes proposés, d'utiliser des fichiers optimisés (réduits) ou non (pour pouvoir les modifier facilement), les langages reconnus (CSS, HTML/XML et/ou JavaScript), les plugins à ajouter. Appel des fichiers Prism Une première ligne sera localisée dans l'entête : <! Conclusion
Magnifying glass for image zoom using Jquery and CSS3
View codePlay Walkthrough Description Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.
8 Visually Impressive Javascript Powered Websites
Web design has evolved into a whole new level of sophistication. Flash lost the war and HTML, CSS and Javascript overtook its place. Comparing to flash, flash has its advantages of being consistent across different platforms, and maintainability is lesser than HTML/CSS/JS. However, adobe's decision in stop supporting mobile flash has killed it. With the fall of flash, HTML, CSS and Javascript have became the best alternative solution to cater for both mobile and desktop users. Here in this post though, we aren't talking about responsive layout, it's more about the animation effects and the wow factors that can be done without flash. It's a custom made full screen carousel landing page.
Animating a Million Letters Using Three.js
Introduction My goal in this article is to draw a million animated letters on the screen at a smooth frame rate. This task should be quite possible with modern GPUs. If you're coming from a traditional JavaScript animation background, this all sounds like madness. Writing efficient WebGL code Writing efficient WebGL code requires a certain mindset. But to go really fast, you need to push most of your computation to the shaders. The article's code uses the Three.js library, which abstracts away all the tedious boilerplate from writing WebGL code. Drawing multiple objects using a single draw call Here's a small pseudo-code example of how you might draw multiple objects using a single draw call. for (var i=0; i<objects.length; i++) { // each added object requires a separate WebGL draw call scene.add(createNewObject(objects[i]));} renderer.render(scene, camera); But the above method requires a separate draw call for each object. Setting up the geometry and textures Remaining concerns Summary
Using JavaScript to Control the Audio Object
This section includes the following topics: Playing and pausing audio playback in JavaScript All other functionality of the audio player is controlled from JavaScript, as shown in the following script. Specifying audio files and managing playback in JavaScript In the next example, a text input element is added in the HTML portion where you can paste in the path of an MPEG-Layer 3 (MP3) audio file. Catching errors Writing error-free code is difficult. In the JavaScript section of the code, there are areas where errors are likely. In this example, the buttons are disabled if support does not exist, so the functions would not be called. If HTML5 audio is supported, there are other errors that might happen. With the try/catch statements, these conditions fail silently, but you can see the errors if you open either the Console or Script tab in Internet Explorer 9 F12 tools. The following code example explains all concepts of this topic. Related topics
WebGL Water
Loading... Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytraced reflections and refractions Analytic ambient occlusion Heightfield water simulation * Soft shadows Caustics (see this for details) ** * requires the OES_texture_float extension** requires the OES_standard_derivatives extension Tile texture from zooboing on Flickr
Kartograph – rethink mapping
