Articles tagged JavaScript

Save HTML5 Canvas as image on server

  • Reading time:86 mins read

Working with HTML we sometimes face with necessity of saving the results as image. The image can be saved on server or we can force downloading the result directly into your browser

Understanding Closures

  • Reading time:111 mins read

If you already know the main concept, the closures are not hard to understand. But it is difficult to understand by reading only theoretical explanations. Our article is for programmers with any experience. For easier understanding, the examples are in javascript.

Creating a slider using Twitter Bootstrap 3

  • Reading time:71 mins read

Bootstrap slider. Twitter Bootstrap 3 is one of the best CSS frameworks to develop and design content management systems. With Bootstrap you can easily create blogs or pages of the portfolio using a system of grids Twitter Bootstrap (grid layout). At the heart of many CMS systems we usually have a base component "Slider"

Bootstrap one-page template with Parallax effect

  • Reading time:240 mins read

Bootstrap one-page template with Parallax effect

Bootstrap tutorial / parallax scrolling tutorial. It is no secret that the bootstrap is used on many websites now. This allows to save time and create excellent results in a short period of time. In particular it concerns the markup and styles. Last time, when we wrote about the bootstrap, we received many positive comments, so I decided to prepare another lesson on using this framework today. In order to make it more interesting, we’ll create the demonstration with one of the interesting effects – Parallax. We will see the use of different backgrounds when scrolling the page. In order to understand what we intend to do – please have a look at the demo.

(more…)

Three.js – Working with Cameras

  • Reading time:37 mins read

Our lessons on webgl continue. Today we review Threejs cameras. Threejs library provides two different cameras: OrthographicCamera and PerspectiveCamera

HTML5 Canvas 3D Sphere

  • Reading time:175 mins read

Our new tutorial tells us about creation of animated 3D Sphere (through direct access to pixels of canvas). The sphere itself is getting around the canvas continuously. This example should work in the most of modern browsers (like Firefox, Chrome, Safari and even in IE)

Polaroid gallery

  • Reading time:53 mins read

Polaroid - we did not talk about photo galleries for a while, however enough time has already passed and here could be new galleries

Interactive 3D watch using three.js

  • Reading time:279 mins read

Interactive 3D watch using three.js

The goal of our today’s lesson is the continuation of studying webgl using the three.js library. We create interactive (ticking) three-dimensional classical watches that consists of following major elements: round dial, the clock arrows and moving arrows. Watch model will be located in space, so you will easily be able to rotate it in the scene for viewing the watch from any angle.

(more…)

WebGL With Three.js – Lesson 1

  • Reading time:387 mins read

WebGL With Three.js – Lesson 1

As we have promised – it is time to start our new series of articles devoted to the WebGL. This is our first lesson, where we consider the main basic functions: creating a scene, camera, renderer, controls (OrbitControls). We will also create the simplest directional light, add a dozen objects (of different geometry) with shadows. In order to make things went faster, we decided to take one of the most popular webgl frameworks – three.js. Why use Three.js? Besides the fact that it is open source JavaScript framework, it is also the most rapidly growing and discussed engine. Here already implemented really many possibilities, from low-level work with points and vectors, to work with ready scenes, shaders and even stereoscopic effects.

(more…)

How to make a 3D gallery using javascript

  • Reading time:297 mins read

3D gallery – using javascript

Today we continue JavaScript lessons, and our article will about creating modern 3d photo gallery using pure javascript. We will simulate 3D effect using z-indexes. Via mouse clicking we will moving from one photo to another. And I sure that better to see demo now.

(more…)