All posts filed under “JavaScript”

All the JavaScript-related tutorials, ideas and various posts in Stampede Constructs

snabbt.js - Minimalistic Javascript Animation Library
February 12, 2015   |   Less than a minute reading time
comment 0

snabbt.js – Minimalistic JavaScript Animation Library

snabbt.js is a minimalistic JavaScript animation library. It focuses on moving things around like translating, rotating, scaling, skewing and resizing your elements. The goal is to make a library that will let users make smooth animations without needing to know too much about browser rendering. However, there are a few limitations:

  • All transforms work on pixels or radians. Any unit conversion has to be done beforehand.
  • No arbitrary property animations, e.g. colors, padding, margin or line height animations.
  • For performance reasons, snabbt never queries the DOM. This means that in some cases you need to transforms yourself.(Specifically when using value feeding)
  • snabbt.js needs requestAnimationFrame and matrix3d to work, so no IE < 10

Hit the button below to learn more and view some demos on how snabbt.js works.

View More   View Demo

Simple.Timer
February 1, 2015   |   Less than a minute reading time
comment 0

JavaScript Countdown Timer using Simple.Timer jQuery plugin

Simple.Timer.js is an easy to use jQuery plugin to create a simple JavaScript countdown timer. To use it, just set the desired duration using either data-seconds-left or data-minutes-left data attributes and then start the timer with $('.timer').startTimer();. It also supports an onComplete event once the countdown has timed out.

<div class='timer' data-minutes-left='3'></div>
<div class='timer' data-seconds-left='180'></div>

$('.timer').startTimer();

If you are looking for a slightly more advanced countdown timer library, check out the standalone JS library by Robert Hashemian. It allows outputting the countdown in “XX Days, XX Hours, XX Minutes and XX Seconds left” format.

View More   View Demo

Typing Effect
February 1, 2015   |   Less than a minute reading time
comment 0

TheaterJS – Creating a Human-Like Typing Effect

TheaterJS is a fun JavaScript demo that emulates the typing effect of a human such as variable typing speed, making typos and erasing letters. To make it to actually “talk” we need to define our own scenario involving multiple actors with different experience levels as well as their scripts. Here are the various configurations TheaterJS supports:

Hit the button below to view more.

View More   View Demo

MixItUp - Filter Content
January 30, 2015   |   Less than a minute reading time
comment 0

MixItUp jQuery plugin for Filtering and Sorting

MixItUp is a powerful and flexible jQuery plugin for doing animated filtering and sorting by Patrick Kunka of KunkaLabs. It is great for managing large collection of categorized data like portfolios or directory, be it on the front-end or the admin panel of a website. MixItUp seems to be fairly straightforward to implement on any websites and it is responsive too. It also has a very extensive API for building customized UI or real-time data manipulation. Play around with the demo to see the various animation configurations the plugin supports.

View More

Imagefill.js - Optimize and Center Responsive Image
January 29, 2015   |   Less than a minute reading time
comment 0

Image Fill and Centering Using Imagefill.js

Imagefill.js is a jQuery plugin by John Polacek for making images fill their containers and centered, a feature that could be useful in a responsive website. You can use this plugin in 3 different ways namely simple, grid and different sizes.

  1. Simple – A single image sitting in a single block container .
  2. Grid – A series of similar sized images  arranged in a regular grid form.
  3. Different sizes – A series of variable sized images arranged in a complex grid form such as using jQuery Masonry.

Hit view more to learn more about the implementation. Resize your browser to see how the demo works on different screen sizes.

View More   View Demo

Foto - Change Responsive Image
January 28, 2015   |   Less than a minute reading time
comment 0

Responsive Image Using Foto.js

Foto is Javascript library that helps you load different images on different screen widths on your responsive website without using CSS media query. It’s also an alternative for srcset to load responsive images. Foto is easy to use, has no dependency and zero configuration. To use it, you just need to include foto.js inside your HTML and put ft-(number-pixel)-src on img. For example:

	<!DOCTYPE>
	<html>
		<head>
			<title>Sample website</title>
			<script src="path/to/foto.js"></script>
		</head>
		<body>
			<img 
				ft-320-src="image-for-320px-screen-width.jpg"
				ft-480-src="image-for-480px-screen-width.jpg"
				ft-640-src="image-for-640px-screen-width.jpg"
				ft-768-src="image-for-768px-screen-width.jpg"
				ft-1024-src="image-for-1024px-screen-width.jpg"
			>
		</body>
	</html>

Hit the button below to read more and view some demos. To learn more about using srcset, click here.

View More   View Demo

javascript
January 22, 2015   |   Less than a minute reading time
comment 0

Add and Remove Classes With Vanilla JavaScript

Adding and removing CSS classes using Javascript is easily the most common task when it comes to JS coding and DOM manipulation. Most of us would settle with jQuery for this simple task but did you know you can achieve this equally easily using vanilla JS? Enters the classList JavaScript property. By using this property, you can perform the usual class operations like add, remove, toggle and check with ease. Hit the button below to learn how to add and remove classes with vanilla JavaScript.

View More

javascript
January 20, 2015   |   Less than a minute reading time
comment 0

Open Source Sliding Navigation Menu

Sliding navigation menu also known as hamburger menu or push menu is a staple style for web navigation in mobile websites nowadays. In this article by WebResourcesDepot, the author compiled 10 free plugins to make beautiful sliding navigation menu. Out of these list, my favorite plugins are:

  • Shifter – It is the simplest jQuery plugin for implementing basic sliding navigation menus.
  • Multi-level push menu – It supports multi-level menus, very configurable and possibly has the highest number of features.
  • snap.js – With snap.js you drag the main content area from left or right to see the hidden navigation.

View More

December 29, 2014   |   Less than a minute reading time
comment 0

Elastic SVG Elements

Elastic SVG element is a web styling inspiration shared by Mary Lou of Codrops to make menus, buttons or other elements more interesting. The idea is to integrate an SVG element into a component and then animate it from one path to another with elastic animation. Snap.svg, an excellent JavaScript SVG library for modern browsers, is used in this tutorial to animate the SVGs. In my opinion, with the right amount of elasticity or bounciness, this effect gives a realistic and natural feel of interaction to the users. Hit the button below to see the codes and demos.

View More   View Demo

ScrollMagic
December 19, 2014   |   Less than a minute reading time
comment 0

Create Interactive Scrolling Websites using ScrollMagic.js

ScrollMagic is a jQuery plugin by Jan Paepke which lets you use the scrollbar to control the playback of website animations. With this plugin, you can create many magical scroll interactions such as:

  • start an animation at a specific scroll position.
  • synchronize an animation to the scrollbar movement.
  • pin an element at a specific scroll position (sticky elements).
  • pin an element for a limited amount of scroll progress (sticky elements).
  • easily add a parallax effect to your website.
  • create an inifinitely scrolling page (Ajax load of additional content).
  • call functions when the user hits certain scroll positions or react in any other way to the current scroll position.

Nicholas Cerminara from scotch.io has created a good tutorial on how to create interactive scrolling websites using ScrollMagic. Hit the button below to learn more and take a look the cool demos at the ScrollMagic website.

View More   View Demo