├── Demo ├── demo.html ├── jquery.tip_cards.js └── tip_cards.css ├── README.md ├── jquery.tip_cards.js ├── jquery.tip_cards.min.js └── tip_cards.css /Demo/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Tip Cards by Pete R. | The Pete Design 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 539 | 547 | 548 | 549 |
550 | 551 |
552 | 553 |
554 | 555 |
556 |
557 |

jQuery Tip Cards

558 |

Create a card layout that let your user flip through
it like you see on Google Tips

559 | 560 |
561 | Download on Github 562 |
563 |

Created by Pete R., Founder of BucketListly

564 |
565 | 566 |
567 |
    568 |
  • 569 |
    570 | Tip 1: See What videos your friends are posting and adjust friendships accordingly. 571 |
    572 |
    573 | 574 |
    575 |
    576 |

    1. See What videos your friends are posting

    577 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    578 |
    579 |
    580 |

    Tip 1: See What videos your friends are posting and adjust friendships accordingly.

    581 |
    582 |
    583 |
    • 584 |
  • 585 |
    586 | Tip 2: See What videos your friends are posting and adjust friendships accordingly. 587 |
    588 |
    589 | 590 |
    591 |
    592 |

    2. See What videos your friends are posting

    593 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    594 |
    595 |
    596 |

    Tip 2: See What videos your friends are posting and adjust friendships accordingly.

    597 |
    598 |
    599 |
    • 600 |
  • 601 |
    602 | Tip 3: See What videos your friends are posting and adjust friendships accordingly. 603 |
    604 |
    605 | 606 |
    607 |
    608 |

    3. See What videos your friends are posting

    609 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    610 |
    611 |
    612 |

    Tip 3: See What videos your friends are posting and adjust friendships accordingly.

    613 |
    614 |
    615 |
    • 616 |
  • 617 |
    618 | Tip 4: See What videos your friends are posting and adjust friendships accordingly. 619 |
    620 |
    621 | 622 |
    623 |
    624 |

    4. See What videos your friends are posting

    625 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    626 |
    627 |
    628 |

    Tip 4: See What videos your friends are posting and adjust friendships accordingly.

    629 |
    630 |
    631 |
    • 632 |
  • 633 |
    634 | Tip 5: See What videos your friends are posting and adjust friendships accordingly. 635 |
    636 |
    637 | 638 |
    639 |
    640 |

    5. See What videos your friends are posting

    641 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    642 |
    643 |
    644 |

    Tip 5: See What videos your friends are posting and adjust friendships accordingly.

    645 |
    646 |
    647 |
    • 648 |
  • 649 |
    650 | Tip 6: See What videos your friends are posting and adjust friendships accordingly. 651 |
    652 |
    653 | 654 |
    655 |
    656 |

    6. See What videos your friends are posting

    657 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    658 |
    659 |
    660 |

    Tip 6: See What videos your friends are posting and adjust friendships accordingly.

    661 |
    662 |
    663 |
    • 664 |
  • 665 |
    666 | Tip 7: See What videos your friends are posting and adjust friendships accordingly. 667 |
    668 |
    669 | 670 |
    671 |
    672 |

    7. See What videos your friends are posting

    673 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    674 |
    675 |
    676 |

    Tip 7: See What videos your friends are posting and adjust friendships accordingly.

    677 |
    678 |
    679 |
    • 680 |
  • 681 |
    682 | Tip 8: See What videos your friends are posting and adjust friendships accordingly. 683 |
    684 |
    685 | 686 |
    687 |
    688 |

    8. See What videos your friends are posting

    689 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    690 |
    691 |
    692 |

    Tip 8: See What videos your friends are posting and adjust friendships accordingly.

    693 |
    694 |
    695 |
    • 696 |
  • 697 |
    698 | Tip 9: See What videos your friends are posting and adjust friendships accordingly. 699 |
    700 |
    701 | 702 |
    703 |
    704 |

    9. See What videos your friends are posting

    705 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    706 |
    707 |
    708 |

    Tip 9: See What videos your friends are posting and adjust friendships accordingly.

    709 |
    710 |
    711 |
    • 712 |
  • 713 |
    714 | Tip 10: See What videos your friends are posting and adjust friendships accordingly. 715 |
    716 |
    717 | 718 |
    719 |
    720 |

    10. See What videos your friends are posting

    721 |

    Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.

    722 |
    723 |
    724 |

    Tip 10: See What videos your friends are posting and adjust friendships accordingly.

    725 |
    726 |
    727 |
    • 728 |
729 |
730 |
731 | Back to The Pete Design 732 | Fork me on GitHub 733 |
734 | 735 | 742 | 743 | 744 | 745 | -------------------------------------------------------------------------------- /Demo/jquery.tip_cards.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-tip_cards.js v1 3 | * =========================================================== 4 | * Copyright 2013 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * Create a card layout that let your 8 | * user flip through it like you see on 9 | * https://www.google.com/get/googletips/ 10 | * 11 | * https://github.com/peachananr/tip_cards 12 | * 13 | * ========================================================== */ 14 | 15 | !function($){ 16 | 17 | var defaults = { 18 | entrance: "bottom", 19 | column: 4, 20 | margin: "1%", 21 | selector: "> li", 22 | hoverTilt: "right", 23 | triggerSelector: "> li a", 24 | cardFlyDirection: "all", 25 | closeButton: "X", 26 | flipButton: "Flip", 27 | navigation: true, 28 | beforeOpen: null, 29 | afterOpen: null 30 | }; 31 | 32 | 33 | 34 | $.fn.tip_cards = function(options){ 35 | var settings = $.extend({}, defaults, options), 36 | el = $(this); 37 | el.addClass("tc_body"); 38 | 39 | $.each(el.find(settings.selector), function(i) { 40 | $(this).addClass("tc_card").hide().css({ 41 | "width": (100/settings.column) - (parseInt(settings.margin) * 2) + "%", 42 | "margin": settings.margin 43 | }).wrapInner("
"); 44 | if ($(this).find(".tc_front").length > 0) { 45 | $(this).find(".tc_inner_card").addClass("tc_flipped"); 46 | } 47 | }); 48 | 49 | 50 | setTimeout(function(){ 51 | $.each(el.find(".tc_card"), function(i) { 52 | var current = $(this); 53 | current.addClass("animate tc_entrance_" + settings.entrance).show(); 54 | current.find(".tc_inner_card").prepend(""); 55 | 56 | if (current.find(".tc_front").length > 0) { 57 | setTimeout(function(){ 58 | current.find(".tc_inner_card").removeClass("tc_flipped") 59 | } , 600); 60 | } 61 | }); 62 | }, 100); 63 | 64 | 65 | function resetNav() { 66 | if ($(".tc_card.active").prev(".tc_card").length < 1) { 67 | $(".tc_modal_open .tc_prev").addClass("tc_entrance"); 68 | } else { 69 | $(".tc_modal_open .tc_prev").removeClass("tc_entrance"); 70 | } 71 | if ($(".tc_card.active").next(".tc_card").length < 1) { 72 | $(".tc_modal_open .tc_next").addClass("tc_entrance"); 73 | } else { 74 | $(".tc_modal_open .tc_next").removeClass("tc_entrance"); 75 | } 76 | } 77 | 78 | function realignCards() { 79 | var timeout = 100; 80 | 81 | $(".tc_fake1").addClass("tc_straighten").css({ 82 | "position":"absolute", 83 | "top": (( $(window).height() - $(".tc_modal").height() ) / 2+$(window).scrollTop()) + 16 + "px", 84 | "left": ( $(window).width() - $(".tc_modal").width() ) / 2+$(window).scrollLeft() + "px", 85 | "-webkit-transform": "scale(0.96)", 86 | "-moz-transform": "scale(0.96)", 87 | "-o-transform": "scale(0.96)", 88 | "transform": "scale(0.96)" 89 | }); 90 | setTimeout(function(){ 91 | $(".tc_fake2").addClass("tc_straighten").css({ 92 | "position":"absolute", 93 | "top": (( $(window).height() - $(".tc_modal").height() ) / 2+$(window).scrollTop()) + 12 + "px", 94 | "left": ( $(window).width() - $(".tc_modal").width() ) / 2+$(window).scrollLeft() + "px", 95 | "-webkit-transform": "scale(0.97)", 96 | "-moz-transform": "scale(0.97)", 97 | "-o-transform": "scale(0.97)", 98 | "transform": "scale(0.97)" 99 | }); 100 | setTimeout(function(){ 101 | $(".tc_fake3").addClass("tc_straighten").css({ 102 | "position":"absolute", 103 | "top": (( $(window).height() - $(".tc_modal").height() ) / 2+$(window).scrollTop()) + 8 + "px", 104 | "left": ( $(window).width() - $(".tc_modal").width() ) / 2+$(window).scrollLeft() + "px", 105 | "-webkit-transform": "scale(0.98)", 106 | "-moz-transform": "scale(0.98)", 107 | "-o-transform": "scale(0.98)", 108 | "transform": "scale(0.98)" 109 | }); 110 | setTimeout(function(){ 111 | $(".tc_fake4").addClass("tc_straighten").css({ 112 | "position":"absolute", 113 | "top": (( $(window).height() - $(".tc_modal").height() ) / 2+$(window).scrollTop()) + 4 + "px", 114 | "left": ( $(window).width() - $(".tc_modal").width() ) / 2+$(window).scrollLeft() + "px", 115 | "-webkit-transform": "scale(0.99)", 116 | "-moz-transform": "scale(0.99)", 117 | "-o-transform": "scale(0.99)", 118 | "transform": "scale(0.99)", 119 | }); 120 | setTimeout(function(){ 121 | $(".tc_main_modal").css({ 122 | "position":"absolute", 123 | "top": ( $(window).height() - $(".tc_modal").height() ) / 2+$(window).scrollTop() + "px", 124 | "left": ( $(window).width() - $(".tc_modal").width() ) / 2+$(window).scrollLeft() + "px", 125 | "bottom": "auto", 126 | "right": "auto", 127 | "visibility": "visible" 128 | }); 129 | 130 | setTimeout(function(){ 131 | $(".tc_main_modal .tc_inner_modal").removeClass("tc_flipped"); 132 | if (typeof settings.afterOpen == 'function') settings.afterOpen(); 133 | resetNav(); 134 | }, 500); 135 | }, timeout); 136 | }, timeout); 137 | }, timeout); 138 | }, timeout); 139 | } 140 | 141 | $(window).resize(function() { 142 | realignCards(); 143 | }); 144 | 145 | el.find(settings.triggerSelector).addClass("tc_click_target").click(function() { 146 | var el2 = $(this), 147 | container = $(el2.attr("href")); 148 | 149 | 150 | 151 | el2.closest(".tc_card").addClass("active") 152 | 153 | if (typeof settings.beforeOpen == 'function') settings.beforeOpen(); 154 | 155 | $("body").addClass("tc_modal_open"); 156 | $("
").appendTo("body"); 157 | 158 | 159 | $("
").appendTo("body"); 160 | 161 | 162 | $(".tc_main_modal .tc_inner_modal").html(container.html()) 163 | 164 | 165 | if ($(".tc_main_modal .tc_front").length > 0) { 166 | $(".tc_main_modal .tc_inner_modal").addClass("tc_flipped"); 167 | } 168 | 169 | if (settings.cardFlyDirection == "all") { 170 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake1 tc_to_top").attr("style", "").insertBefore(".tc_main_modal"); 171 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake2 tc_to_bottom").attr("style", "").insertBefore(".tc_main_modal"); 172 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake3 tc_to_left").attr("style", "").insertBefore(".tc_main_modal"); 173 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake4 tc_to_right").attr("style", "").insertBefore(".tc_main_modal"); 174 | } else { 175 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake1 tc_to_" + settings.cardFlyDirection).attr("style", "").insertBefore(".tc_main_modal"); 176 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake2 tc_to_" + settings.cardFlyDirection).attr("style", "").insertBefore(".tc_main_modal"); 177 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake3 tc_to_" + settings.cardFlyDirection).attr("style", "").insertBefore(".tc_main_modal"); 178 | $(".tc_main_modal").clone( true ).removeClass("tc_main_modal").addClass("tc_fake4 tc_to_" + settings.cardFlyDirection).attr("style", "").insertBefore(".tc_main_modal"); 179 | } 180 | 181 | 182 | addExtraButtons(settings); 183 | 184 | 185 | realignCards(); 186 | 187 | if (settings.navigation != false ) { 188 | $("»").insertAfter(".tc_overlay") 189 | $("«").insertAfter(".tc_overlay"); 190 | } 191 | 192 | resetNav(); 193 | 194 | 195 | $(".tc_next").click(function() { 196 | if ($(".tc_card.active").next(".tc_card").length > 0 && !$(this).hasClass("animated")) { 197 | var el3 = $(this); 198 | el3.addClass("animated"); 199 | var content = "
" + $($(".tc_card.active").removeClass("active").next(".tc_card").addClass("active").find(".tc_click_target").attr("href")).html() + "
"; 200 | $(".tc_main_modal").addClass("old").clone().removeClass("old").html(content).insertBefore(".tc_main_modal.old") 201 | addExtraButtons(settings); 202 | $(".tc_main_modal.old").addClass("tc_to_bottom force").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 203 | $(".tc_main_modal.old.tc_to_bottom").remove(); 204 | 205 | $(".tc_main_modal").removeClass("tc_flipped"); 206 | el3.removeClass("animated"); 207 | resetNav(); 208 | }); 209 | } 210 | return false; 211 | }); 212 | 213 | $(".tc_prev").click(function() { 214 | if ($(".tc_card.active").prev(".tc_card").length > 0 && !$(this).hasClass("animated")) { 215 | var el3 = $(this); 216 | el3.addClass("animated"); 217 | var content = "
" + $($(".tc_card.active").removeClass("active").prev(".tc_card").addClass("active").find(".tc_click_target").attr("href")).html() + "
"; 218 | $(".tc_main_modal").addClass("old").clone().removeClass("old").addClass("tc_to_bottom force").html(content).insertAfter(".tc_main_modal.old") 219 | setTimeout(function(){ 220 | $(".tc_main_modal.tc_to_bottom").removeClass("tc_to_bottom force") 221 | $(".tc_main_modal:not(.old)").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 222 | $(".tc_main_modal.old").remove(); 223 | addExtraButtons(settings); 224 | $(".tc_main_modal").removeClass("tc_flipped"); 225 | resetNav(); 226 | el3.removeClass("animated"); 227 | }); 228 | }, 100); 229 | } 230 | return false; 231 | }); 232 | 233 | 234 | function addExtraButtons(settings) { 235 | if (settings.closeButton != false ) { 236 | $(".tc_main_modal").prepend("" + settings.closeButton +""); 237 | $(".tc_main_modal .tc_flip_toggle").remove(); 238 | } 239 | if (settings.flipButton != false && $(".tc_main_modal").find(".tc_front").length > 0 ) { 240 | $(".tc_main_modal .tc_flip_toggle").remove(); 241 | $(".tc_main_modal").prepend("" + settings.flipButton +""); 242 | } 243 | 244 | 245 | $(".tc_overlay, .tc_close").click(function() { 246 | $(".tc_overlay").fadeOut("slow", function() { 247 | $(".tc_overlay").remove(); 248 | }); 249 | el2.closest(".tc_card").removeClass("active") 250 | $(".tc_next, .tc_prev").addClass("tc_entrance") 251 | $(".tc_next, .tc_prev").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 252 | $(".tc_next, .tc_prev").remove(); 253 | }); 254 | $(".tc_modal").attr("style","").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 255 | $(this).remove(); 256 | $("body").removeClass("tc_modal_open") 257 | }); 258 | return false; 259 | }); 260 | 261 | $(".tc_flip_toggle").click(function() { 262 | $(".tc_main_modal .tc_inner_modal").toggleClass("tc_flipped"); 263 | return false; 264 | }); 265 | 266 | } 267 | 268 | }); 269 | } 270 | }(window.jQuery); 271 | 272 | -------------------------------------------------------------------------------- /Demo/tip_cards.css: -------------------------------------------------------------------------------- 1 | .tc_body { 2 | width: 100%; 3 | float: left; 4 | padding: 0; 5 | } 6 | 7 | .tc_card { 8 | float: left; 9 | list-style: none; 10 | -webkit-animation-duration: 1s; 11 | animation-duration: 1s; 12 | -webkit-animation-fill-mode: both; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .tc_inner_card .tc_shadow { 17 | background-image: -moz-linear-gradient(right, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.01) 100%); 18 | background-image: -o-linear-gradient(right, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.01) 100%); 19 | background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.01) 100%); 20 | background-image: linear,right,rgba(0,0,0,0.16) 0%,rgba(0,0,0,0.01) 100%; 21 | content: ''; 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | right: 0; 27 | bottom: 0; 28 | opacity: 0; 29 | -webkit-transition: opacity 0.25s ease; 30 | -moz-transition: opacity 0.25s ease; 31 | transition: opacity 0.25s ease; 32 | } 33 | 34 | .tc_inner_card:hover .tc_shadow { 35 | opacity: 1; 36 | } 37 | 38 | .tc_modal { 39 | max-width: 890px; 40 | position: fixed; 41 | background: white; 42 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); 43 | -webkit-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 44 | -moz-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 45 | -o-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 46 | transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 47 | } 48 | 49 | .tc_inner_modal { 50 | margin: 20px; 51 | box-sizing: border-box; 52 | -webkit-box-sizing: border-box; 53 | -moz-box-sizing: border-box; 54 | position: relative; 55 | transform-style: preserve-3d; 56 | -webkit-transform-style: preserve-3d; 57 | -moz-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | -webkit-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 60 | -moz-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 61 | -o-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 62 | transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 63 | } 64 | 65 | .tc_overlay { 66 | position: fixed; 67 | top: 0; 68 | left: 0; 69 | height: 100%; 70 | width: 100%; 71 | background: rgba(0,0,0,0.5); 72 | z-index: 99; 73 | } 74 | 75 | .tc_modal_open { 76 | overflow: hidden; 77 | } 78 | 79 | .tc_main_modal { 80 | z-index: 105; 81 | top: -100%; 82 | display: block; 83 | visibility: hidden; 84 | } 85 | 86 | .tc_modal.tc_straighten { 87 | -webkit-transform: rotate(0); 88 | -moz-transform: rotate(0); 89 | -o-transform: rotate(0); 90 | transform: rotate(0); 91 | } 92 | 93 | 94 | .tc_to_top { 95 | -webkit-transform: rotate(-45deg); 96 | -moz-transform: rotate(-45deg); 97 | -o-transform: rotate(-45deg); 98 | transform: rotate(-45deg); 99 | top: -200%; 100 | z-index: 101; 101 | -webkit-transform-origin: 50% 100%; 102 | -moz-transform-origin: 50% 100%; 103 | -o-transform-origin: 50% 100%; 104 | transform-origin: 50% 100%; 105 | } 106 | 107 | .tc_to_bottom { 108 | -webkit-transform: rotate(45deg); 109 | -moz-transform: rotate(45deg); 110 | -o-transform: rotate(45deg); 111 | transform: rotate(45deg); 112 | -webkit-transform-origin: 50% 100%; 113 | -moz-transform-origin: 50% 100%; 114 | -o-transform-origin: 50% 100%; 115 | transform-origin: 50% 100%; 116 | top: 200%; 117 | z-index: 102; 118 | } 119 | 120 | .tc_to_bottom.force { 121 | top: 200% !important; 122 | } 123 | 124 | .tc_to_left { 125 | -webkit-transform: rotate(-45deg); 126 | -moz-transform: rotate(-45deg); 127 | -o-transform: rotate(-45deg); 128 | transform: rotate(-45deg); 129 | -webkit-transform-origin: 50% 100%; 130 | -moz-transform-origin: 50% 100%; 131 | -o-transform-origin: 50% 100%; 132 | transform-origin: 50% 100%; 133 | left: -200%; 134 | z-index: 103; 135 | } 136 | 137 | .tc_to_right { 138 | -webkit-transform: rotate(45deg); 139 | -moz-transform: rotate(45deg); 140 | -o-transform: rotate(45deg); 141 | transform: rotate(45deg); 142 | -webkit-transform-origin: 50% 100%; 143 | -moz-transform-origin: 50% 100%; 144 | -o-transform-origin: 50% 100%; 145 | transform-origin: 50% 100%; 146 | left: 200%; 147 | right: auto; 148 | z-index: 104; 149 | } 150 | 151 | body .tc_flipped { 152 | -webkit-transform: rotateY(180deg); 153 | -moz-transform: rotateY(180deg); 154 | -o-transform: rotateY(180deg); 155 | transform: rotateY(180deg); 156 | } 157 | 158 | .tc_front, .tc_back { 159 | -webkit-backface-visibility: hidden; 160 | -moz-backface-visibility: hidden; 161 | -o-backface-visibility: hidden; 162 | backface-visibility: hidden; 163 | } 164 | 165 | body .tc_front { 166 | z-index: 2; 167 | -webkit-transform: rotateY(0deg); 168 | -webkit-transform: translate3d(0, 0, 0); 169 | } 170 | 171 | body .tc_back { 172 | -webkit-transform: rotateY(180deg); 173 | -moz-transform: rotateY(180deg); 174 | -o-transform: rotateY(180deg); 175 | transform: rotateY(180deg); 176 | background: #FFF; 177 | position: absolute; 178 | width: 100%; 179 | height: 100%; 180 | top: 0; 181 | left: 0; 182 | } 183 | /*Chrome Flicker Hack*/ 184 | @media screen and (-webkit-min-device-pixel-ratio:0) { 185 | body .tc_inner_card { 186 | transform-style: flat ; 187 | -webkit-transform-style: flat; 188 | -moz-transform-style: flat; 189 | -o-transform-style: flat; 190 | } 191 | body .tc_flipped { 192 | transform-style: preserve-3d; 193 | -webkit-transform-style: preserve-3d; 194 | -moz-transform-style: preserve-3d; 195 | -o-transform-style: preserve-3d; 196 | } 197 | } 198 | 199 | .tc_inner_card { 200 | transform-style: preserve-3d; 201 | -webkit-transform-style: preserve-3d; 202 | -moz-transform-style: preserve-3d; 203 | -o-transform-style: preserve-3d; 204 | 205 | -webkit-transform: perspective(2200px) translate(0, 0); 206 | -moz-transform: perspective(2200px) translate(0, 0); 207 | -ms-transform: perspective(2200px) translate(0, 0); 208 | -o-transform: perspective(2200px) translate(0, 0); 209 | background: white; 210 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); 211 | box-sizing: border-box; 212 | -webkit-box-sizing: border-box; 213 | -moz-box-sizing: border-box; 214 | -webkit-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 215 | -moz-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 216 | -o-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 217 | transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 218 | } 219 | 220 | .tc_click_target { 221 | padding: 10px; 222 | display:block; 223 | } 224 | 225 | .tc_close { 226 | z-index: 110; 227 | position: absolute; 228 | right: 10px; 229 | top: 10px; 230 | font-size: 24px; 231 | font-weight: 100; 232 | line-height: 100%; 233 | } 234 | 235 | .tc_flip_toggle { 236 | z-index: 110; 237 | position: absolute; 238 | right: 30px; 239 | top: 10px; 240 | font-size: 24px; 241 | font-weight: 100; 242 | line-height: 100%; 243 | } 244 | 245 | .tc_inner_card > * { 246 | position: relative; 247 | } 248 | 249 | .tc_entrance.tc_next { 250 | right: -100px; 251 | opacity: 0; 252 | } 253 | 254 | .tc_entrance.tc_prev { 255 | left: -100px; 256 | opacity: 0; 257 | } 258 | 259 | .tc_next, .tc_prev { 260 | position: fixed; 261 | background: white; 262 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); 263 | color: #333; 264 | font-size: 44px; 265 | line-height: 100%; 266 | border-radius: 50px; 267 | display: block; 268 | width: 48px; 269 | padding: 10px; 270 | height: 48px; 271 | top: 50%; 272 | margin-top: -24px; 273 | opacity: 1; 274 | z-index: 105; 275 | -webkit-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 276 | -moz-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 277 | -o-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 278 | transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 279 | } 280 | 281 | .tc_next { 282 | right: -24px; 283 | text-indent: -16px; 284 | } 285 | 286 | .tc_prev { 287 | left: -24px; 288 | text-indent: 16px; 289 | } 290 | 291 | .tc_card.animate { 292 | -webkit-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 293 | -moz-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 294 | -o-transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 295 | transition: all 500ms cubic-bezier(0.1, 0.1, 0.41, 0.99); 296 | } 297 | 298 | .tc_inner_card:hover { 299 | -webkit-transform: perspective(2200px) rotateY(25deg); 300 | -moz-transform: perspective(2200px) rotateY(25deg); 301 | -ms-transform: perspective(2200px) rotateY(25deg); 302 | -o-transform: perspective(2200px) rotateY(25deg); 303 | transform: perspective(2200px) rotateY(25deg); 304 | } 305 | 306 | 307 | .tc_inner_card.tilt_left:hover { 308 | -webkit-transform: perspective(2200px) rotateY(-25deg); 309 | -moz-transform: perspective(2200px) rotateY(-25deg); 310 | -ms-transform: perspective(2200px) rotateY(-25deg); 311 | -o-transform: perspective(2200px) rotateY(-25deg); 312 | transform: perspective(2200px) rotateY(-25deg); 313 | } 314 | 315 | .tc_inner_card.tilt_up:hover { 316 | -webkit-transform: perspective(2200px) rotateX(25deg); 317 | -moz-transform: perspective(2200px) rotateX(25deg); 318 | -ms-transform: perspective(2200px) rotateX(25deg); 319 | -o-transform: perspective(2200px) rotateX(25deg); 320 | transform: perspective(2200px) rotateX(25deg); 321 | } 322 | 323 | .tc_inner_card.tilt_down:hover { 324 | -webkit-transform: perspective(2200px) rotateX(-25deg); 325 | -moz-transform: perspective(2200px) rotateX(-25deg); 326 | -ms-transform: perspective(2200px) rotateX(-25deg); 327 | -o-transform: perspective(2200px) rotateX(-25deg); 328 | transform: perspective(2200px) rotateX(-25deg); 329 | } 330 | 331 | 332 | .tc_entrance_bottom { 333 | -webkit-animation-name: tc_entrance_bottom; 334 | animation-name: tc_entrance_bottom; 335 | } 336 | 337 | @-webkit-keyframes tc_entrance_bottom { 338 | 0% { 339 | opacity: 0; 340 | -webkit-transform: translateY(20px); 341 | transform: translateY(20px); 342 | } 343 | 344 | 100% { 345 | opacity: 1; 346 | -webkit-transform: translateY(0); 347 | transform: translateY(0); 348 | } 349 | } 350 | 351 | @keyframes tc_entrance_bottom { 352 | 0% { 353 | opacity: 0; 354 | -webkit-transform: translateY(20px); 355 | -ms-transform: translateY(20px); 356 | transform: translateY(20px); 357 | } 358 | 359 | 100% { 360 | opacity: 1; 361 | -webkit-transform: translateY(0); 362 | -ms-transform: translateY(0); 363 | transform: translateY(0); 364 | } 365 | } 366 | 367 | .tc_entrance_top { 368 | -webkit-animation-name: tc_entrance_top; 369 | animation-name: tc_entrance_top; 370 | } 371 | 372 | 373 | @-webkit-keyframes tc_entrance_top { 374 | 0% { 375 | opacity: 0; 376 | -webkit-transform: translateY(-20px); 377 | transform: translateY(-20px); 378 | } 379 | 380 | 100% { 381 | opacity: 1; 382 | -webkit-transform: translateY(0); 383 | transform: translateY(0); 384 | } 385 | } 386 | 387 | @keyframes tc_entrance_top { 388 | 0% { 389 | opacity: 0; 390 | -webkit-transform: translateY(-20px); 391 | -ms-transform: translateY(-20px); 392 | transform: translateY(-20px); 393 | } 394 | 395 | 100% { 396 | opacity: 1; 397 | -webkit-transform: translateY(0); 398 | -ms-transform: translateY(0); 399 | transform: translateY(0); 400 | } 401 | } 402 | 403 | 404 | .tc_entrance_left { 405 | -webkit-animation-name: tc_entrance_left; 406 | animation-name: tc_entrance_left; 407 | } 408 | 409 | 410 | @-webkit-keyframes tc_entrance_left { 411 | 0% { 412 | opacity: 0; 413 | -webkit-transform: translateX(-20px); 414 | transform: translateX(-20px); 415 | } 416 | 417 | 100% { 418 | opacity: 1; 419 | -webkit-transform: translateX(0); 420 | transform: translateX(0); 421 | } 422 | } 423 | 424 | @keyframes tc_entrance_left { 425 | 0% { 426 | opacity: 0; 427 | -webkit-transform: translateX(-20px); 428 | -ms-transform: translateX(-20px); 429 | transform: translateX(-20px); 430 | } 431 | 432 | 100% { 433 | opacity: 1; 434 | -webkit-transform: translateX(0); 435 | -ms-transform: translateX(0); 436 | transform: translateX(0); 437 | } 438 | } 439 | 440 | 441 | .tc_entrance_right { 442 | -webkit-animation-name: tc_entrance_right; 443 | animation-name: tc_entrance_right; 444 | } 445 | 446 | 447 | @-webkit-keyframes tc_entrance_right { 448 | 0% { 449 | opacity: 0; 450 | -webkit-transform: translateX(20px); 451 | transform: translateX(20px); 452 | } 453 | 454 | 100% { 455 | opacity: 1; 456 | -webkit-transform: translateX(0); 457 | transform: translateX(0); 458 | } 459 | } 460 | 461 | @keyframes tc_entrance_right { 462 | 0% { 463 | opacity: 0; 464 | -webkit-transform: translateX(20px); 465 | -ms-transform: translateX(20px); 466 | transform: translateX(20px); 467 | } 468 | 469 | 100% { 470 | opacity: 1; 471 | -webkit-transform: translateX(0); 472 | -ms-transform: translateX(0); 473 | transform: translateX(0); 474 | } 475 | } 476 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Tip Cards by Pete R. 2 | Create an animated card layout that let your viewer flip through it like you see on [Google Tips](https://www.google.com/get/googletips/) Page. 3 | 4 | Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) 5 | 6 | 7 | ## Demo 8 | [View demo](http://peachananr.github.io/tip_cards/Demo/demo.html) 9 | 10 | ## Compatibility 11 | Modern browsers such as Chrome, Firefox, and Safari on desktop have been tested. I have not tested this on IE. 12 | 13 | ## Basic Usage 14 | Tip Cards plugin let you create a layout of cards with a card-like interaction that you see on [Google Tips](https://www.google.com/get/googletips/) Page. I've also added several new animation options so that you can personalize it to your own liking. 15 | 16 | To add this to your website, all you have to do is include the latest jQuery library together with `jquery.tip_cards.js` and `tip_cards.css` into your document's ``, and follow the HTML markup as shown below: 17 | 18 | ## 2 Sides Flippable HTML Markup 19 | 20 | This is the default markup if you are looking to replicate the effect you see on [Google Tips](https://www.google.com/get/googletips/) Page. 21 | 22 | ````html 23 | 24 | .. 25 |