Mostrare div allo scorrimento verticale della pagina (fade-in)

[deleted_20210415]

Salve a tutti ragazzi, vi pongo subito il mio problema. Ho la seguente struttura della pagina:

<section class="maps">
  <div id="aboutus" class="bgParallax" data-speed="15">
    <span class="space"></span>
    <div class="b-text">
      <p>Stupisciti.</p>
      [one_third]
        <div class="hideme">
          <h3 class="parallax">
             <i class="icon-eye-open"></i> La TUA pubblicità
          </h3>
        </div>
      [/one_third]
   </div>
</section>

N.B.: "[one_third]" è uno shortcode di Wordpress.
N.B. 2: Non badate ai nomi dei div e della section, è semplicemente una prova.

L'effetto che vorrei raggiungere come detto in precedenza, è quello in classico stile Apple per intenderci, ovvero l'animazione di un div allo scrolling down della pagina.
Lo stile CSS degli elementi è:

.bgParallax {


font-family: Source Sans Pro;
color:#FFF;
font-weight: 100;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
min-height: 100%;
text-shadow:0 0 10px rgba(0,0,0,0.7);
background-position: 50% 0;
background-repeat: repeat;
background-attachment: fixed;


}


.maps {


height: 400px;
overflow: hidden;


}


.b-text {


padding-top: 40px;


}


.b-text p {


font-size: 100px;
text-align: center;


}


.parallax i {


margin-right: 10px;
color: #05B5FA;
background-color: #FFF;
padding: 10px;
-webkit-text-stroke: 1px;
-moz-text-stroke: 1px;
-ms-text-stroke: 1px;
-o-text-stroke: 1px;
border-radius: 100px;


}


.hideme {


margin-left: -50px;
opacity:0;


}

Ed infine eccovi lo script che ho trovato su un altro forum, che su JSFiddle pareva funzionare:

$(document).ready(function() {
    $(window).scroll( function(){
        $('div.hideme').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
                    }
            }); 
    });
 });

Non so se possa essere un info utile, ma ho implementato direttamente i due script nel flusso del body tra i tag <script>.

Vi ringrazio in anticipo per l'aiuto

[deleted_20210415]

Up

[cavicchiandrea]

ma ho implementato direttamente i due script nel flusso del body tra i tag <script>.

due script e comunque wp ha una logica sua per eseguire operazioni jquery, forse in rete si trova quello che ti serve sotto forma di plugin per wp

[deleted_20210415]

due script e comunque wp ha una logica sua per eseguire operazioni jquery, forse in rete si trova quello che ti serve sotto forma di plugin per wp

Purtroppo ho cercato, ma in rete non trovo davvero nulla sottoforma di plugin
Comunque intendevo solo un tag script, pardon

[cavicchiandrea]

Per capire se un problema script o un conflitto wp crea una pagina di prova con solo lo script e gli oggetti che servono, se funziona almeno restringi il raggio

[deleted_20210415]

Per capire se un problema script o un conflitto wp crea una pagina di prova con solo lo script e gli oggetti che servono, se funziona almeno restringi il raggio

Qui pare funzionare: http://jsfiddle.net/ZP64f/1/

[cavicchiandrea]

Pertanto il problema è lato server wp/php