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?
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?
Ho impostato lo scroll a 1300 pixel... ma puoi cambiarlo a piacimento.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\">&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>
ohhh ma hai fatto tutto tu, grazie mille!Originariamente inviato da carlomarx
Ho impostato lo scroll a 1300 pixel... ma puoi cambiarlo a piacimento.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\">&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>
senti vado un giorno al marepoi 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!!!
mmmm aiuto XD
possiamo ripensarlo un po'?
allora, guarda, il div che voglio appaia/scompaia allo scorrere della barra è questo:
e gli ho impostato questo css:
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?codice:#nav_2 { display: none; position: fixed; width: 300px; top: 400px; left: 5%; text-align: center; font-size: 14px; }
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>
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 rimuoverteloOriginariamente 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
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>
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
Rispondi quotando