Learn to build custom checkbox and radio button interfaces in order to gain full control over their design and functionality without requiring a ridiculous amount of CSS code, CSS hacks or third party frameworks. We’re going to use just a few lines of CSS to set their appearance, and just a few lines of JavaScript […]

In this final part of the Guide we discuss 3D animation technologies for browser software and web development. 3D animation design and development on the web is a very broad topic involving a massive amount of technologies, tools, frameworks and software.

Learn SVG animation techniques using animation elements(SMIL), JavaScript and CSS. Lesson Code: www.developphp.com/video/JavaScript/WAPG-6-SVG-Animation-Programming-SMIL-JavaScript-CSS

Lesson Code: www.developphp.com/video/CSS/Custom-Mouse-Cursor-Tutorial-Canvas-CSS-HTML Learn how to change the mouse cursor or pointer to a custom cursor and change the hotspot for the click area.

Lesson Code: www.developphp.com/video/JavaScript/WAPG-5-Collision-Hit-Detection-DOM-Programming-JavaScript-Tutorial Learn collision and hit detection in the DOM. The DOM is the normal development environment. We already made collision and hit detection tutorials for the HTML5 canvas in my Canvas Bootcamp playlist, which you can find on my channel any time you want.

Learn to program script-based animations with JavaScript using requestAnimationFrame, cancelAnimationFrame, setInterval or setTimeout. Using timing methods provides a greater level of control over how things animate on the screen and is ideal for video game development and other interactive animated applications. requestAnimationFrame is a method that invokes a callback function and uses the browser software’s […]

Learn to design, animate and render a set of holiday light bulbs using CSS and JavaScript. Happy Holidays everyone.

In this video we cover sprite animation programming in the DOM and on the Canvas. Learn to make dynamic and interactive sprite sheet animations.

Learn keyframes animation programming with CSS and JavaScript.

In this first video we’ll briefly take a look at animation technologies that we’ll be exploring in the guide, then we’ll begin transition programming because transitions are a great place to ease beginners into the more advanced material that will be covered later.

Lesson Code: www.developphp.com/video/CSS/Parallax-Effect-Animation-Multiple-Background-CSS-Tutorial Learn to rig parallax effect animations using the new CSS3 multiple backgrounds capabilities. We are using a single DIV element to make all of the magic happen, pure CSS and no complicated scripting. You can integrate sprite animations inside of the DIV to make even cooler effects.

Lesson Code: www.developphp.com/video/CSS/Background-Position-keyframes-Animation-CSS-Tutorial Learn to animate background images in multiple directions. Your backgrounds can animate in any direction, up, down, left, right, or diagonally. We’ll be using the CSS keyframes rule and the background-position property to create the effect.