Category: jQuery

Fullscreen Scrolling Tiles with pagePiling.js

Parallax and page scrolling plugins are rather popular among the open source community. A new one to add into the mix is pagePiling.js. This completely free open source plugin runs on top of jQuery for a unique “slide” design. Each section of the page slides out of the way while scrolling. It’s not exactly parallax,… Continue reading Fullscreen Scrolling Tiles with pagePiling.js

Vertical Navigation in CSS and jQuery

A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them. [sociallocker]Demo Download[/sociallocker] Our first concept of vertical fixed navigation is one of our most popular resources. This time, we tried to push this concept a little further. The basic idea behind putting round indicators on the side of… Continue reading Vertical Navigation in CSS and jQuery

Multi-Level Menu : A simple menu with multiple levels

This is a simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button. The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the… Continue reading Multi-Level Menu : A simple menu with multiple levels

Simple to Use jQuery Plugin to Animate SVG Paths

jQuery DrawSVG uses the jQuery built-in animation engine to transition the stroke on every inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. It weights less than 2KB minified and 800 bytes gzipped. It’s easy to use with easing and stagger support. Best of all, it’s completely Free! Requirements: jQuery Framework Demo: http://lcdsantos.github.io/jquery-drawsvg/ License:… Continue reading Simple to Use jQuery Plugin to Animate SVG Paths

25 Free jQuery Plugins for Custom Tabs & Accordions

Modern web designers simply adore dynamic page elements. Dropdown menus, carousels, tabbed links and accordion menus are just a few examples. All of these effects can be recreated using free jQuery plugins without much code. The toughest part is finding the perfect jQuery plugin to fit with your current project. In this gallery you’ll find… Continue reading 25 Free jQuery Plugins for Custom Tabs & Accordions

animatedModal.js – A jQuery plugin to create a fullscreen modal with CSS3 transitions

In user interface design, a modal window is a graphical control element subordinate to an application’s main window which creates a mode where the main window can’t be used.It can be used to generate alert or confirm messages with few lines of code. animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3… Continue reading animatedModal.js – A jQuery plugin to create a fullscreen modal with CSS3 transitions

50 Most Useful jQuery Plugins from 2014

Today, we have the 2014 edition of our top 50 jQuery plugins of the year. They are the 50 jQuery plugins that we feel are the most useful, most innovative and most time-saving solutions to many of the modern design and development issues you may have. Just to help you find exactly what you are… Continue reading 50 Most Useful jQuery Plugins from 2014

ClassyCountdown – jQuery Plugin to Create Circular Countdowns

ClassyCountdown is a jQuery plugin written by Marius Stanciu – Sergiu, a plugin that allows you to easily create clean circular countdowns. It is fully customizable and includes 12 themes, which can be modified and it uses HTML5 canvas for rendering the circles. This jQuery plugin is distributed under the MIT license. Enjoy! Demo &… Continue reading ClassyCountdown – jQuery Plugin to Create Circular Countdowns

33 Amazing Frontend Design Patterns using CSS3 and jQuery

Website layouts are typically seen as a combination of design and development meshed together. UI design can be performed using graphics software, code, or in most cases both. This subject offers an interesting combination of skills that work hand-in-hand with each other. Frontend inspiration can offer a lot of great ideas for anyone who builds… Continue reading 33 Amazing Frontend Design Patterns using CSS3 and jQuery

40 Resources for Getting Started with jQuery Development

Each year a new batch of young web developers are jumping into the field head-first. Often times frontend web development is the easiest barrier to jumpstart learning. HTML/CSS work is quite simple, but delving into JavaScript provides a deeper realization of general programming topics. These include functions, loops, variables, along with an understanding of how… Continue reading 40 Resources for Getting Started with jQuery Development

20 jQuery plugins that you can customize visually

Here are some cool jQuery plugins that you can implement within minutes! They’re all extremely useful, and can be customized for your website with an easy and intuitive click interface of Bitconfig. Bitconfig is like a fiddle for jQuery plugins. All plugin options are listed in a config panel and you just need to select… Continue reading 20 jQuery plugins that you can customize visually

A jQuery Plugin for Creating Calendars

There are wonderful and feature-rich calendar modules out there and they all suffer the same problem: they give you markup (and often a good heap of JS) that you have to work with and style. This leads to a lot of hacking, pushing, pulling, and annoying why-can’t-it-do-what-I-want scenarios. CLNDR is a jQuery calendar plugin. Unlike… Continue reading A jQuery Plugin for Creating Calendars

30 Masonry WordPress Themes

A masonry layout can use jQuery and CSS3 to dynamically position your images and videos in a neat grid that is optimised and changed depending on screen sizes and the displayed content width and height dimensions. Many WordPress theme shops and authors are incorporating masonry layouts into their WordPress themes, this results in a dynamic… Continue reading 30 Masonry WordPress Themes

Beginners Guide to Working with jQuery Animation

In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design. The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the… Continue reading Beginners Guide to Working with jQuery Animation

Create a Simple jQuery Image Lightbox Gallery

When building your own WordPress theme, there are a number of items to consider. One such page element is a dynamic image gallery, either using a lightbox or some type of sliding panel. Both of these user interfaces mesh nicely into the content of an article. Since they can both work on typical websites it… Continue reading Create a Simple jQuery Image Lightbox Gallery

The Best Free Books, Videos, Tutorials and More for Learning jQuery

jQuery is undoubtedly the most popular JavaScript library on the web today. It is used by 70% of the top websites and is becoming a defacto standard in web development. If you are looking for a programming job, knowing the library is a big plus. Things have progressed as well in terms of the quality and availability… Continue reading The Best Free Books, Videos, Tutorials and More for Learning jQuery

Promised-Based Validation

The concept of “Promises” has changed the way we write asynchronous JavaScript. Over the past year, many frameworks have incorporated some form of the Promise pattern to make asynchronous code easier to write, read and maintain. For example, jQuery added $ .Deferred(), and NodeJS has the Q and jspromise modules that work on both client… Continue reading Promised-Based Validation

70+ Must Have jQuery Tutorials

Welcome to day 7, the last installment of tutorial week on Designrfix. Today we have assembled an awesome collection of some wicked jQuery tutorials from around the Web. I am confident that these web design and development tutorials will arm you with all the necessary techniques in-order to achieve those latest web design trends. Lastly,… Continue reading 70+ Must Have jQuery Tutorials

Code a Dynamic Featured Image Gallery Layout using jQuery

The common image thumbnail carousel effect has gained traction among web developers. You can locate this technique on almost any major news company or online magazine, coupled with rotating featured images or banner designs. I feel that open source code has offered a much smoother choice for developers instead of being forced to write your… Continue reading Code a Dynamic Featured Image Gallery Layout using jQuery

How to Make a Tumblr-powered News Ticker

Tumblr is a blogging service with an elegant interface for creating and publishing content. In this tutorial, we are going to use it as the foundation of a news publishing system. We are going to develop a simple widget which cycles through the most recent posts on a Tumblr blog, and presents them as news items… Continue reading How to Make a Tumblr-powered News Ticker