A re-introduction to JavaScript (JS Tutorial) - JavaScript Why a re-introduction? Because JavaScript is notorious for being the world's most misunderstood programming language. It is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful language features await. It's useful to start with an overview of the language's history. Several months later, Microsoft released JScript with Internet Explorer 3. Because it is more familiar, we will refer to ECMAScript as "JavaScript" from this point on. Unlike most programming languages, the JavaScript language has no concept of input or output. Overview JavaScript is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods. Let's start off by looking at the building blocks of any language: the types. ... oh, and undefined and null, which are ... slightly odd. And there are some built-in Error types as well. Numbers Numbers in JavaScript are "double-precision 64-bit format IEEE 754 values", according to the spec. parseInt('11', 2); And:
ScrollMagic ♥ Demo 6 JavaScript Animation Libraries to Save Time and WOW Clients JavaScript and CSS libraries help web designers and developers be better at their jobs, while alleviating common pain points encountered when manually coding elements. Saving time, creating more while doing less, and building upon previously successful frameworks are just a few of the benefits of using these libraries. Best of all, they’re built to help with all areas of web design and development — including animations, which can be a powerful part of your next client project. As outlined in Pasquale D’Silva’s theory of transitional interfaces, animations are important to websites because they help users understand changes. Take the effect loading icons have on wait times: if a loading animation stops moving, users assume their task is no longer being performed. This is why web designers and developers should not only “delight” users with animations, but also create them to serve a functional purpose. You might also like: How to Upload and Animate SVG Icons in 3 Simple Steps 1. 2. 3. 4.
10 Tips for Writing JavaScript without jQuery Danny Markov jQuery is a great library. It came to be around the time when IE6 was the number one browser. Today, however, web browsers have advanced a great deal from those days. Don’t get me wrong – jQuery is still a wonderful library and most often than not you will be better off using it. 1. The first thing you do when writing jQuery, is wrapping your code in a $(document).ready() call, so that you know when the DOM is ready for manipulation. // Add an event listener of DOMContentLoaded to the whole document and call an anonymous function. // You can then wrap your code in that function's brackets // and it will execute once loading is complete. document.addEventListener('DOMContentLoaded', function () { // Our hawaiian greeting is displayed as soon as the page loads, console.log('Aloha'); }); Run 2. Once upon a time, we could only select elements by id, class and tag name, and jQuery was a life-saver with its smart css-like selectors. 3. 4. 5. 6. 7. 8. 9. Conclusion Learn more
Flexisel - Responsive Carousel jQuery Plugin As long as there has been jQuery there have been image carousels created with jQuery. The famous jCarousel has been out since 2006, the same year the first version of jQuery was released. However, with the explosion of users now using their mobile devices for their internet browsing — on iPhones, iPads, and the like — it becomes necessary for jQuery plugins to support a good user experience on these devices. Check out the demo here. Flexisel will adapt responsively as the screen width gets smaller... You can also change the number of items shown depending on the screen width! Other options include autoplay, animation speed when scrolling right and left, initial number of visible items, and more! For documentation on how to use and available options... see the repo on GitHub
GSAP, the standard for JavaScript HTML5 animation | GreenSock knrz/CSV.js CSS Background Animations Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. We'll use CSS animations instead of transitions for this effect: With the animation code in place, now it's time to apply it to an element with a background image: The cloud background image within the sample element will elegantly scroll from left to right over a duration of 40 seconds, seamlessly repeating an infinite number of times. How epic is it that we don't need to use JavaScript to manage these animations anymore?
Bringing Pages to Life with the Web Animations API This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community. One API to Rule Them All Animation on the web has long been divided into four disparate camps: CSS transitions and animations are very performant and provide keyframing, but are also time-consuming to build, and provide only basic start-and-end control in CSS and JavaScript. This has tended to relegate them to simple UI response animations, loops, and page load animations.SMIL (Synchronized Multimedia Integration Language) is very powerful, but it’s also syntax-heavy and has incomplete browser support. The Web Animations API seeks to integrate the best features of all of these into a single, unified specification, while eliminating the drawbacks, creating a native understanding of keyframes, easing, and element control in JavaScript, with the same on-screen performance as CSS. Keyframes in JavaScript As will the initial CSS: