0

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>
15
  • O seu link mostra uma página com 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.
    – Sergio
    Commented 24/03/2014 às 17:46
  • @Sergio esta alterado o link, o efeito que eu quero é este : tympanus.net/Development/FullscreenOverlayStyles/index12.html clicando no botao "open overlay" ele faz a animacao, no meu caso eh o texto embaixo da foto, quando clicar no link ele faz este efieto, so que ele funciona apenas uma vez
    – Furlan
    Commented 24/03/2014 às 17:48
  • pra esse efeito você precisa desse plugin? não é mais fácil criar um campo com display none com o conteúdo que você quer apresentar na tela e depois dar um fade com js? você teria o mesmo efeito de forma dinâmica, poderia controlar mais fácil o conteúdo e os gatilhos para ativar esse efeito Commented 24/03/2014 às 17:55
  • Você tem o mesmo ID em todos os elementos... ID's são unicas, não podem ser duplicadas.
    – Sergio
    Commented 24/03/2014 às 17:57
  • @RodrigoBorth mas teria que ter aquele efeito, subir e ampliar, como daria pra fazer?
    – Furlan
    Commented 24/03/2014 às 18:00

1 Resposta 1

1

Você pode fazer isso de outra forma, sem usar o plugin

A minha alternativa pra isso seria usar uma div com display none e overflow hidden e no momento do click dar um animate na altura dela...

Seguem os codigos de exemplo

HTML

<div class='Efeito'>
        coloque o conteudo aqui
    </div>
<a class="ativarefeito" href='javascript:void(0)'>Clique para ativa o efeito</a>

CSS

.Efeito{position: absolute; bottom: 0; left: 0; background: red; width: 100%; height: 0; z-index: 9999; opacity: 0.5; overflow: hidden;}

Javascript

$(function(){
    $('.ativarefeito').click(function(){
        $('.Efeito').animate({
            height: '100%'
        });
    });
});

Trabalhando um pouco o código você pode fazer o efeito surgir do ponto que você quiser, até mesmo a partir do centro indo em direção as pontas, esse é apenas o exemplo mais simples que pude fazer, utilizei algo parecido nessa pagina: http://wja.inf.br/Parceiros

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .