Visualizzazione dei risultati da 1 a 7 su 7

Visualizzazione discussione

  1. #1

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

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

    codice:
    <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 è:

    codice:
    .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:

    codice:
    $(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
    Ultima modifica di deleted_20210415; 22-10-2013 a 22:26

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.