Problème avec PageTransitions.js

Bonjour à tous,

Infographiste de métier, il m'arrive de devoir plonger dans l'HTML/CSS de temps en temps et j'ai pas mal de mal à cerner le code fournis par cet article : http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/

J'ai réussi à faire ma structure mais je n'arrive pas à trouver comment coder un simple bouton permettant de faire une transition unique.

<div id="pt-main" class="pt-perspective">
			<div class="pt-page pt-page-1">
			    <div class="logo"></div>
			    <div class="menu">
			        <div class="bar1"></div>
			        <div class="bar2"></div>
			        <div class="bar3"></div>
			    </div>
			    <div class="label"></div>    
			</div>
			<div class="pt-page pt-page-2">
                
            </div>
			<div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
			<div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
			<div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
			<div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
		</div>

		<div class="pt-message">
			<p>Your browser does not support CSS animations.</p>
		</div>

J'ai compris que le code du bouton passait par une classe pt-triggers mais je n'arrive pas à trouver la syntaxe exacte pour faire marcher le bouton... J'aimerais affilier l'animation 'data-animation="3"' à ce bouton pour la précision !

La démo possède un menu déroulant fonctionnel mais impossible de l'adapter pour avoir un simple bouton...

Pour info le code de base du menu déroulant et du bouton permettant de changer de transition à chaque clic:

<div class="pt-triggers">
			<button id="iterateEffects" class="pt-touch-button">Show next page transition</button>
			<div id="dl-menu" class="dl-menuwrapper">
				<button class="dl-trigger">Choose a transition</button>
				<ul class="dl-menu">
					<li>
						<a href="#">Move</a>
						<ul class="dl-submenu">
							<li data-animation="1"><a href="#">Move to left/ from right</a></li>
							<li data-animation="2"><a href="#">Move to right/ from left</a></li>
							<li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
							<li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Fade</a>
						<ul class="dl-submenu">
							<li data-animation="5"><a href="#">Fade / from right</a></li>
							<li data-animation="6"><a href="#">Fade / from left</a></li>
							<li data-animation="7"><a href="#">Fade / from bottom</a></li>
							<li data-animation="8"><a href="#">Fade / from top</a></li> ETC ETC...

Vous pouvez me demander des précisions si ce n'est pas très clair !

En tout cas merci d'avance !

Cdt, Baptiste