Archive for 2018

    Carousel with Image Zoom Effect

    Carousel with Image Zoom Effect

    A dead simple Javascript carousel script for cycling through a group of items ( images and content ) with a dot indicator and the arrows.Our “carousel with image zoom effect” comes with simple zoom-in effect for the images, one simple effect for the headlines and clear design which follows all that cool effects. This carousel was built with anime.js.

    Yall.js : Fast, Flexible and Tiny Image Lazy Loader

    Yall.js : Fast, Flexible and Tiny Image Lazy Loader

    yall.js is a featured-packed lazy loading script for <img><picture><video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scrolltouchmoveresize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

    Animated Grid Previews with CSS & TweenMax

    Animated Grid Previews with CSS & TweenMax

    Today we’d like to share another CSS grid-powered template with you. The idea is to show a navigation and some scattered images in the background that have a slight parallax effect. Once the “explore” link is clicked, the seemingly randomly placed items animate to their final position in a grid. Each grid has its own unique layout. Once the animation is done, the whole thing becomes scrollable and a content area shows beneath the grid.The animations are powered by TweenMax.

    Slide Out Navigation with CSS & TweenMax

    Slide Out Navigation with CSS & TweenMax

    A details navigation with a box that slides out from the bottom left of the page and simple animation for menu items, that follows the first one.

    Circular Slider with Anime.js

    Circular Slider with Anime.js

    The circular carousel/slider was built to provide web developers creative alternative to all those standard carousels/sliders. It was built with javascript animation engine anime.js.

    NAVX : Ultimate Navigation Plugin

    NAVX : Ultimate Navigation Plugin

    NAVX is ready to run on the most diverse devices, from mobile devices to tablets and desktops.A highly adaptable component.

    ScrollOut : Detects Changes in Scroll

    ScrollOut : Detects Changes in Scroll

    ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Use JavaScript callbacks, CSS selectors, or CSS Variables to animate elements in and out. You can even create sticky headers.

    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