Service Card Animation

Developer
Saysora
Size
3,567 Kb
Views
30,360
  1. Service Card Animation Previews
  2. Service Card Animation HTML Codes
  3. Service Card Animation CSS Codes
  4. Service Card Animation JS Codes

How do I make an service card animation?

Just wanted to do some testing of animations for an interactive state for a project I'm working on. Thanks everybody who I figured these techniques from, and google for some sick box-shadow codes.. What is a service card animation? How do you make a service card animation? This script and codes were developed by Saysora on 26 August 2022, Friday.

Service Card Animation Previews
IQ Test

Service Card Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Service Card Animation</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hold"> <div class="card"> <h3 class="title">Sunday</h3> <div class="details"> <div class="time">7:30AM</div> <div class="services"> <span class="bubble"><span>C</span></span> <span class="bubble"><span>J</span></span> <span class="bubble"><span>H</span></span> </div> <div class="place">Main Sanctuary</div> </div> <div class="details"> <div class="time">9:30AM</div> <div class="services"> <span class="bubble"><span>C</span></span> <span class="bubble"><span>J</span></span> <span class="bubble"><span>H</span></span> </div> <div class="place">Main Sanctuary</div> </div> <div class="details"> <div class="time">11:30AM</div> <div class="services"> <span class="bubble"><span>C</span></span> <span class="bubble"><span>J</span></span> <span class="bubble"><span>H</span></span> </div> <div class="place">Main Sanctuary</div> </div> <div class="extra"> <div class="button">More Info</div> <div class="button">Child Care</div> <div class="button">Other Services</div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Service Card Animation - Script Codes CSS Codes

body { font-family: "Helvetica";
}
.hold { width: 960px; margin-left: auto; margin-right: auto; margin-top: 50px;
}
.card { box-sizing: border-box; cursor: pointer; width: 200px; height: 320px; margin-left: auto; margin-right: auto; padding: 10px; background: #333; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); overflow: hidden; transition: box-shadow .1s linear,background .1s linear;
}
.card .title { text-transform: uppercase; text-align: center; font-weight: 400; font-size: 1.5em;
}
.card .title:after { content: " "; display: block; width: 90%; border-bottom: 1px solid #fff; margin-top: 15px; margin-bottom: 15px; margin-left: auto; margin-right: auto;
}
.card:hover { background: #353535; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.card.active { background: #49a1d2; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); cursor: auto;
}
.details { overflow: hidden; margin-top: 15px; margin-bottom: 15px;
}
.details .time { float: left; margin-top: 3.5px;
}
.details .services { float: right;
}
.details .services .bubble { display: inline-block; width: 18px; height: 18px; background: #49a1d2; border-radius: 50px; text-align: center; font-size: .8em; margin: 0 5px;
}
.details .services .bubble span { vertical-align: middle;
}
.details .place { clear: both; padding-top: 5px; font-size: .9em; font-weight: 100; color: #49a1d2; text-transform: uppercase;
}
.extra { display: none;
}
.button { text-align: center; padding: 5px; border: 1px solid #fff; color: #333; background: #fff; margin-top: 5px; margin-bottom: 15px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: box-shadow .1s linear;
}
.button:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

Service Card Animation - Script Codes JS Codes

/*
// Service Card Animation
/// Just wanted to do some testing of animations for an interactive state for a project I'm working on. Thanks everybody who I figured these techniques from, and google for some sick box-shadow codes.
*/
var active;
$('.card').click(function(){ active = !active; if(active) { $(this).addClass('active'); $(this).find('.details').fadeOut('fast'); $(this).find('.extra').delay(250).fadeIn(); } else { if($(this).find('.details').is(':hidden')) { $(this).find('.extra').fadeOut('fast'); $(this).find('.details').delay(250).fadeIn('slow'); $(this).removeClass('active'); } }
});
function fadeExtra(test) { $(test).find('.extra').fadeIn();
}
Service Card Animation - Script Codes
Service Card Animation - Script Codes
Home Page Home
Developer Saysora
Username azureknight
Uploaded August 26, 2022
Rating 3
Size 3,567 Kb
Views 30,360
Do you need developer help for Service Card Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Saysora (azureknight) Script Codes
Name
Simple Loading Bar
Clean Card Layout
Responsive Background
Food Roulette
Info Cards
Ralph Lauren Mimic
Grow Circle Animation
Legend of Zelda - Triforce
Landscape Animation
Flat Ui Rollover Buttons
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!