Estou utilizando um efeito de Full Screen Overlay em meu site, este efeito eu peguei no Codrops. Ele está funcionando normal, porém, como estou buscando dados no BD, como fazer ele funcionar não só em um botão, mas como vários?
JS:
(function() {
var triggerBttn = document.getElementById('menudrops'),
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'p.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
s = Snap( overlay.querySelector( 'svg' ) ),
path = s.select( 'path' ),
steps = overlay.getAttribute( 'data-steps' ).split(';'),
stepsTotal = steps.length;
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
var pos = stepsTotal-1;
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
classie.remove( overlay, 'close' );
},
nextStep = function( pos ) {
pos--;
if( pos < 0 ) return;
path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() {
if( pos === 0 ) {
onEndTransitionFn();
}
nextStep(pos);
} );
};
nextStep(pos);
}
else if( !classie.has( overlay, 'close' ) ) {
var pos = 0;
classie.add( overlay, 'open' );
var nextStep = function( pos ) {
pos++;
if( pos > stepsTotal - 1 ) return;
path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } );
};
nextStep(pos);
}
}
triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );
})();
PHP:
<section>
<p id="menudrops">'.$titulo.'</p>
</section>
DESCULPE, ESSA PÁGINA NÃO EXISTE
. Pode ser mais claro na pergunta explicando o efeito que quer? vi o outro link também mas não percebí qual o efeito que você quer. Coloque o seu código aqui também para podermos ajudar.