This time I will share jQuery Plugin and tutorial about 3D Flipping Circle with CSS3 and jQuery, hope it will help you in programming stack.
| File Size: | 310 KB |
|---|---|
| Views Total: | 4054 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Makes use of CSS3 transforms / transitions and a bit jQuery to create a cool 3D flipping circle which is great for online invitation cards.
How to use it:
1. Load the core stylesheet style.css in the head section of the html document.
1 |
<link rel="stylesheet" href="css/style.css"> |
2. The required html structure for the flipping circle.
01 |
<div class="click"></div> |
02 |
<div id="fc-wrapper" class="fc-wrapper"> |
03 |
<!-- right-most handle piece --> |
04 |
<div class="fc-handle fc-handle-pull"></div> |
05 |
<div class="fc-perspective"> |
06 |
<!-- right part overlay; get's darker --> |
07 |
<div class="fc-overlay fc-overlay-reverse"></div> |
08 |
<!-- middle handle piece --> |
09 |
<div class="fc-handle fc-handle-out"><div></div></div> |
10 |
<!-- inner bottom content part --> |
11 |
<div class="fc-bottom"> |
12 |
<div class="fc-bottom-bg"> |
13 |
<div class="fc-content"> |
14 |
<p>Content here</p> |
15 |
</div> |
16 |
</div> |
17 |
<div class="fc-overlay fc-overlay-solid"></div> |
18 |
</div><!-- //fc-bottom --> |
19 |
<!-- front and back of the flipping half --> |
20 |
<div class="fc-flip"> |
21 |
<div class="fc-front"> |
22 |
<div class="fc-inner"> |
23 |
<div class="fc-overlay fc-overlay-left"></div> |
24 |
<!-- left-most part of handle --> |
25 |
<div class="fc-handle fc-handle-in"><div></div></div> |
26 |
<div class="fc-content"> |
27 |
<h3>Content Here</h3> |
28 |
</div> |
29 |
</div> |
30 |
</div><!-- //fc-front --> |
31 |
<div class="fc-back"> |
32 |
<div class="fc-inner"> |
33 |
<div class="fc-content"> |
34 |
<div class="feynman"> |
35 |
<span>Content here</span> |
36 |
</div> |
37 |
</div> |
38 |
<div class="fc-overlay fc-overlay-right"></div> |
39 |
</div> |
40 |
</div><!-- //fc-back --> |
41 |
</div><!-- //fc-flip --> |
42 |
</div><!-- //fc-perspective --> |
43 |
</div> |
3. Load the latest version of jQuery JavaScript library from a CDN.
1 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
4. The JavaScript to active the 3D flip effect.
01 |
$(function() { |
02 |
var $wrapper= $( '#fc-wrapper' ), |
03 |
$handle = $wrapper.children( 'div.fc-handle-pull' ); |
04 |
05 |
$handle.on( 'click', function( event ) { |
06 |
( $handle.data( 'opened' ) ) ? close() : open(); |
07 |
}); |
08 |
|
09 |
function open() { |
10 |
$wrapper.addClass( 'fc-wrapper-open' ); |
11 |
$handle.data( 'opened', true ); |
12 |
} |
13 |
|
14 |
function close() { |
15 |
$wrapper.removeClass( 'fc-wrapper-open' ); |
16 |
$handle.data( 'opened', false ); |
17 |
} |
18 |
19 |
}); |
This awesome jQuery plugin is developed by NYCL. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
