Pretty Cool Animated Modal Plugin For jQuery - MoceanModals

MoceanModals is a jQuery plugin for creating animated modal with 22 pretty cool animations based on CSS3. Fully customizable via SASS.

Animations available:

• SLIDE IN (TOP)
• SLIDE IN (RIGHT)
• SLIDE IN (BOTTOM)
• SLIDE IN (LEFT)
• FROM TOP TO BOTTOM
• FROM BOTTOM TO TOP
• FROM LEFT TO RIGHT
• FROM RIGHT TO LEFT
• 3D FLIP (HORIZONTAL)
• 3D FLIP (VERTICAL)
• 3D SIGN
• 3D SLIT
• 3D ROTATE BOTTOM
• 3D ROTATE IN LEFT
• NEWSPAPER
• FALLING
• SHAKE
• BOUNCE
• PULSE
• WOBBLE
• SWING
• TADA

How to use it:

1. Import CSS styles from SCSS files:

mocean-modal-vars.scss
mocean-modal-utilities.scss
mocean-modal-styling.scss
mocean-3d-modals.scss
mocean-slider-modals.scss
mocean-playful-modals.scss

2. Import jQuery library and the JavaScript file mocean-modals.js into the document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/mocean-modals.js"></script>

3. The basic Mocean Modal markup.

<div class="mocean-wrap mocean-modal-wrap" id="mocean-modal-wrap">
  <div class="mocean-content mocean-modal" id="mocean-modal">
    <h3>The Mocean Modal</h3>
    <div class="mocean-modal-content">
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
      <button class="mocean-modal-close">Close me!</button>
    </div>
  </div>
</div>

4. Create trigger buttons to toggle the modal in different animations.

<!-- Mocean SliderModals -->
<button class="mocean-modal-button" data-mocean-type="slide-in-top">Slide In (top)</button>
<button class="mocean-modal-button" data-mocean-type="slide-in-right">Slide In (right)</button>
<button class="mocean-modal-button" data-mocean-type="slide-in-bottom">Slide In (bottom)</button>
<button class="mocean-modal-button" data-mocean-type="slide-in-left">Slide In (left)</button>
<button class="mocean-modal-button" data-mocean-type="slide-in-top" data-mocean-out-type="slide-out-bottom">From Top to Bottom</button>
<button class="mocean-modal-button" data-mocean-type="slide-in-bottom" data-mocean-out-type="slide-out-top">From Bottom to Top</button>
<button class="mocean-modal-button" data-mocean-type="slide-in-left" data-mocean-out-type="slide-out-right">From Left to Right</button>
<button class="mocean-modal-button" data-mocean-type="slide-in-right" data-mocean-out-type="slide-out-left">From Right to Left</button>

<!-- Mocean 3DModals -->
<button class="mocean-modal-button" data-mocean-type="flip-horizontal-3D">3D Flip (horizontal)</button>
<button class="mocean-modal-button" data-mocean-type="flip-vertical-3D">3D Flip (vertical)</button>
<button class="mocean-modal-button" data-mocean-type="sign-3D">3D Sign</button>
<button class="mocean-modal-button" data-mocean-type="slit-3D">3D Slit</button>
<button class="mocean-modal-button" data-mocean-type="rotate-from-bottom-3D">3D Rotate Bottom</button>
<button class="mocean-modal-button" data-mocean-type="rotate-from-left-3D">3D Rotate In Left</button>

<!-- Mocean PlayfulModals -->
<button class="mocean-modal-button" data-mocean-type="newspaper">Newspaper</button>
<button class="mocean-modal-button" data-mocean-type="side-fall">Falling</button>
<button class="mocean-modal-button" data-mocean-type="shake">Shake</button>
<button class="mocean-modal-button" data-mocean-type="bounce">Bounce</button>
<button class="mocean-modal-button" data-mocean-type="pulse">Pulse</button>
<button class="mocean-modal-button" data-mocean-type="wobble">Wobble</button>
<button class="mocean-modal-button" data-mocean-type="swing">Swing</button>
<button class="mocean-modal-button" data-mocean-type="tada">Tada</button>

5. Override the default variables to customize the animation.

// 3D & Speed
$mocean-transition-duration: 500ms !default;
$mocean-perspective: 600px !default;

// Motion
$mocean-modal-transition-duration: 500ms !default;
$mocean-modal-animation-duration: $mocean-modal-transition-duration*2 !default;

// Color
$mocean-modal-bg: #0D47A1 !default;

// Size
$mocean-modal-max-width: 320px !default;
$mocean-modal-z-index: 2000 !default;

---

This awesome jQuery plugin is developed by grayghostvisuals. For more Advanced Usages, please check the demo page or visit the official website.