Thursday, October 22FreeJQuery

Tag: Animation

Creative Image Transitions WebGL
Images

Creative Image Transitions WebGL

Make WebGL Image Transitions This Article is all about WebGL (Web Graphics Library) and image Transitions now we are discussing some colorful and interesting images that reveal the possibilities of WebGL. WebGL is a JavaScript API that used to make interactive 2D and 3D graphics for any compatible web browser. Who Developed WebGL: An American software engineer named "Vladimir Vukicevic" developed WebGL In March 2011, Kronos Group was created WebGL it is a new standard for 3D graphics on the web it is a JavaScript API that can be used with HTML5. It allows internet browsers to access Graphic Processing Units (GPUs) on every machine where they were used. Browsers Supported there are some popular web browsers which are supported WebGL:Browser NameGoogle Chrome Internet Explo...
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...
Countit : Text Analyzer With Angular Material
2019, AngularJS, Forms

Countit : Text Analyzer With Angular Material

Countit Text Analyzer This is a fast Countit Text Analyzer app built using Angular Material.Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars.Fork and Run Install Angular-CLI npm install -g @angular/clicd into project, npm installRun ng serve , navigate to localhost:4200 Build Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build. Text Analyzer Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars. Clicking on a word will display more details. To see an example, click "Try Me!".For More Amazing Content Click Read More | Demo | Download
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...
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...
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  
Angular Circle Countdown Directive
Animation, Plugins

Angular Circle Countdown Directive

An AngularJS directive to render a stylish circular countdown clock in your application.angular-countdown provides two interface.A CountdownTimer service which you'll typically inject into your controllers to create new timers A <countdown> directive which consumes the CountdownTimer instances you'll createRead More | Demo | Download  
ngx-trend : Simple, elegant Spark lines for Angular
Animation, Chart & Graph, Plugins

ngx-trend : Simple, elegant Spark lines for Angular

Angular ngx-trend is a simple, elegant trend graphs for Angular.Features:Simple. Integrate in seconds. Scalable. Uses SVG for sharp, scalable graphs. Will fill the parent container, or you can provide a fixed size. Beautiful. Built-in gradient support, and customizable smoothing. Animatable. Support for on-mount animations where the trend graph draws from left to right.Read More | Demo | Download  
Flippy : AngularJS CSS3 Flip Animation Directive
Animation, Plugins

Flippy : AngularJS CSS3 Flip Animation Directive

Angular JS directive implementation with a CSS3 flip animation.AngularJS directive implementation with a CSS3 flip animation.With v2.0 you'll find more customization within the directive itself. You are free to hook into any events like ng-click to fire the flip event.Read More | Demo | Download  
TURNBOX.js : jQuery 3D Turn Animation jQuery Plugin
Uncategorized

TURNBOX.js : jQuery 3D Turn Animation jQuery Plugin

TURNBOX.js is a jQuery plugin for flat design UI to perform 3D animation. Very simple & easy plugin, user can easy access, try it & magic.Features: Multiple Options & Forms. Colorful Login & Contact Forms. Animations Are Active. Easy & Simple. 3D & UI Perform.    Read More | Demo | Download -----------------------