Constructs

Dragula.js is a standalone library created by Nicolas Bevacqua for providing drag and drop features to your website. Dragula claims to provide the easiest possible API to make drag and drop a breeze in your applications. The main features of Dragula are:

• Super easy to set up
• No bloated dependencies and lightweight (~9KB minified)
• Figures out sort order on its own
• A shadow where the item would be dropped offers visual feedback
• Touch events
• Solid browser support

Hit the button below to learn more about Dragula.

View More   View Demo

Autocompeter is a web service that provides an auto-complete search widget for your website. You can implement Autocompeter in two steps; putting a line of CSS and some JavaScript on your site and send your searchable titles and their URLs to Autocompeter via its API in JSON format. The API also supports an optional parameter called popularity for your titles so that you can have some kind of ranking system in the way the search results appear in the suggestion box. Autocompeter is free to use and it is super fast. The JS and CSS file sizes are miniscule and you can load them straight from the CDN. Hit the button below to learn more and view the demo on the same page.

View More

Once you understand the basics of CSS it’s natural to move onto more detailed subjects such as CSS3 animations. One of the subtopics of CSS3 animation is working with SVGs. SVG elements accept a few of the standard CSS properties but in order to truly animate them you’d need to use a dedicated JavaScript animation library like Snap.svg. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more. Click the buttons below to go to the Snap.svg website or read more on how to manipulate and animate SVG with Snap.svg in the accompanying Tuts+ tutorial.

View More View Tutorial

Elevator.js is a tongue-in-cheek JavaScript library for making a back to top button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen. According to its creator Tim Holman, “this is very serious stuff”. You can customize the this standalone plugin quite easily to change the background music, end sound effect, scroll duration or simply disabling the music altogether. Hit the buttons below to learn more and view the demo.

View More   View Demo

Swiper is a standalone modern mobile touch slider with hardware accelerated transitions and amazing native behavior that runs great on iOS, latest Androids, Windows Phone 8 and modern desktop browsers. “Modern” here means it is not compatible with all platforms because it is only focused on modern apps/platforms to bring the best experience and simplicity. This free and open-source touch slider is created by iDangero.us. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper comes with a very extensive API, solid documentation and a nicely prepared demo page with source codes. Hit the buttons below to learn more.

View More   View Demo

If you run a blog or website showcasing events in a chronological order, it is important to grab the readers’ attention as quickly as possible by displaying all the events vital information in an effective and interesting manner such as using timeline charts. In this Sitepoint tutorial, web developer Ashraff Hathibelagal teaches us how to use Google Charts to add professional looking timelines to your web pages. Google Charts allows us to use JavaScript to manipulate our charts data, appearance as well as adding interactivity, all of which are covered in this easy to follow tutorial and its accompanying demos. Click the button below to learn more.

View More

Tanx is an online multiplayer tank shooter game created using PlayCanvas WebGL game engine, Node.JS, WebSockets, Web Audio API and 2D Canvas in a 12 hour hackathon. The objective of the game is to be the first team to destroy 32 enemy tanks on the battlefield. The team members will be assigned randomly as players join the game. You can control your tank with WASD keys and aim/shoot by using mouse or touch joystick on mobile platform. Hit the button below to launch the game in your browser or alternatively you can install it from the Chrome Web Store!

Play!

Space.js is a HTML-driven JS library for narrative 3D-scrolling created by Patrik Göthe. The goal of this experimental library is to explore a new way of presenting content on the web by introducing a new dimension to our usual scrolling behavior. It works by dividing your HTML sections into frames called space-frame and transition them in and out of the screen as you scroll. The default frame transition is to enter by fading in and exit by scaling up and then fading out however you can compose your own transitions using properties like opacity, scale, translate3d and rotation with the API. Hit the button below to learn more or view some demos.

View More   View Demo