šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL
  1. Home
  2. jQuery Plugins
  3. Showing Image With Bounce Effect in jQuery & CSS3

Showing Image With Bounce Effect in jQuery & CSS3

There are many example out there that using CSS3 transform and animation for enhancing the webpage and today Iā€™m going to share one of them. Using CSS3 transform and animation we will create a bouncing effect when an item (in this case image) is showing or added to our webpage.We will have an image list positioned on the bottom of the page wrapped by a single div, it will be opened by clicking a plus sign. If one of these image is clicked it will be showed on the middle of the page with bouncing, if other image clicked it also be showed next to previous showed image.To have a bouncing effect is a little bit tricky, we can use transform with playing scale value and helped by animation keyframes. Bouncing like zooming in and zooming out with different scale in some interval, for our bounce effect, the image will be showed bigger than its original size then scaling to smaller, bigger but smaller than the first and back to original size.

CSS Gallery
Demo Tutorial

You May Also Like

jQuery Mobile Toggle Menu With CSS3 Media Queries - Biggie

Cool jQuery Slider Plugin with CSS3 Animations - Wiper

jQuery Plugin For Sakura Petals Falling Animation - Sakura

jQuery Plugin For Image Hover Transition Effect - hoverTransition

Simple jQuery Vertical Accordion with CSS3 Transitions

Basic jQuery Content Rotator Plugin - Rotation.js

Simple 3D Flipping Cube Slideshow with jQuery and CSS3 - BoxRoll Slider

jQuery Plugin To Reveal Hidden Content with CSS3 Transitions - Menumucil

Simple Clean jQuery & CSS3 Carousel Slider Plugin - CSS Slider

Flexible & Mobile-first Slider with CSS3 Transitions - Wallop Slider

Fullscreen jQuery Image Scroller with CSS3 Transitions - Assisted Scroll

Simple Clean jQuery & CSS3 Based Tooltip Plugin - Pop

Retina Ready jQuery Color Picker with CSS3 Gradients - Iris

Minimal Responsive Content Slider with jQuery and CSS3 - Stupid Slider

jQuery Cover Flow-Like List Animation Plugin - skywheel

Simple Multi-Item Slider with CSS Animation - ItemSlider

Create Custom Rotate Animations with jQuery and CSS3

Fancy Scroll Animations with jQuery and Animate.css - byscroll

Responsive Content Slider Plugin with jQuery and Animate.css

jQuery Plugin For On-Scroll Animations using Animate.css - Animated

jQuery Plugin For Manipulating Animate.CSS Based Animations - animakWix

Animate Html Elements with jQuery and animate.css - Animate-Plus.js

jQuery Plugin To Apply Animate.css Animations To Elements On Scroll - Animated

jQuery Plugin For Form Validation Animations Using Animate.css

Minimal Text Carousel Plugin With JQuery and Animate.css - Slogan Roulette

jQuery Plugin For Magical Scroll Animations Using CSS3 - scroll-animate

Simple Animated Timeline Plugin For jQuery - Timelify

jQuery Plugin To Handle Animate.css Powered CSS3 Animations

jQuery Plugin For Custom CSS3 Powered Animations - k-animation

Responsive & Flexible jQuery Lightbox Plugin - Nivo Lightbox

jQuery Plugin To Handle Animate.css Powered CSS3 Animations - aniAuto

Apply CSS Animations To Elements On Scroll - jQuery Toanimate.js

Smooth Animated Numbers with Javascript and CSS3 - odometer

Minimal jQuery Plugin To Control Animate.css Animations - Animator

jQuery Plugin To Apply Animate.css Animations On Page Load - anim-js

Enable Animations When Content Comes Into View - jQuery scroll-animate.js

Controlling CSS3 Animations With jQuery - Animate.js

jQuery Plugin To Manage Animate.css Based Animations - animate.css.js

jQuery Plugin For Configurable Animate.css Powered Animations - animateCSS

jQuery Animated DOM Elements with CSS3 Transitions - CSSAnimate

Create Custom Hover Effects On Images - jQuery picBeautifier-3000

gips - Beautiful and Clean Tooltip Plugin

Reveal Elements With CSS3 Animations When Scrolling - jQuery Revealer

Powerful & Interactive Tooltip Plugin with jQuery - Protip

Animate Element Into View Using CSS3 Animations - jQuery anisview.js

xBreadcrumbs jQuery Plugins with Demo

Thumbnails Preview Slider with jQuery

B&W Box jQuery Gallery with Demo

Cool jQuery animation effect gallery with Demo

Create A Organic Tabbed Interface Using jQuery with Demo

Create a Slick Tabbed Content Area using CSS & jQuery with Demo

Sexy Drop Down Menu with jQuery & CSS

Sweet Thumbnails Preview jQuery Gallery with Demo

Perfect signin dropdown box likes Twitter with jQuery

jQuery Tiny Carousel with Demo

Simple Toggle with CSS & jQuery

AviaSlider jQuery slideshow Plugin with Demo

Style-my-tooltips jQuery plugin with Demo

Contactable ā€“ A jQuery Plugin with Demo

Fancy jQuery Sliding Form with Demo

jQuery Moving Tab and Sliding Content Tutorial with Demo

Client Testimonials Powered by PHP, XML and jQuery with Demo

jQuery Typing Game with Demo

Neat Photo Hover Effect with CSS Sprites and jQuery

Simple jQuery Flickr Style Tooltip Menu with Demo

Facebook Style Loading Bar Using CSS and jQuery

jQuery Expand Stacked Images Using Slider with Demo

How To Create a Cool Animated Menu with jQuery

Digg Like URL Submitter Using jQuery and PHP with Demo

How to Make Auto-Advancing Slideshows with jQuery & HTML5

jQuery Plugins

AngularJs Plugins