An interactive bar graph packed with animations and information. Built with CSS and jQuery.
We’re using the power of flexbox to position a lot of elements, especially when it comes to vertically centering them. No matter how many times I use align-items: center the feeling never gets old. To store the values of the height of each bar we’re using a sass map, which is basically an array of values. Then we use an @each loop to iterate over this map and assign each value to the height property of Various elements are also hidden using CSS transforms and revealed by adding a class with jQuery.
When the document loads we add classes to the hidden elements to reveal them. To see what elements and classes are added checkout the entrance function. A click event is binded to the bars and when they are clicked the overlay is activated by adding a class to modify its CSS transforms. We also have our data stored in JSON format for easy access and organization. We update the .text() of each part of the overlay by capturing the bars .index() value on click, then using that value to talk to the corresponding object in the array of data.
Today we’d like to show you how to create a fun little morphing button effect. In this tutorial we’ll create a Shazam-like UI where we initially have a simple button that, when clicked, morphs into a listening button. We’ll animate some musical notes that fly from outside of the viewport to the listening button to indicate listening activity. Finally, the listening button will transform into a music player with album info of the “identified” song.
Note that we’ll not implement a music listening app but only the UI effects around the morphing button.
SketchMini Multipurpose Responsive WordPress Theme for Free
Sketchmini is Multipurpose Responsive WordPress Theme for Free. It suits best to every Business. Being responsive, it makes site look attractive across multiple screen sizes. Designed to use with a GPL, SketchMini Free WordPress theme has got great features and awesome back end to enable full use of the available features in the theme. SketchMini can act as a great base theme to create any great website.
No matter through which browser your site is logged on, this Free WordPress Theme is compatible across all major browsers. Our Excellent Theme guides hold crystal clear description, which helps you in setting up the theme very easily. You also don’t need to worry about the support from our end. We have expert developers, designers etc. from the industry and fully dedicated support team to help you with the theme usage. There are ten page templates in the theme that help user to get the site ready in short span of time.
lightGallery is a lightweight, elegant, responsive, mobile-friendly jQuery plugin for displaying an image/video gallery in a fullscreen lightbox with CSS3 transition effects.
2 transition animations: slide or fade.
Auto play when images loaded.
Supports youtube & vimeo videos, not just images.
Touch swipe support.
Image captions & descriptions support.
Arrows, thumbnails and keyboard navigation.
Cross browser. Supports all major browsers.
Easing options support.
Multiple instances on one page.