PROBLEMA Animazione a scomparsa HomePage sito web (Wordpress)

[Gabreturns]

Buongiorno a tutti,

sto realizzando un piccolo sito web tramite WordPress e avevo in mente di inserire, all'apertura della home page, una animazione a scomparsa che riveli dopo un tot di ms il contenuto effettivo della homepage.

Nel dettaglio, vorrei che ci fosse qualcosa di simile alle porte di un ascensore che, aprendosi, facciano vedere la homepage già progettata. Avete idee o consigli su come fare? Sto usando il plugin elementor su un tema pre-impostato (e forse questo complica un po' le cose).

Si potrebbe utilizzare z-index per sovrapporre l'immagine alla homepage e css per fare in modo che scompaia?

Grazie in anticipo per le risposte.

 

[BigIssue]

sto realizzando un piccolo sito web tramite WordPress e avevo in mente di inserire, all'apertura della home page, una animazione a scomparsa che riveli dopo un tot di ms il contenuto effettivo della homepage.

Per l'effetto ascensore potresti usare jQuery.
Invece per mostrare il contenuto sempre jQuery con una richiesta ajax che viene eseguita da un timer ogni n secondi, la prima volta per recuperare il contenuto se questo non cambia trascorso questo tempo.

<script language="Javascript">
function timeout_content_lift() {
     //la funzione una sola volta restituisce il contenuto dell'ascensore.
   
     $.ajax('/jquery/getjsondata/contentlift',
     {
           dataType: 'json', // type of response data
           timeout: 500,     // timeout milliseconds
           success: function (data,status,xhr) {
           //il contenuto dell'ascensore è sostituito con i dati risultati della chiamata ajax
           $('#idwrapperlift').html(data.html);

           $(document).on('hide','#idwrapperlift  .wrapperliftpanelleft', { direction: "left", duration: 1000 },function(){
                             // codice
           });

    },
    error: function (jqXhr, textStatus, errorMessage) {
        $('div').append('Error: ' + errorMessage);
    }
});
}

jQuery(document).ready(function () {

     //al caricamento dell DOM della pagina, esegui dopo 4 secondi la funzione timeout_content_lift
   
    //hide a div after 4 seconds
    setTimeout( timeout_content_lift }, 4000);
});

</script>

Spero sia stato utile. Sarebbe meglio che postassi il nome plugin o il template di wordpress che usi se ti è possibile.

 

[Gabreturns]

Per l'effetto ascensore potresti usare jQuery.
Invece per mostrare il contenuto sempre jQuery con una richiesta ajax che viene eseguita da un timer ogni n secondi, la prima volta per recuperare il contenuto se questo non cambia trascorso questo tempo.

<script language="Javascript">
function timeout_content_lift() {
     //la funzione una sola volta restituisce il contenuto dell'ascensore.
 
     $.ajax('/jquery/getjsondata/contentlift',
     {
           dataType: 'json', // type of response data
           timeout: 500,     // timeout milliseconds
           success: function (data,status,xhr) {
           //il contenuto dell'ascensore è sostituito con i dati risultati della chiamata ajax
           $('#idwrapperlift').html(data.html);

           $(document).on('hide','#idwrapperlift  .wrapperliftpanelleft', { direction: "left", duration: 1000 },function(){
                             // codice
           });

    },
    error: function (jqXhr, textStatus, errorMessage) {
        $('div').append('Error: ' + errorMessage);
    }
});
}

jQuery(document).ready(function () {

     //al caricamento dell DOM della pagina, esegui dopo 4 secondi la funzione timeout_content_lift
 
    //hide a div after 4 seconds
    setTimeout( timeout_content_lift }, 4000);
});

</script>

Spero sia stato utile. Sarebbe meglio che postassi il nome plugin o il template di wordpress che usi se ti è possibile.

Il plugin che sto utilizzando si chiama "Elementor", il template, invece, "Highlight" di ExtendThemes

Posso chiederti maggiori informazioni?
Per aggiungere il codice javascript sarebbe più opportuno creare un child theme? E poi il codice dove andrebbe inserito?

 

[BigIssue]

Per aggiungere il codice javascript sarebbe più opportuno creare un child theme? E poi il codice dove andrebbe inserito?

Stavo vedendo anch'io come poterlo integrare nel plugin elementor perchè cosi non saprei dirti, Ti direi la stupidaggine: inseriscilo in testa prima dell'head assieme alla libreria jquery, nella pagina del tema dove è caricato lo script del plugin elementor ma vedendo il sito è tutto integrato e con drag and drop e non è cosi. Comunque verso sera provo a scaricare il plugin e il tema e vi dico.

 

[Gabreturns]

Stavo vedendo anch'io come poterlo integrare nel plugin elementor perchè cosi non saprei dirti, Ti direi la stupidaggine: inveseito in testa prima dell'head assieme alla libreria jquery, nella pagina del tema dove è caricato lo script del plugin elementor ma vedendo il sito è tutto integrato e con drag and drop e non è cosi. Comunque verso sera provo a scaricare il plugin e il tema e vi dico.

In realtà non necessariamente devo usare né "Elementor" né "ExtendThemes" con highlight. Ci sono dei plugin/temi che mi consiglieresti di usare e che diano la possibilità di integrare, più semplicemente, il tuo codice javascript?

 

[BigIssue]

In realtà non necessariamente devo usare né "Elementor" né "ExtendThemes" con highlight. Ci sono dei plugin/temi che mi consiglieresti di usare e che diano la possibilità di integrare, più semplicemente, il tuo codice javascript?

Niente non mi fa scaricare Elementor e il tema Highlight. Ho provato a mano a impostare l'effetto ascensore. Ma il pannello di apertura svanisce non rimanendo nel panello principale. E' giusto come fa il fade solo che lo fa considerando l'intera pagina.

html gabreturns.html

<html>
    <head>
    <link href="file:///C:\Users\franc\Documents\wordpress\gabreturnscss.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){
    
        $('#slide').click(function(){
                $(".leftopen").animate({"left":"-1000px"},"slow");
                $(".rightopen").animate({"right":"-1000px"},"slow");
            
        });
    });
    </script>
    
    </head>
    <body>


        <div class="clear"></div>                         
        <div class="left" style="">
                <div class="leftopen" style="">Open 1</div>
              <div class="rightopen" style="">Open 2</div>
        </div>
        <div class="clear"></div>


        <a href="#" id="slide">show/hide open</a>
    </body>
</html>

css gabreturnscss.css

.left, .hidden {
    float: left;
    height:350px;
}


.left {
    width: 50%;
    background: blue;
    z-index:1;
}


.right {
    width:50%;
    z-index: 1;
    float: right;
    height:350px;
    background:#000;
    color:#fff;
}


.clear {
    clear:both;
}


.leftopen{
    display: block;
    height: 100px;
    width:25%;
    z-index:2;
    position:fixed;
    left:8px;
    background:#f90;
    color:#000;
}


.rightopen{
    display: block;
    height: 100px;
    width:25%;
    z-index:2;
    position:absolute;
    right:760px;
    background:green;
    float:right;
    color:#000;
}

Se riesci a sistemarlo posta pure la soluzione.