Tuesday, July 14FreeJQuery

Animation

Scroll, Refraction and Shader Effects in Three.js and React
2019, Animation

Scroll, Refraction and Shader Effects in Three.js and React

Three.js and React How to use Scroll refraction and shader effects in Three.js and React and add some more techniques to create Three.js layout with shader effects. React In This Article, I will show you how to use a couple of techniques like tying things to the scroll-offset and cast them into re-usable segments. The creation will be our primary core interest. We can also create Gooey Image hover effects with three.js we will use three.js to create efficient gooey texture images that we’ll use to reveal other images when hovering one. Main Features of Three.jsbuild a declarative scroll rig mix HTML and canvas handle async assets and loading screens via React. Suspense add shader effects and tie them to scrollRead More | Download  
w2ui : jQuery UI Library Freejqeury
CSS2 / CSS3.0, Forms, HTML5, jQuery UI, layout, popup windows, Tabs

w2ui : jQuery UI Library Freejqeury

jQuery UI Library The w2ui library is a set of interrelated jQuery plugins. jQuery UI Library is not adhoc port to jQuery but in first developed with jQuery in mind. There is no support of other frameworks such as prototype or dojo. The w2layout object allows you to create stretchable and resizable layouts with up to 6 panels. The panels are top, left, main, preview, right, and bottom. You do not have to create and initialize all 6 panels, but only the panels you need in your application.Out of the box, the w2ui library is an all-in-one solution. It contains all the most common UI widgets: Layout, Grid, Sidebar, Tabs, Toolbar, Popup, Field Controls and Forms. You do not need to put together a collection of mismatched plugins to accomplish your goals. This Contains layout, popups, tab...
Display Your Most Favorite Music & Last.fm Using FreejQuery
Animation, plugin, Video & Audio

Display Your Most Favorite Music & Last.fm Using FreejQuery

Do you want to highlight your favorite music & last.FM using free jquery? You're at right place here you can sort your items in a super amazing way just follow some steps & see magic ;)Follow these 3 simple stepsClick on Option 'Demo" Install Display or Last.Fm Enjoy For FreeAfter following these steps you'll see a plugin which is installed on your website this plugin helps to fetch the information from the Last.FM website.Read More | Demo -----------------------
Responsive & Touch-Friendly Audio Player FreejQuery
CSS2 / CSS3.0, HTML5, Responsive, Video & Audio

Responsive & Touch-Friendly Audio Player FreejQuery

 A jQuery audio player plugin that is responsive and touch-friendly. The UI is CSS-only, no images used. The jQuery plugin itself would be pretty much useless without the respective CSS which is responsible for the looks and some of the features summarized below. The plugin replaces targeted audio elements with some HTML and JavaScript events attached to it.Don’t confuse this player with the whole media center like iTunes or so. It is nothing like that. This is a tiny, lightweight player with a very clear purpose: to play a single audio file. I have built it having this credo in mind: “don’t solve problems that do not exist”. You don’t need complex plugins or ugly Flash players with thousands of useless functions to play that damn audio file. Be innovative, be subtle....
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...
Angular directive for Slick Carousel
AngularJS, Carousel, Plugins

Angular directive for Slick Carousel

Directive for Slick CarouselAn Angular directive for slick carousel, which is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! Usage for Slick CarouselUsing bower to install it. bower install angular-slick-carousel Add jquery, angular, slick-carousel and angular-slick-carousel to your code.<link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css"> <link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick-theme.css"><script src="../bower_components/jquery/jquery.js"></script> <script src="../bower_components/angular/angular.js"></script> <script src="../bower_components/slick-caro...
Angular Hamburger Menu Toggle
AngularJS, Animation, Menu & Navigation, Plugins

Angular Hamburger Menu Toggle

Angular Hamburger Toggle Angular hamburger Toggle menu is component which allow you to active a part of information or navigation that is hidden by default for UX purpose.This usually means activating a SideNav, but might also roll down a Navbar menu.Examples of Bootstrap hamburger menu use:SideNav activation Navbar menuFeatures:Two way bound state model. Tuned for Bootstrap. Super easy.Angular directive of Material Design morphing hamburger menu. It's based off of Material Design Hamburger.###FeaturesTwo way bound state model. Tuned for Bootstrap. Super easy.How to style hamburger icon? In my code example, I’m using class= “navbar-inverse” in line 1 of nav.component.html. And this means the hamburger icon is designed to be use...
GIMP open source image editor
2019, Animation, Images

GIMP open source image editor

GIMP image editor:Glimpse is a fork of the popular open-source gimp image editor, GIMP, created primarily to offer the software under an alternative name.GIMP is a longstanding project, first announced in November 1995. The name was originally an acronym for General Image Manipulation Program but this was changed to GNU Image Manipulation Program.The new fork springs from a discussion on Gitlab, where the source code is hosted. The discussion has been hidden but is available on web archives here. A topic titled "Consider renaming GIMP to a less offensive name," opened by developer Christopher Davis, stated:Others opined that changing the name of long-established software would hurt its recognition and usage. The discussion became bad-tempered and caught the attention of...
ReactJs: Best JavaScript Frameworks 2019
Core Java Script, CSS, CSS2 / CSS3.0, JavaScript, jQuery

ReactJs: Best JavaScript Frameworks 2019

ReactJs JavaScript Frameworks ReactJs JavaScript Frameworks basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications.  It's used for handling view layer for web and mobile apps. Before you start to use this library you've to get good knowledge about the HTML, JavaScript, CSS & DOM (Document Object Model)Also Check Query's Contains JavaScriptReact Js Getting Started React Directly in HTML The easiest way start learning React is expressed belowStart by including three scripts, the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.Example of ReactJs JavaScript Frameworks Adding three CDN's in your HTML file: &...
JavaScript library to Split an element by Words & Characters : Splitting.js
Animation, Core Java Script, Text Effects

JavaScript library to Split an element by Words & Characters : Splitting.js

Splitting.js Splitting.js is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!Some of the splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.Basic Usage of Splitting.js Splitting can be called without parameters, automatically splitting all elements with data-splitting attributes by the default of chars which wraps the element's text in <span>s with relevant CSS vars.Splitting is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off)The Splitting library doe...
Diagonal Slideshow with JavaScript & CSS
Animation, Core Java Script, CSS2 / CSS3.0, Slider

Diagonal Slideshow with JavaScript & CSS

Diagonal Slideshow with JavaScript & CSSA Diagonal Slideshow look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. There's another slideshow which will surely impress you,  This time we have a diagonal type of look where the current slide is in the center of the page and the previous and next images can be seen laterally, one in the top left corner and one in the bottom right corner of the page.Also Check: Design & AnimationsAfter open, the content preview looks like this.Here you can enjoy this flashing series of diagnonal slideshow,...
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...
5+ Responsive Calculators For the Basic Financial Websites
Application, Bootstrap, Browser, CSS2 / CSS3.0, CSS2 / CSS3.0, Responsive

5+ Responsive Calculators For the Basic Financial Websites

Calculators For the Basic Financial Websites:There are thousand of online calculators to calculate million of sums easily, but teh thing which is usually notable is teh Interface & look of a Calculator. Everyone is seeking an calculator wif best interface to use and calculate easily. If You're running a financial site which is related wif bonds, Pricing, charts, & sums so you must try these calculators for you're website.Things You May Know:Teh original compact calculator was teh abacus, developed in China in teh ninth century. Teh young French mathematician Blaise Pascal (1623-1662) invented teh first adding machine in 1642, a clever device driven by gears and capable of performing mechanical addition and subtraction.  Visual Type Scale Calculat...
Pinto.js : jQuery Grid Layout Plugin
CSS2 / CSS3.0, Gallery, Plugins, Responsive

Pinto.js : jQuery Grid Layout Plugin

Pinto.js is a lightweight and customizable jQuery plugin for creating pinterest like responsive grid layout. Pinto.js is intended for easy use and is fully deployable within minutes. The minified version is under 1KB. This plugin is very accessible & easy to use.(the minified version is under 1KB) autosize supportfluid item width animation (CSS3 transition)Pinto is an extremely lightweight jQuery plugin which allows you to dynamically arrange your images in a Pinterest-like responsive, fluid grid layout.Features of Pinto.js jQuery Grid Layout:Super simple and lightweight. Auto rearrange images with a smooth CSS3 transition on window resize. Fluid item width based on the viewport size. lightweight (the minified version is under 1KB) autosize support fl...
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...
AngularJS Animation DSL
Animation

AngularJS Animation DSL

Creation of AngularJS Animation DSL to build sophisticated UX transitions using animation timelines.Teh goal is teh development of a next-generation Animation layer for AngularJS wif functionality and power to easily develop complex, rich user experiences. A new Animation Timeline API and a easy-to-use DSL will be derived based on experiments and explorations of real-world animation design samples; samples wif UX as those as demonstrated in Material Design and teh Polymer Topeka Quiz application.Dependencies of AngularJS Animation DSL Teh animation functionality is provided by AngularJS in teh ngAnimate module, which is distributed separately from teh core AngularJS framework.{ "name": "angular-phonecat", ... "dependencies": { "angular": "1.7.x", "angular-...
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  
Interactive 3D Carousel with AngularJs
Carousel, Plugins

Interactive 3D Carousel with AngularJs

An angular.js directive for a customizable, interactive 3D carousel.Features:Will always land exactly on one side. Uses request Animation Frame for a smooth animation. Dynamically add or remove sides.Read More | Demo | Download