Advertisement

JavaScript

Latest Posts
  • Web Design
    SVG
    How to Manipulate and Animate SVG With Snap.svgSnap
    In this tutorial we're going to introduce Snap.svg, a JavaScript library which assists in animating and manipulating SVG content. To demonstrate some of the features available, we're going to animate an SVG eye.Read More…
  • Web Design
    JavaScript
    Recreating the Touch Ripple Effect as Seen on Google DesignGoogle thumb
    Google's new design efforts are vast and justify a significant amount of conversation. But instead of talking about the theory of "Material Design" and the implications of Google's newest efforts, we're going to focus on an interesting technique Google has employed on their Design landing page.Read More…
  • Web Design
    JavaScript
    Responsive Design, Retina Images and Debugging for Google Maps APIGoogle map rwd retina
    This final part of the Google Maps API For Designers series rounds things up by looking at responsive design, retina images and a range of testing and debugging tools which make life a lot easier.  It gives a whistle-stop tour through a whole range of areas, which you can explore further in your own projects.Read More…
  • Web Design
    JavaScript
    Linking Up the Google Maps and Flickr APIsGoogle map flickr retina
    Imagine you've made the beautiful map a client requested; adding all sorts of interesting markers, pop-ups, custom overlays and photos.  But then the client mentions they want to be able to add their own photos without either troubling you, or doing any coding themselves. This is where the Flickr API comes in very handy.Read More…
  • Web Design
    JavaScript
    The Google Maps API and Custom OverlaysGoogle map overlay retina
    In our previous tutorial we looked at how you can add markers and customize the colors and menus of a Google map using the service's API. This tutorial takes things a step further, explaining how you can create your own custom map and overlay it onto a Google map (such as my 1896 map of Portsmouth).Read More…
  • Web Design
    JavaScript
    Getting Creative With the Google Maps APIGoogle map retina 1
    You’ve designed a shiny new website; carefully selecting the colors, typography and photographs to perfectly reflect the company's branding.  Then your client asks you to add a map. Sure, you could use a map building ‘wizard’, such as the one that comes with every google account. But, let’s face it, their functionality is limited and they look pretty generic!Read More…
  • Web Design
    JavaScript
    Build a Multi-Step Form InterfaceForm sideways retina
    Form usability is an incredibly important topic in web design. As one of the primary input interfaces provided to users, the usability of a form is essential to a good user experience. Today, we're going to build a multi-part form, complete with validation and animation. We'll cover a lot of ground, so buckle up!Read More…
  • Web Design
    Site Elements
    Reveal Content When Needed With an Expanding FooterFooter retina
    During this tutorial we're going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they wish to see more content. The end result is comparable to the accordion effect sometimes applied to lists and you can find it used on sites such as seesparkbox.com. Additionally, we're going to be using Emmet to help us write our HTML at lightning speed.Read More…
  • Web Design
    JavaScript
    Quick Tip: Implement a Sticky "Back to Top" ButtonGo to top preview
    In this quick tip screencast we're going to implement a feature which you may have seen on websites with lots of page content. This button appears when the browser window is scrolled beyond a certain point and will allow our users to easily navigate "back to top". The implementation is pretty straight-forward; first we'll create our link with HTML and CSS, then we'll use a bit of JavaScript to enhance the behavior. The Screencast Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube Read More…
  • Web Design
    JavaScript
    Create a Sticky Navigation Header Using jQuery WaypointsPreview
    In this tutorial, we'll be creating a navigation bar that stays with you as you scroll down — and we'll also throw a gimmick or two into the mix to polish it off.Read More…
  • Web Design
    JavaScript
    Writing a Flexible Grid Script for PhotoshopPreview
    Being a capable web designer means having a solid grasp on grids, especially if you want to pursue responsive web design. In this tutorial we'll take a look at a Photoshop script for generating your own custom grids, plus we'll open the hood and look at how the script is actually made.Read More…
  • Web Design
    Complete Websites
    Create a Parallax Scrolling Website Using Stellar.jsPreview
    One of the biggest trends in recent modern web design is use of parallax scrolling effects. In this tutorial I'm going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js.Read More…
Advertisement
Advertisement