QuickFlip

Developer
Boyd Massie
Size
2,109 Kb
Views
16,192
  1. QuickFlip Previews
  2. QuickFlip HTML Codes
  3. QuickFlip CSS Codes
  4. QuickFlip JS Codes

How do I make an quickflip?

JavaScript function to flip between two pieces of information, or perhaps to be used with 2 images (banner ads). http://jonraasch.com/blog/quickflip-2-jquery-plugin. What is a quickflip? How do you make a quickflip? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

QuickFlip Previews
IQ Test

QuickFlip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>QuickFlip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.pack.js" ></script>
<script src="http://dev.jonraasch.com/quickflip/examples/js/jquery.quickflip.min.js" type="text/javascript"></script>
<div class="quickFlip"> <div class="blackPanel"> <h3 class="first quickFlipCta">jQuery QuickFlip</h3> <p class="panel-content"> QuickFlip takes any piece of HTML markup and flips it like a card. It's simple to implement and the animation is fresh and original. </p> <p> <a href="#" class="quickFlipCta">Click to Flip</a> </p> </div> <div class="redPanel"> <h3 class="first quickFlipCta">QuickFlip 2</h3> <h4>A plugin for jQuery</h4> <p><em>By Jon Raasch</em></p> <p><a href="#" class="quickFlipCta">Click to flip</a> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

QuickFlip - Script Codes CSS Codes

.quickFlip { height: 216px; width: 322px;	font-family: "Trebuchet MS", Verdana, Sans-serif, sans; font-size: 13px; position: relative;
}
.quickFlip .blackPanel { background: red;
}
.quickFlip .redPanel { background: yellow;
}

QuickFlip - Script Codes JS Codes

$(function() { $('.quickFlip').quickFlip(); $('.quickFlip3').quickFlip({ vertical : true }); $('.quickFlip2').quickFlip();
});
QuickFlip - Script Codes
QuickFlip - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3
Size 2,109 Kb
Views 16,192
Do you need developer help for QuickFlip?

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!

Boyd Massie (massiebn) Script Codes
Name
Inline Frame PDF
Desaturate an image with CSS
Responsive Tournament Bracket
Round-A-Bout Image Showcase
Snow Falling JS
Background Video
JQuery Popeye Gallery
Responsive Dropdown Menu
Drag and Drop Images
Countdown Timer
Create amazing captions 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!