Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113

    animazione dopo scrolling

    Salve a tutti, volevo sapere come si fanno a fare quelle animazioni che partono dopo lo scrolling della barra verticale.... vorrei far apparire un elemento contenuto in un div dopo aver spostato la suddetta barra verticale... con jquery è possibile immagino, giusto?

  2. #2
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    per spiegare meglio cosa intendo, mi riferisco alla comparsa della freccia in alto a destra dell'home page di tumblr https://www.tumblr.com/

    se scorrete verso il basso per un po' comparirà... ecco, come si ottiene questo effetto?

  3. #3
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Esempio</title>
    <script type="text/javascript">
    	var bArrow = false, oArrow = document.createElement("div");
    	oArrow.id = "frecciaSu";
    	oArrow.innerHTML = "<a href=\"#topPagina\" title=\"Torna su\">&amp;uarr;<\/a>";
    
    	window.onscroll = function() {
    		var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    		bArrow = scrollY > 1300 ? 
    			bArrow || (document.body.appendChild(oArrow), true)
    			: bArrow && (document.body.removeChild(oArrow), false);
    	};
    </script>
    <style type="text/css">
    #frecciaSu {
    	position: fixed;
    	height: auto;
    	width: auto;
    	left: 10px;
    	top: 10px;
    	font-size: 36px;
    }
    #frecciaSu a { text-decoration: none; }
    </style>
    </head>
    
    <body>
    
    </body>
    
    </html>
    Ho impostato lo scroll a 1300 pixel... ma puoi cambiarlo a piacimento.

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    Originariamente inviato da carlomarx
    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Esempio</title>
    <script type="text/javascript">
    	var bArrow = false, oArrow = document.createElement("div");
    	oArrow.id = "frecciaSu";
    	oArrow.innerHTML = "<a href=\"#topPagina\" title=\"Torna su\">&amp;uarr;<\/a>";
    
    	window.onscroll = function() {
    		var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    		bArrow = scrollY > 1300 ? 
    			bArrow || (document.body.appendChild(oArrow), true)
    			: bArrow && (document.body.removeChild(oArrow), false);
    	};
    </script>
    <style type="text/css">
    #frecciaSu {
    	position: fixed;
    	height: auto;
    	width: auto;
    	left: 10px;
    	top: 10px;
    	font-size: 36px;
    }
    #frecciaSu a { text-decoration: none; }
    </style>
    </head>
    
    <body>
    
    </body>
    
    </html>
    Ho impostato lo scroll a 1300 pixel... ma puoi cambiarlo a piacimento.
    ohhh ma hai fatto tutto tu, grazie mille!
    senti vado un giorno al mare poi torno e ti dico se funziona, cioè, lo devo modificare un po' che voglio fare apparire solo un pezzo di nav (un nav nuovo cioè) e un'immagine al posto della freccia, magari va storto qualcosa e mi assisti

    ciaaooo grazie mille ancora!!!

  5. #5
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    mmmm aiuto XD
    possiamo ripensarlo un po'?
    allora, guarda, il div che voglio appaia/scompaia allo scorrere della barra è questo:

    codice:
    <div id="nav_2">
    [img]img/handsoverhands.png[/img]
    
    
    about - contact</p>
    </div>
    e gli ho impostato questo css:

    codice:
    #nav_2 {
       display: none;
       position: fixed;
       width: 300px;
       top: 400px;
       left: 5%;
       text-align: center;
       font-size: 14px;
    }
    ovvero un display: none che dovrebbe perdere di efficacia allo scorrere della barra. c'è un modo più semplice di realizzarlo ora che ti ho dato queste info?

  6. #6
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Senza il display: none.

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Esempio</title>
    <script type="text/javascript">
    	var bTopBtnOn = false, oTopBtn = document.createElement("div");
    	oTopBtn.id = "nav_2";
    	oTopBtn.innerHTML = "<img src=\"img\/handsoverhands.png\">
    
    <a href=\"\/about\">about<\/a> - <a href=\"\/contact\">contact<\/a><\/p>";
    
    	window.onscroll = function() {
    		var nScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    		bTopBtnOn = nScrollTop > 1300 ? 
    			bTopBtnOn || (document.body.appendChild(oTopBtn), true)
    			: bTopBtnOn && (document.body.removeChild(oTopBtn), false);
    	};
    </script>
    <style type="text/css">
    #nav_2 {
       position: fixed;
       width: 300px;
       top: 400px;
       left: 5%;
       text-align: center;
       font-size: 14px;
    }
    </style>
    </head>
    
    <body>
    
    </body>
    
    </html>

  7. #7
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    mhhh se tolgo il display: none però tutto il div è già lì dall'inizio e un altro gli si sovrappone dopo

  8. #8
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Originariamente inviato da Ines_88
    mhhh se tolgo il display: none però tutto il div è già lì dall'inizio e un altro gli si sovrappone dopo
    Devi eliminare il div dall'HTML!!!! Ci pensa js a creartelo e rimuovertelo

  9. #9
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Oppure se vuoi il div nell'HTML devi fare così:

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Esempio</title>
    <script type="text/javascript">
    	onscroll = function () {
    		document.getElementById("nav_2").style.display = (document.documentElement.scrollTop || document.body.scrollTop) > 1300 ? "block" : "none";
    	};
    </script>
    <style type="text/css">
    #nav_2 {
       display: none;
       position: fixed;
       width: 300px;
       top: 400px;
       left: 5%;
       text-align: center;
       font-size: 14px;
    }
    </style>
    </head>
    
    <body>
    <div id="nav_2">[img]img/handsoverhands.png[/img]
    
    about - contact</p></div>
    </body>
    
    </html>

  10. #10
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    hahah giusto, molto ingegnoso, complimenti funziona!!!

    senti avrei un'ultimissima domanda, anzi due!

    la prima è: perchè tutti quei \ / all'interno del codice? se metto altri <a href=""> mi crea un po' di problemi.

    la seconda è: siccome quando vado sopra le immagini avrei messo questo codice
    img {-webkit-transition-duration: .2s;}
    img:hover {opacity: .6;})

    per creare delle dissolvenze, adesso mi piacerebbe far sì che la comparsa/scomparsa di questo div avvenisse appunto in dissolvenza in entrata/uscita e non di botto. se lavorassi in un file .js tutto mio metterei qualcosa tipo:

    $(document).ready(
    function(){
    var durata = 600;
    $("#nav_2").fadeIn(durata);
    })

    ma adesso non so come implementarlo all'interno del tuo script

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 © 2020 vBulletin Solutions, Inc. All rights reserved.