teddykishi

Phaser Modals

A Pen by Michael Dobekidis on CodePen.

License.

teddykishi

/*****************
    ANIMATION
*****************/
// tiny helper for jquery to know when an css animation/transition ends
// $(".cls").on(animationEnd, fn); 
var animationEnd = "webkitAnimationEnd oanimationend msAnimationEnd animationend";
// $(".cls").on(transitionEnd, fn);
var transitionEnd = "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend";
/****************
    RANDOM

teddykishi

<!-- Demo of material design box shadows based on https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d -->

<div class="card"></div>
<div class="card card-1"></div>
<div class="card card-2"></div>
<div class="card card-3"></div>
<div class="card card-4"></div>
<div class="card card-5"></div>

teddykishi

3D Movement Responsive Popup

A 3D popup message that follows the user's mouse movements. Made in CSS3 + jQuery.

UPDATE : simplified the JS code by using a pseudo-element for the popup's shadow.

A Pen by Marc Malignan on CodePen.

License.

teddykishi

<div id="wrap">
  <div id="popup">
    <h1>break me</h1>
  </div>	
</div>

<div class="reverse">Reverse</div>

teddykishi

Animated Popup Android Style

An android style animated popup information box.

A Pen by Ashwin Saxena on CodePen.

License.

teddykishi

<div class="modal-frame">
  <div class="modal">
		    <div class="modal-inset">
      			<div class="button close"><i class="fa fa-close"></i></div>
	
      <div class="modal-body">
				        <h3>Such Modal, Much Animate!</h3>
        				<p>Nothing groundbreaking, but I hope you enjoyed <br /> the physics for the open/close animation =).</p>
        <p class="ps">**I know the SASS is a bit messy, I did this on the fly and for fun <br /> and w.e. I DO WHAT I WANT!!</p>
      			</div>

teddykishi

<a href="#0" class="cd-popup-trigger">View Pop-up</a>

<div class="cd-popup" role="alert">
	<div class="cd-popup-container">
		<p>Are you sure you want to delete this element?</p>
		<ul class="cd-buttons">
			<li><a href="#0">Yes</a></li>
			<li><a href="#0">No</a></li>
		</ul>
		<a href="#0" class="cd-popup-close img-replace">Close</a>

teddykishi

<div class="dashboard display-animation" style="margin: 0 auto; width: 1130px;">
  <a class="tile tile-lg tile-pink ripple-effect" href="#">
    <span class="content-wrapper">
      <span class="tile-content">
        <span class="tile-img" style="background-image: url(http://www.google.com/design/images/google_spec.png);"></span>
        <span class="tile-holder tile-holder-sm">
          <span class="title">Google Guidelines</span>
        </span>
      </span>      
    </span>

teddykishi

<?php

	// display errors
	error_reporting(E_ALL);
	ini_set('display_errors', 1);

	include "tools.php";

	// Router
	if( isset($_GET["page"]) && !empty($_GET["page"]) ){