Fullscreen Hover Loop Effect with CSS & TweenMax

Fullscreen Hover Loop Effect with CSS & TweenMax

Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.

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

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

Splitting.js is a JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!

Most 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.

JointJS – JavaScript Diagramming Library

JointJS - JavaScript Diagramming Library

JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders.Rappid is a diagramming framework for advanced applications, delivering the best of HTML 5 + SVG and providing you with the right tools to build outstanding products.

Features:

  • basic diagram elements (rect, circle, ellipse, text, image, path)
  • ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, …)
  • custom diagram elements based on SVG or programmatically rendered
  • interactive elements and links
  • connecting diagram elements with links
  • customizable links, their arrowheads and labels
  • links smoothing (bezier interpolation)
  • magnets (link connection points) can be placed basically anywhere
  • hierarchical diagrams
  • serialization/deserialization to/from JSON format
  • highly event driven – you can react on any event that happens inside the paper
  • zoom in/out
  • touch support

Grid Layout with Scrollable Content View

Grid Layout with Scrollable Content View

Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.

Glider 3D Photo Slider

Glider 3D Photo Slider

Glider – is a simple slider script that automatically animates layers of still imagery for creating illusion of 3D. It pans and zooms photo in any direction to achieve Ken Burns 3D effect.

Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

Today we’d like to share a simple fullscreen menu with you. The menu layout is powered by CSS Grid and we make its boxes appear with a reveal animation. The animations are made using TweenMax.

Beer Slider : Responsive & Accessible Before-After Slider

Beer Slider : Responsive & Accessible Before-After Slider

Beer slider is a vanilla JS keyboard accessible plugin for any before-after comparison.

It’s basic purpose is to compare two versions of an image, for example the same object shot in two different moments, a pre-edited photo and its processed version, a sketch and the finished illustration, etc.

It can be particularly useful with photo presets (Lightroom presets, Photoshop actions, etc.).

Chance.js : Random generator helper for JavaScript

Chance.js : Random generator helper for JavaScript

Chance.js is a random generator helper for JavaScript.Chance is a minimalist generator of random [1] strings, numbers, etc. to help reduce some monotony particularly while writing automated tests or anywhere else you need anything random.

Chance is open source software and is released under the developer and business-friendly MIT License

ckin : HTML5 Video Player using Javascript

ckin : HTML5 Video Player using Javascript

ckin is a opensource lightweight HTML5 Video Player using Javascript (No jQuery).

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer is a beautiful and clean WEB Music Player by HTML5.

Features:

  • Lyrics display
  • Playlists
  • Three play modes, Single cycle, list loop, random play
  • Designed for touch devices
  • Modular Customizable
  • Media Session Support