CentraTech Solutions 138 S Main St, Greensburg, PA 15601 (724) 600-0808

Cool CSS/JQuery Effects

Greyscale to Color Fade on Hover

fade on hover example image
						
							
								<div class="item"> 
									<div class="img_wrapper" style="display: inline-block; width: 296px; height: 170px;">
										<img src="/img/demo.jpg">
									</div>
								</div>
													
					
						
							
								// On window load. This waits until images have loaded which is essential
								$(window).load(function(){
									// Fade in images so there is not a color "pop" document load and then on window load
									$(".item img").fadeIn(500);
									
									// clone image
									$(".item img").each(function(){
										var el = $(this);
										el.css({"position":"absolute"}).wrap("<div class=img_wrapper style=display: inline-block>").clone().addClass("img_grayscale").css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
											var el = $(this);
											el.parent().css({"width":this.width,"height":this.height});
											el.dequeue();
										});
										this.src = grayscale(this.src);
									});
									
									// Fade image 
									$(".item img").mouseover(function(){
										$(this).parent().find("img:first").stop().animate({opacity:1}, 1000);
									})
									$(".img_grayscale").mouseout(function(){
										$(this).stop().animate({opacity:0}, 1000);
									});		
								});
								
								// Grayscale w canvas method
								function grayscale(src){
									var canvas = document.createElement("canvas");
									var ctx = canvas.getContext("2d");
									var imgObj = new Image();
									imgObj.src = src;
									canvas.width = imgObj.width;
									canvas.height = imgObj.height; 
									ctx.drawImage(imgObj, 0, 0); 
									var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
									for(var y = 0; y < imgPixels.height; y++){
										for(var x = 0; x < imgPixels.width; x++){
											var i = (y * 4) * imgPixels.width + x * 4;
											var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
											imgPixels.data[i] = avg; 
											imgPixels.data[i + 1] = avg; 
											imgPixels.data[i + 2] = avg;
										}
									}
									ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
									return canvas.toDataURL();
								}
													
					

CSS Animation Effects - https://github.com/daneden/animate.css

Click to see the animation...

bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInX

flipInY

flipOutX

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

						
							
								<p class="animation-demo" data-effect="bounce">bounce</p>
								<p class="animation-demo" data-effect="flash">flash</p>
								<p class="animation-demo" data-effect="pulse">pulse</p>
								<p class="animation-demo" data-effect="rubberBand">rubberBand</p>
								<p class="animation-demo" data-effect="shake">shake</p>
								<p class="animation-demo" data-effect="headShake">headShake</p>
								<p class="animation-demo" data-effect="swing">swing</p>
								<p class="animation-demo" data-effect="tada">tada</p>
								<p class="animation-demo" data-effect="wobble">wobble</p>
								<p class="animation-demo" data-effect="jello">jello</p>
								<p class="animation-demo" data-effect="bounceIn">bounceIn</p>
								<p class="animation-demo" data-effect="bounceInDown">bounceInDown</p>
								<p class="animation-demo" data-effect="bounceInLeft">bounceInLeft</p>
								<p class="animation-demo" data-effect="bounceInRight">bounceInRight</p>
								<p class="animation-demo" data-effect="bounceInUp">bounceInUp</p>
								<p class="animation-demo" data-effect="bounceOut">bounceOut</p>
								<p class="animation-demo" data-effect="bounceOutDown">bounceOutDown</p>
								<p class="animation-demo" data-effect="bounceOutLeft">bounceOutLeft</p>
								<p class="animation-demo" data-effect="bounceOutRight">bounceOutRight</p>
								<p class="animation-demo" data-effect="bounceOutUp">bounceOutUp</p>
								<p class="animation-demo" data-effect="fadeIn">fadeIn</p>
								<p class="animation-demo" data-effect="fadeInDownBig">fadeInDownBig</p>
								<p class="animation-demo" data-effect="fadeInLeft">fadeInLeft</p>
								<p class="animation-demo" data-effect="fadeInLeftBig">fadeInLeftBig</p>
								<p class="animation-demo" data-effect="fadeInRight">fadeInRight</p>
								<p class="animation-demo" data-effect="fadeInRightBig">fadeInRightBig</p>
								<p class="animation-demo" data-effect="fadeInUp">fadeInUp</p>
								<p class="animation-demo" data-effect="fadeInUpBig">fadeInUpBig</p>
								<p class="animation-demo" data-effect="fadeOut">fadeOut</p>
								<p class="animation-demo" data-effect="fadeOutDown">fadeOutDown</p>
								<p class="animation-demo" data-effect="fadeOutDownBig">fadeOutDownBig</p>
								<p class="animation-demo" data-effect="fadeOutLeft">fadeOutLeft</p>
								<p class="animation-demo" data-effect="fadeOutLeftBig">fadeOutLeftBig</p>
								<p class="animation-demo" data-effect="fadeOutRight">fadeOutRight</p>
								<p class="animation-demo" data-effect="fadeOutRightBig">fadeOutRightBig</p>
								<p class="animation-demo" data-effect="fadeOutUp">fadeOutUp</p>
								<p class="animation-demo" data-effect="fadeOutUpBig">fadeOutUpBig</p>
								<p class="animation-demo" data-effect="flipInX">flipInX</p>
								<p class="animation-demo" data-effect="flipInY">flipInY</p>
								<p class="animation-demo" data-effect="flipOutX">flipOutX</p>
								<p class="animation-demo" data-effect="lightSpeedIn">lightSpeedIn</p>
								<p class="animation-demo" data-effect="lightSpeedOut">lightSpeedOut</p>
								<p class="animation-demo" data-effect="rotateIn">rotateIn</p>
								<p class="animation-demo" data-effect="rotateInDownLeft">rotateInDownLeft</p>
								<p class="animation-demo" data-effect="rotateInDownRight">rotateInDownRight</p>
								<p class="animation-demo" data-effect="rotateInUpLeft">rotateInUpLeft</p>
								<p class="animation-demo" data-effect="rotateInUpRight">rotateInUpRight</p>
								<p class="animation-demo" data-effect="rotateOut">rotateOut</p>
								<p class="animation-demo" data-effect="rotateOutDownLeft">rotateOutDownLeft</p>
								<p class="animation-demo" data-effect="rotateOutDownRight">rotateOutDownRight</p>
								<p class="animation-demo" data-effect="rotateOutUpLeft">rotateOutUpLeft</p>
								<p class="animation-demo" data-effect="rotateOutUpRight">rotateOutUpRight</p>
								<p class="animation-demo" data-effect="hinge">hinge</p>
								<p class="animation-demo" data-effect="rollIn">rollIn</p>
								<p class="animation-demo" data-effect="rollOut">rollOut</p>
								<p class="animation-demo" data-effect="zoomIn">zoomIn</p>
								<p class="animation-demo" data-effect="zoomInDown">zoomInDown</p>
								<p class="animation-demo" data-effect="zoomInLeft">zoomInLeft</p>
								<p class="animation-demo" data-effect="zoomInRight">zoomInRight</p>
								<p class="animation-demo" data-effect="zoomInUp">zoomInUp</p>
								<p class="animation-demo" data-effect="zoomOut">zoomOut</p>
								<p class="animation-demo" data-effect="zoomOutDown">zoomOutDown</p>
								<p class="animation-demo" data-effect="zoomOutLeft">zoomOutLeft</p>
								<p class="animation-demo" data-effect="zoomOutRight">zoomOutRight</p>
								<p class="animation-demo" data-effect="zoomOutUp">zoomOutUp</p>
								<p class="animation-demo" data-effect="slideInDown">slideInDown</p>
								<p class="animation-demo" data-effect="slideInLeft">slideInLeft</p>
								<p class="animation-demo" data-effect="slideInRight">slideInRight</p>
								<p class="animation-demo" data-effect="slideInUp">slideInUp</p>
								<p class="animation-demo" data-effect="slideOutDown">slideOutDown</p>
								<p class="animation-demo" data-effect="slideOutLeft">slideOutLeft</p>
								<p class="animation-demo" data-effect="slideOutRight">slideOutRight</p>	
								<p class="animation-demo" data-effect="slideOutUp">slideOutUp</p>
													
					
						
							
								$.fn.extend({
									animateCss: function (animationName) {
										var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
										this.addClass("animated " + animationName).one(animationEnd, function() {
											$(this).removeClass("animated " + animationName);
										});
									}
								});
								
								$(document).ready(function(){
									$(document).on("click", ".animation-demo", function(){
										var effect = $(this).data("effect");
										$(this).animateCss(effect);
									});
								});
													
					

jQuery Flip - https://nnattawat.github.io/flip/

Front
Back
Front
Back
Front
Back
						
							
								<div class="card">
									<div class="front"> 
										Front
									</div> 
									<div class="back">
										Back
									</div> 
								</div>
								<div class="card">
									<div class="front"> 
										Front
									</div> 
									<div class="back">
										Back
									</div> 
								</div>
								<div class="card">
									<div class="front"> 
										Front
									</div> 
									<div class="back">
										Back
									</div> 
								</div>
													
					
						
							
								.card{
									width: 100px;
									height: 100px;
									margin: 20px;
									display: inline-block;
								}
								.card .front{
									text-align: center;
									border: 1px #333 solid;
									padding: 10px;
									background-color: #eee;
									-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);
									-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);
									box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);
								}
								.card .back{
									text-align: center;
									border: 1px #333 solid;
									padding: 10px;
									background-color: #333;
									color: #fff;
									-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);
									-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);
									box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);
								}
													
					
						
							
								<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
								
								$(".card").flip({
									axis: "x",
									trigger: "hover",
									reverse: true
								});
													
					


track cursor demo 1
track cursor demo 2
track cursor demo 3
track cursor demo 4

Contact Us

CentraTech Solutions


138 South Main St
Greensburg, PA 15601
(724) 600-0808
info@centratechsolutions.com

Hours of Operation:


Monday-Friday: 10:00a-7:00p
Saturday: 10:00a-5:00p
BESbswy