Monday, August 10FreeJQuery

Tag: Core Java Script

SlideMenu.js : Easy Off-Canvas Menu
2019, Core Java Script, Menus

SlideMenu.js : Easy Off-Canvas Menu

Easy Off-Canvas Menu In This Article You can read about easy Off-Canvas Menu is a easy menu with mobile touch support.Off-canvas menus are ones that are located outside of a user’s viewport and only slide in when a user activates them. This technique is awesome from the point of view of mobile usability. Menu fiction Off-Canvas Menu The fly-out menu has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website.scotchPanels.js scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Slidebars Slidebars is a jQuery framework for quickly and easily implementing app style off-canvas space into your website.Pushy Pus...
Microsite Concept with Rotating Background
Animation, Core Java Script, Slider

Microsite Concept with Rotating Background

Microsite Rotating BackgroundAn animated microsite concept with rotating background made with CSS3, jQuery and GSAP’s TweenMax. A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain. Companies have different reasons for investing in microsites. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story or to inspire a specific call-to-action.Interested in mastering CSS3 like a pro? CSS Master, by Tiffany Brown, is available for download to all SitePoint Premium members. Alternatively, you can grab your copy of the book for just $19.Scaling, skewing a...
Bottender : Make Bots Your Way Fast and Flexible
2019, Core Java Script

Bottender : Make Bots Your Way Fast and Flexible

JQuery BottenderJQuery Bottender is written with ES6/ES7 up syntax and it fully supports async await function. We can deal with complex async logic without losing the readability and maintainability of code.Flexible - Declare handlers as any JavaScript function. Modern - Source written with ES6/ES7 syntax and great async await supports. Modular - Use session stores, server framework adapters and platform connectors with same interface. Learn Once, Write Anywhere - Handle multiple platforms with consistent development experience.Bottender is built on top of Messaging APIs. Installation You can install Bottender globally to use the cli tools:npm install -g bottenderOr install it locally to use it programmatically:npm install bottenderInstallat...
Pagemap : Mini map for web pages
Core Java Script, maps, Menus

Pagemap : Mini map for web pages

Pagemap for web pages a sort of navigation system which uses mini map for single page website or any other lengthy web page with JavaScript and html5 canvas.pagemap, a mini map navigation for web pages Posted by Bramus! August 28, 2019 Leave a comment on pagemapMany text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages:To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } pagemap(document.querySelector('#map'), { viewport: null, styles: { 'header,footer,section,article': rgba...
Framer Motion : Animation & Gesture Library for React
Animation, Core Java Script

Framer Motion : Animation & Gesture Library for React

Framer Motion Framer Motion is a new open source, production-ready motion library for React on the web.Design fluid animations for the web, across desktop and mobile.Motion is an open source, production-ready library that's designed for all creative developers.It looks like this:<motion.div animate={{ x: 0 }} />And does this:Spring physics Keyframes Drag SVG paths Server-side rendering Pose-inspired tree animations CSS variables Position transitions Unmount transitionsFeaturesAnimations When any value in animate changes, the component will automatically animate to the updated target. The default snappy animation is fully configurable via the transition prop.Variants Variants are a declarative way to orchestrate co...
FieldsLinker : Matching files Headers to Database Fields
Core Java Script

FieldsLinker : Matching files Headers to Database Fields

FieldsLinker FieldsLinker Designed for matching files headers to database fields during the process importing. Allows drawing links between elements of 2 lists (headers of the file on the left, column names on the right) and getting back the result in a js object.Given 2 lists : for instance one from a text import, the second listing the fields a db table the jquery plugin allows you to draw and save links between the 2 listsYou can link on a one to one basis or on a one to many basis. Fields can be declared as mandatory the result reporting an error in case there are not filled. FieldsLinker v0.72Allows to link elements of list A to elements of list B and returns the links in a js objectYou can choose beetween an input/output with positions or names Colours can b...
Dragio.js : JavaScript Drag Drop File Upload Library
Core Java Script

Dragio.js : JavaScript Drag Drop File Upload Library

Dragio.js JavaScript Dragio.js is a JavaScript class to work with file upload. Custom responsive forms, progress bars, drag ‘n’ drop function, Ctrl + V paste, image preview etc. Demo of Dragio.js JavaScript  Check out the demo to see it in action (on your mobile or emulate touches on your browser).Features Everything you need in a JavaScript file upload libraryProgress Bar A fully customizable progress bar is included in UI mode. Core users can build their own with the help of a friendly API.Drag and Drop Drag and drop files (and even folders in Chrome and Opera) straight from your desktop.Retry Sometimes the network misbehaves. Fortunately, Fine Uploader can detect these sorts of disturbances and notify the user, or even automatically...
Infinite AJAX Scroll : JavaScript Library
Core Java Script

Infinite AJAX Scroll : JavaScript Library

Infinite AJAX Scroll is a jQuery scrolling plugin. It works by reading the next (and previous) links of your existing server-side pagination and load these pages via AJAX when the visitor scrolls to the end of the page.SEO friendly Doesn’t break browsers back button Highly customizableInstallation Use Infinite Ajax Scroll via CDN Get up and running in no time by linking directly to Infinite Ajax Scroll on unpkg. <script src="https://unpkg.com/@webcreate/infinite-ajax-scroll@3/dist/infinite-ajax-scroll.min.js"></script>Place this code right before the </body> tag on each template or page that you want to use infinite scroll on. Manage as a package Are you using NPM in your projects? You can install and update our package easily.$ npm instal...
EasyStar.js : Javascript A* Pathfinding library for HTML5 games
Core Java Script, games, HTML5

EasyStar.js : Javascript A* Pathfinding library for HTML5 games

EasyStar.js HTML 5 games: EasyStar.js HTML5 games JavaScript A* is an algorithm for finding the shortest path between two points. It is very useful in game development. Any tile-based game that requires this kind of movement will probably […]EasyStar.js HTML 5 games InstallationWeb: Find the minified file in the /bin directory node.js: npm install easystarjs Phaser: see Phaser Plugin Bower: bower install easystarjsDescription easystar.js is an asynchronous A* pathfinding API written in Javascript for use in your HTML5 games and interactive projects. The goal of this project is to make it easy and fast to implement performance conscious pathfinding. Features of EasyStar.js HTML 5 games:Calculates asynchronously for better overall performance Simple AP...
Image Trail Effects with TweenMax & CSS
Animation, Core Java Script, CSS2 / CSS3.0, image effect

Image Trail Effects with TweenMax & CSS

Image TweenMax & CSS & Image Trail EffectsA set of brutalist effects for mouse-following image trails that show a random series of images with tweenmax and css.The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding the images. So we compiled a set of demos that explores different animations. A set of brutalist effects for mouse-following image trails that show a random series of images.Today we’d like to share a fun mouse interaction effect with you that we found on the VLNC Studiowebsite. The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding t...
Smooth Scrolling Image Effects
Animation, Core Java Script, CSS2 / CSS3.0

Smooth Scrolling Image Effects

A small set of ideas on animating images and other elements while smooth scrolling a page. We’ve made a small set of effects that show how you can apply some interesting transforms to elements like images and text while scrolling the page smoothly.Read More | Demo | Download  
JavaScript Image Cropper Plugin
Core Java Script, Zoom

JavaScript Image Cropper Plugin

JavaScript Image Cropper Cropme is a customizable and easy to use javascript image cropper plugin.Features:Two-dimensional translation Scaling Free rotation rotation and scale around the image center or the viewport center Multi-touch support (pinch-zoom, two-finger rotation, …) Base64 and blob exportation Multiple croppersRead More | Download  
abcjs : JavaScript for Rendering Music Notation
Core Java Script, Video & Audio

abcjs : JavaScript for Rendering Music Notation

abcjs is a javascript library for rendering standard music notation in a browser.This library makes it easy to incorporate sheet music into your websites. You can also turn visible ABC text into sheet music on websites that you don’t own using a greasemonkey script, or change your own website that contains ABC text with no other changes than the addition of one javascript file. You can also generate MIDI files or play them directly in your browser.Read More | Demo | Download
PlainDraggable : JavaScript Library to Drag HTML/SVG Element
Core Java Script, Drag & Drop

PlainDraggable : JavaScript Library to Drag HTML/SVG Element

PlainDraggable  is a simple and high performance library to allow HTML/SVG element to be dragged.Features:Accept HTML/SVG element as an element that comes to be draggable. Restrict the draggable area. Snap the draggable element to other elements, points, lines, consecutive points (i.e. grid) or something. Use requestAnimationFrame API, translate and will-change CSS if possible, for high performance.Read More | Demo | Download