Add elements via Javascript from the database

Asked

Viewed 153 times

0

I’m using an effect of Full Screen Overlay in my website, this effect I caught on Codrops. It is working normal though, as I am searching for data in the BD, how to make it work not only on one button, but as several?

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>
javascript php

  • Your link shows a page with DESCULPE, ESSA PÁGINA NÃO EXISTE. You can be clearer in the question explaining the effect you want? I saw the other link too but I didn’t realize what effect you want. Put your code here too so we can help.

  • @Sergio changed the link, the effect I want is this : http://tympanus.net/Development/FullscreenOverlayStyles/index12.html by clicking on the "open overlay" button he makes the animation, in my case it is the text below the photo, when clicking on the link he makes this efficiency, only that it works only once

  • For this purpose you need this plugin? Isn’t it easier to create a field with display None with the content you want to present on the screen and then fade with js? you would have the same effect dynamically, could control easier content and triggers to activate this effect

  • You have the same ID on all elements... ID’s are unique, can not be duplicated.

  • @Rodrigoborth but it would have to have that effect, go up and zoom in, like you could do?

  • you can do with Animate, put possition Absolute and bottom 0; then an Animate to height 100% and join with a fadein that will get the same effect

  • fuck I have no knowledge in js, you can help me to mount in jsfiddle ?

  • actually I think you can not use the fadein and the Animate at the same time, but you can use the Animate since the background has opacity the effect is very similar

  • I’ll see if I can set up a quick one here and send you

  • OK, vlw @Rodrigoborth

  • http://jsfiddle.net/ZPjxu/1/

  • js fiddle does not work, but if you move to a file you can see working

  • and it also became very simple to understand the logic

  • could not rotate

  • as I said, fiddle does not work because it does not accept, some CSS attributes as position for example, put the answer, passes it to a file that you will be able to run well

Show 10 more comments

1 answer

1


You can do it otherwise without using the plugin

My alternative to this would be to use a div with display None and overflow Hidden and at the time of the click give an Animate at her height...

Follow the example codes

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%'
        });
    });
});

Working a little bit the code you can make the effect arise from the point you want, even from the center going towards the tips, this is just the simplest example I could do, I used something similar on this page: http://wja.inf.br/Partners

  • http://pastebin.com/m5XnG0mq I’m not getting it

  • I got it on Codepen

Browser other questions tagged javascript php

You are not signed in. Login or sign up in order to post.