반응형
반응형

Tracking.js — Camera-based interaction with your browser

Tracking.js lets you create interactions with your browser using your computer’s webcam. It’s fairly simple to use, considering the powerful uses that it makes possible.

tracking.js

 

 

 

 

 

.

반응형
반응형

 

 

23 Beautiful jQuery Text Animation Effects Examples with Tutorials

 

Link : http://megahitmag.com/jquery-text-animation-effects-examples-tutorials/

 

jQuery is a great JavaScript library, you can give a direction to your creativity when it comes to making stylish Image galleries, Menus, Animation Effects and attractive text effects using jQuery. Today we will show you tutorials on how to create mouse over text animation effects with jQuery with the help of these superb 23 examples. You can give color effects, scrolling effects, hovering, Fly, neon and light effects and much more through jQuery.

Apple-like Retina Effect With jQuery

jquery text effects

Check this tutorial to know how the author has turned a static image into a fully functional “Retina effect” with only jQuery and CSS.

More Information on Apple-like Retina Effect With jQuery

jQuery Text Animation Effect – Fading color for inline text links

jquery text effects

A simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover.

More Information on Fading color effect for inline text links using jQuery

Simple Banner Rotator Animation Effect With jQuery, php & MySQL

banner Rotator jquery Animation effects

You can now create and randomly display banners on your site. Each of the banners features a neat jQuery animation effect, which you can customize to fit your own needs.

More Information on Simple Banner Rotator With PHP, jQuery & MySQL

jQuery Animation Effects Plugin – Approach

jQuery Animation Effects Plugin

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object.

More Information on jQuery Approach

MicroTut: The jQuery Hover Method

jquery hover effect

When building a navigation menu, or any other jQuery script, it is often necessary to have a robust method with which to define a mouse over and mouse out state. This is where the hover() method comes along.

More Information on MicroTut: The jQuery Hover Method

How to Create a 3D Tag Cloud in jQuery

jquery 3d tag cloud

With browsers rendering JavaScript faster than ever before, it’s a great opportunity to get creative with jQuery. This tutorial will show how to create a scrolling 3D tag cloud

More Information on How to Create a 3D Tag Cloud in jQuery

Neon Text Effect With jQuery & CSS

jquery css text effect

Check this tutorial to know how to create a neon glow text effect with CSS and jQuery.

More Information on Neon Text Effect With jQuery & CSS

jParallax

jParallax is a jQuery parallax plugin. It turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport.

jquery parallax plugin

More Information on jParallax

Circulate

we can animate the “top” value with one easing function while animating the “left” value with a different easing function.

jquery animation effect

More Information on Circulate

Colortip – a jQuery Tooltip Plugin

This jQuery tooltip plugin is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.

jquery tooltip plugin

More Information on Colortip – a jQuery Tooltip Plugin

Color Fading Menu Effect with jQuery

jquery text effects

Here author will demonstrate how to perform colour fading menu effect with jquery and image merging.

More Information on Color Fading Menu with jQuery

Grid Accordion

grid accordion

A grid of cells expand both vertically (like a regular accordion) as well as horizontally to display the content they contain.

More Information on Grid Accordion

Leopard Desktop with jQuery using jqDock

jqdock

Check how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding a whole lot of gadgets or widgets you don’t have space for

More Information on Leopard Desktop with jQuery using jqDock

BBC Radio 1 Zoom Tabs

jquery mouse hover zoom effect

The mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

More Information on BBC Radio 1 Zoom Tabs

JQuery Based Flipped Image Gallery with Bounce Effects

jquery mouseover effect

Image galleries are most important element of any website. Here, I have created a simple jQuery based flipped image gallery. On mouce hover the images will expand. Its simple and stylish gallery.

More Information on JQuery Based Flipped Image Gallery with Bounce Effects

Create a Stunning Sliding Door Effect with jQuery

jquery hover effect

Mouse over and mouse out event will move the corners diagonally out and in according to the mouse event.

More Information on Create a Stunning Sliding Door Effect with jQuery

How to Make a Threadless Style T-Shirt Gallery

jquery hover effect

There’s a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn’t show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.

More Information on How to Make a Threadless Style T-Shirt Gallery

flashlight

jQuery flash light

Your mouse works as a flashlight and you can read the content only where you are moving your mouse.

More Information on flashlight

Sproing! – Make An Elastic Thumbnail Menu

jquery menu effect

It Magnifies menu items when they are hovered over. Also Menu items expand upwards.

More Information on Sproing! – Make An Elastic Thumbnail Menu

Halftone Navigation Menu With jQuery & CSS3

jquery menu effect

It allows you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

More Information on Halftone Navigation Menu With jQuery & CSS3

a Smooth Animated Menu with jQuery

jquery animation effect

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Here author will do just that by building a menu and animate it with some smooth effects.

More Information on a Smooth Animated Menu with jQuery

AnythingZoomer: jQuery Zoom Animation Effect

jquery zoom animation effect

This is a jQuery zoom animation plugin, so you’ll need to load the jQuery library first, then the plugin file, then invoke the new function on the area you wish to have zooming.

More Information on AnythingZoomer

jQuery PhotoShoot Plugin 1.0

jquery photoshooting effect

The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.

More Information on jQuery PhotoShoot Plugin 1.0

반응형
반응형

20 Useful Mobile Frameworks for Developers

http://feeds.dzone.com/~r/dzone/frontpage/~3/p_E14jg1YxU/20_useful_mobile_frameworks_for_developers.html

 

sencha-touch

The popularity of mobile applications is on a perpetual flux of advancing and expanding, as their usage has become increasingly prevalent across mobile phone users. The mobile app explosion has incited a rapid expansion into other sectors, such as factory automation, GPS and location-based services, banking, order-tracking, and ticket purchases have made app development more of a challenge; which in turn has led to the creation of a wide range of reviews, recommendations, and sources, including blogs, magazines, and dedicated online app-discovery services.

In this article I have gathered 20 Mobile Frameworks for development that would help developers to create innovative, useful and entertaining apps for mobile lovers. I hope mobile developers will find this list handy and according to their needs. If you know any other mobile frameworks which you think is good enough to serve developers purposes, do let us know by commenting in comment section, we would love to hear your feedback. Enjoy !

If you like the article you might be interested in our other articles on Best HTML5 Frameworks and Best CSS Frameworks for Developers

1. Fries

Fries
Fries is a solid HTML-CSS-JS framework for creating Android-like UIsboth for real-world usage and prototyping. The framework has all the major components like forms, action bars, lists, buttons, spinners or tabs. It is also optimized for PhoneGap and can be easily converted to a native app.

Source

2. Appium

appium
Appium is an open source framework which helps automating mobile app testing from any language and any test framework, with full access to back-end APIs and DBs from test code. It works for both iOS + Android apps and tests can be written with Java, Objective-C, JavaScript, PHP, Python, Ruby, C#, Clojure, or Perl. The framework is Mac OS X only and requires Nodejs to run.

Source

3. Junior

junior
Junior is a HTML5 front-end framework for creating mobile apps that look and behave like native. It uses CSS3 transitions for a slick performance, supports swipable carousels and includes various UI components (from Ratchet). The framework uses Zepto (which is nice for jQuery fans as it has a jQuery-like syntax) and has integration with backbone.js views + routers. Junior is pretty easy to use and has the documents + examples to get you started.

Source

4. Enyo

enyo
Enyo, the JavaScript framework which was created to power the apps on HP’s TouchPad, has recently reached v2 and now offers cross-platform compatibility rather than only webOS (as v1 did). The new Enyo supports both desktop + mobile, works in all major browsers and comes with a broad set of cross-platform UI widgets + a powerful layout library for building apps.

Source

5. Sidetap

sidetap
Sidetap is a simple and lightweight (2kb minified, gzipped) framework for creating mobile web apps. The framework actually focuses on providing a flexible side-navigationsimilar to the one we know from Facebook’s mobile app, and, once the navigation part is solved, it is pretty easy to build a simple mobile web app. It works by telling Sidetap “the content element to be animated”. It takes care of clearing the stage using whatever animation is appropriate for the situation.

Source

6. Mobello

mobello
Mobello is an open source JavaScript UI framework that simplifies developing mobile web apps. The framework aims to provide a native-like experience in mobile, it is optimized for touch events and has 20+ widely-used UI components. It also has an IDE, named Mobello Studio that focuses on building mobile apps with HTML5, CS3 and the Mobello framework. Mobello Studio has a drag ‘n’ drop enabled visual design editor, a JavaScript debugger and built-in mobile device emulator.

Source

7. Moobile

moobile
Moobile is an exciting and fresh project; a mobile web application framework built on MooTools. Currently, it is focused on providing a iOS-like experience on WebKit browsers and comes with many controls like bar, button, image, list, activity indicator, slider and more. It also has support for transitions like fade, slide, cubic or cover and can display native-like alerts. Interfaces created with Moobile are fluid, they will work well both in iPhone + iPad and look good when orientation changes.

Source

8. Spine Mobile

spine mobile
Spine Mobile is a JavaScript framework, built on top of SpineJS, for building mobile web apps that look and feel native. The framework comes with specialized controllers, panel layout, hardware accelerated transitions and touch events.

Source

9. Zoey

Zoey
It is a HTML5-CSS3-powered framework for creating mobile apps, built on top of Zepto.js and weights only 6kb (gzipped). Zoey has the UI components like navigation, lists, buttons, control groups, forms and grids. The framework is compatible with iOS + Android and comes with an app skeleton that covers all the features.

Source

10. iUI

iui
iUI is a mobile web framework that has been around for a long time (since 2007) compared to many other mobile resource. The framework includes a JavaScript library, CSS and images for developing touch-enabled web apps. User interfaces to be created are iPhone-like yet compatible with most smartphones and tablets and has support for menus, forms, lists, image galleries and more. Also, there are built-in extensions for caching, getting system information, HTML5 videos or theme switching.

Source

11. Lungo.js

lungo
Lungo.js a framework, powered with HTML5, CSS3 and JavaScript, for creating mobile web apps. The applications created with it works in all of the popular platforms (iOS, Android, Blackberry and WebOs). It has support for touch events like tap, double-tap or swipe and doesn’t use images (including the icons) as everything is vectorized.

Source

12. Wink Toolkit

wink
Wink Toolkit is a JavaScript framework for creating mobile web applications with less-hassle. It comes in multiple parts where the “core” (which includes HTTP requests utilities, event management system or DOM extensions) is a must to use and every other feature is optional. Such a structure helps keeping the filesize minimum which is pretty important when it is mobile.

Source

13. The M Project

the-m-project
The-M-Project is an exciting HTML5 JavaScript framework for building cross-browser mobile web applications (iOS, Android, Palm webOS, BlackBerry). It makes use of jQuery on the JavaScript part and contains all ui + core files with features like offline support, internationalization and more. The-M-Project is not alone, it requires nodeJS and comes with a build tool called: Espresso! which makes it easy to structure your code, build and run it on a built-in server.

Source

14. DHTMLX Touch

dhtmlxtouch
DHTMLX Touch is a JavaScript library which heavily makes use of HTML5,for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create cross-platform web applications for mobile and touch-screen devices. The framework is compatible with multiple devices and applications built with it will work smoothly on iPad, iPhone and Android.

Source

15. Zepto.js

zepto
Zepto.js is a lightweight (2kb) JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. It aims to help overcoming the most drudge work with a nice API so users can concentrate on getting things done. Besides the most common functions that can be expected from a JS framework, it has support for touch events and detection of the environment.

Source

16. jQuery Mobile

jquerymobile
jQuery project has just published the expected jQuery Mobile; the touch-optimized web framework for smartphones & tablets. It is built on top of jQuery and provides a unified user interface system that’llperform the same in all popular mobile device platforms. The framework is built around the principle of progressive enhancement and uses the HTML5 and CSS3 features but degrades nicely for browsers that don’t support them.

Source

17. Jo

jo
Jo is an open source mobile application framework that is based on HTML5. It enables you to create for multiple platforms like webOS, iOS, Android, Symbian, Safari, Chrome and Dashboard Widgets. Jo is also compatible with PhoneGap and makes possible to create native apps besides web app.

Source

18. Sencha Touch

sencha-touch
It is an HTML5 Mobile App. Framework, which allows you to develop web applications that look and feel native on Apple iOS and Google Android touchscreen devices. It makes use of HTML5 for delivering audio/video or localStorage and CSS3for maximum styling like rounded corners, background gradients, and shadows.

Source

19. WebApp.Net

webapp
WebApp.Net is a feature-rich JavaScript framework for building mobile web applications. It provides a complete set of components (switch buttons, radio groups, etc.) that will help your website look & behave like a native mobile application. The framework has full support for Ajax & every action from clicks to form submissions can be Ajaxed with tiny declarations.

Source

20. Helios

helios
Helios is an open-source framework that provides essential backend services for iOS apps, from data synchronization and push notifications to in-app purchases and passbook integration. It allows developers to get a client-server app up-and-running in just a few minutes, and seamlessly incorporate functionality as necessary. Helios is a constellation of mobile backend components – Mix and match to meet the specific needs of your app. Built on the Rack webserver interface, Helios can be easy added into any existing Rails or Sinatra application, or used by itself. It is released under MIT License.

Source
반응형
반응형

자바스크립트 개론 : 체계적인 프로그래밍 수련법

 

원서 링크 WEB : http://eloquentjavascript.net/contents.html

원서 다운로드  : http://eloquentjavascript.net/Eloquent%20JavaScript.zip

Eloquent JavaScript

A Modern Introduction to Programming

by Marijn Haverbeke

Eloquent JavaScript is a book providing an introduction to the JavaScript programming language and programming in general.

A concise and balanced mix of principles and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest joys of programming. Plus, JavaScript!
Brendan Eich, the man who gave us JavaScript

The book exists in two forms. It was originally written and published in digital form, which includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.

I have published a revised version of the book on paper. The structure of this version remained largely the same, but the whole text has been thoroughly edited and updated. You can order from Amazon here. There is still an interactive coding environment for this version, as a separate page. Errata are here.

The digital version is available in the following formats:

The following translations are available:

 

반응형
반응형

Developing Backbone.js Applications

 

Link : http://addyosmani.github.io/backbone-fundamentals/


 

Was this helpful? We'd love you to write a review.

반응형
반응형

jQuery Fundamentals

 

http://jqfundamentals.com/

 

 

 

  • MDN: JavaScript
  • Chrome Developer Tools Overview
  • Fixing these jQuery: A Guide to Debugging
  • Chrome Developer Tools Cheat Sheet
  • Chrome Dev Tools: 12 Tricks to Develop Quicker (video)
  • 반응형

    + Recent posts