App-like Page Transition Effects With jQuery and CSS3 - Nice Screen

File Size: 73.7 KB
Views Total: 5696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
App-like Page Transition Effects With jQuery and CSS3 - Nice Screen

Nice Screen is a powerful and customizable jQuery plugin that applies app-like, CSS3 powered transition effects to page sections within the document.

Basic usage:

1. Place jQuery JavaScript library together with the jQuery nice screen plugin's JS and CSS files into your html document.

<link rel="stylesheet" href="jquery-lvl99-nicescreen.css">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="jquery-lvl99-nicescreen.js"></script>

2. Create sectioned content on your webpage following the markup like this:

<section id="viewport" class="ui-nicescreen-viewport">

  <article id="demo" class="screen" data-nicescreen-column="1">
    ...
  </article>

  <article id="demo" class="screen" data-nicescreen-column="2">
    ...
  </article>

  <article id="demo" class="screen" data-nicescreen-column="3">
    ...
  </article>

  ...

</section>

3. Active the plugin with one JS call.

$('#viewport .screen').nicescreen();

4. Nice Screen supports nested viewports and multiple transition types. Since all the animation information is located within the CSS, customisation (like animation speed) and extensions (additional transition types) is all available through CSS. Spacial transitions allow setting a row and column order for the screens. The transition will change depending on the row/column offset.

Built-in transitions effect available:

  • Slide (Default)
  • 3D
  • card

4 enter animations and 4 exit animations:

  • .ui-nicescreen-animation-enterfromleft
  • .ui-nicescreen-animation-enterfromright
  • .ui-nicescreen-animation-enterfromtop
  • .ui-nicescreen-animation-enterfrombottom
  • .ui-nicescreen-animation-exittoleft
  • .ui-nicescreen-animation-exittoright
  • .ui-nicescreen-animation-exittotop
  • .ui-nicescreen-animation-exittobottom
<section id="viewport" class="ui-nicescreen-viewport"
         data-nicescreen-transition="slide" 
         >

5. Possible plugin options.

/**
Enable/disable the hashchange event

@property allowHashChange
@type {Boolean}
**/
allowHashChange: true,

/**
Enable/disable the NiceScreen refresh event on window resize

@property allowResizeRefresh
@type {Boolean}
**/
allowResizeRefresh: true,

/**
The time in milliseconds to trigger the resize refresh

@property checkResizingTime
@type {Number}
**/
checkResizingTime: 150,

/**
Do a persistent check for refresh

@property persistentRefresh
@type {Boolean}
**/
persistentRefresh: false,

/**
Persistent refresh time in milliseconds

@property persistentRefreshTime
@type {Number}
**/
persisentRefreshTime: 6000,

/**
Defaults for new NiceScreen elements

@property defaults
@type {Object}
**/
defaults: {
  group: 'default', // string
  row: 0, // int
  column: 0 // int
},

/**
The attributes to detect on elements to then carry through to the options set when establishing a new NiceScreen.
[key] is the attribute to check for, [value] is the option name to set it to

@property attributeOptions
@type {Object}
**/
attributeOptions: {
  group: 'data-nicescreen-group',
  row: 'data-nicescreen-row',
  column: 'data-nicescreen-column'
}

6. Methods and events.

// Refreshes the viewport's dimensions.
// Triggered event chain:
// event-nicescreen-set-dimensions => ( viewport {HTMLElement}, width {Number}, height {Number} )
elem.nicescreen.refresh()
$(elem).trigger('event-nicescreen-refresh')

// Show screen without the transition animation.
// Triggered event chain:
// event-nicescreen-show-start
// event-nicescreen-hide
// event-nicescreen-show-end
elem.nicescreen.show()

$(elem).trigger('event-nicescreen-show')

// Removes the .ui-nicescreen-active class from the element, effectively hiding the screen (only if it's not currently transitioning/animating).
// Triggered event chain:
// event-nicescreen-hide-start
// event-nicescreen-hide-end
elem.nicescreen.hide()

$(elem).trigger('event-nicescreen-hide')

// Transitions out the viewport's active/visible screen and then reveals the new screen.
// Triggered event chain:
// event-nicescreen-transition-start
// event-nicescreen-show
// event-nicescreen-enter-start
// event-nicescreen-enter-end
// event-nicescreen-exit-start
// event-nicescreen-exit-end
// event-nicescreen-transition-end
elem.nicescreen.reveal()

$(elem).trigger('event-nicescreen-reveal')

// Removes the Nice Screen instance on the HTML object. Useful for memory management.

elem.nicescreen.destroy()

$(elem).trigger('event-nicescreen-destroy')

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