animazione dopo scrolling

scegli un altro forum

Indietro Ricarica Avanti

Autore

Discussione

Ines_88
Utente di HTML.it

Registrato il: Jun 2010

Provenienza:

Messaggi: 96

ICQ:

MSN:

Skype:

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?

Segnala ad un moderatore | IP: Collegato | Permalink

18-07-2012 22:54

Clicca qui per inviare all'utente Ines_88 un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente Ines_88

Aggiungi l'utente Ines_88 alla tua lista degli utenti amici

Ines_88
Utente di HTML.it

Registrato il: Jun 2010

Provenienza:

Messaggi: 96

ICQ :

MSN :

Skype :

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?

Segnala ad un moderatore | IP: Collegato | Permalink

19-07-2012 09:23

carlomarx
Utente di HTML.it

Registrato il: Oct 2009

Provenienza:

Messaggi: 1544

ICQ :

MSN :

Skype :

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>

Ho impostato lo scroll a 1300 pixel... ma puoi cambiarlo a piacimento.

Ultima modifica ad opera dell'utente carlomarx il 19-07-2012 alle 10:49

Segnala ad un moderatore | IP: Collegato | Permalink

19-07-2012 10:34

Clicca qui per inviare all'utente carlomarx un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente carlomarx

Aggiungi l'utente carlomarx alla tua lista degli utenti amici

Ines_88
Utente di HTML.it

Registrato il: Jun 2010

Provenienza:

Messaggi: 96

ICQ :

MSN :

Skype :

Citazione:

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\">&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!!!

Segnala ad un moderatore | IP: Collegato | Permalink

20-07-2012 07:50

Ines_88
Utente di HTML.it

Registrato il: Jun 2010

Provenienza:

Messaggi: 96

ICQ :

MSN :

Skype :

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 src="img/handsoverhands.png">
<p><a href="/about">about</a> - <a href="/contact">contact</a></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?

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 12:56

carlomarx
Utente di HTML.it

Registrato il: Oct 2009

Provenienza:

Messaggi: 1544

ICQ :

MSN :

Skype :

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\"><p><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>

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 13:00

Ines_88
Utente di HTML.it

Registrato il: Jun 2010

Provenienza:

Messaggi: 96

ICQ :

MSN :

Skype :

mhhh se tolgo il display: none però tutto il div è già lì dall'inizio e un altro gli si sovrappone dopo

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 13:56

carlomarx
Utente di HTML.it

Registrato il: Oct 2009

Provenienza:

Messaggi: 1544

ICQ :

MSN :

Skype :

Citazione:

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

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 14:00

carlomarx
Utente di HTML.it

Registrato il: Oct 2009

Provenienza:

Messaggi: 1544

ICQ :

MSN :

Skype :

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 src="img/handsoverhands.png"><p><a href="/about">about</a> - <a href="/contact">contact</a></p></div>
</body>

</html>

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 14:05

Ines_88
Utente di HTML.it

Registrato il: Jun 2010

Provenienza:

Messaggi: 96

ICQ :

MSN :

Skype :

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

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 14:24

Ines_88
Utente di HTML.it

Registrato il: Jun 2010

Provenienza:

Messaggi: 96

ICQ :

MSN :

Skype :

ah ok, grande, ho visto ora il secondo metolo, mi piace di più è uno script più semplice e non mi da quei problemi con gli slash

puoi rispondere solo alla seconda domanda se vuoi

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 14:32

carlomarx
Utente di HTML.it

Registrato il: Oct 2009

Provenienza:

Messaggi: 1544

ICQ :

MSN :

Skype :

Boh, guarda, te lo dico sinceramente: di jQuery non ci capisco un'acca. Se intendi usare quel framework devi chiedere aiuto a qualcun altro... Io al massimo posso dirti al volo come realizzarlo in puro javascript....

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
(function () {
	function switchOpacity () {
		if ((bShow && nCnt + 1 > nFrames) || (!bShow && nCnt < 1) ) {
			clearInterval(nIntervId);
			bStill = true;
			bVisible = bShow;
			return;
		}
		var oStyle = document.getElementById("nav_2").style;
		if (bShow && nCnt === 0) { oStyle.display = "block"; }
		if (bShow) { nCnt++; } else { nCnt--; }
		oStyle.opacity = nCnt / nFrames;
		if (!bShow && nCnt === 0) { oStyle.display = "none"; }
	}

	onscroll = function () {
		var bScrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 1300;
		if (bVisible === bScrolled) { return; }
		bShow = bScrolled;
		if (bStill) {
			nIntervId = setInterval(switchOpacity, nFRate);
			bStill = false;
		}
	};

	var
		nIntervId, bStill = bShow = true, bVisible = false, nCnt = 0,
		nFrames = 8, nFRate = 50;
})();
</script>
<style type="text/css">
#nav_2 {
   opacity: 0;
   display: none;
   position: fixed;
   width: 300px;
   top: 400px;
   left: 5%;
   text-align: center;
   font-size: 14px;
}
</style>
</head>

<body>

<div id="nav_2"><img src="img/handsoverhands.png"><p><a href="/about">about</a> - <a href="/contact">contact</a></p></div>

</body>
</html>

La variabile nFrames indica il numero di fotogrammi. La variabile nFRate indica la durata di ogni fotogramma in millisecondi. Puoi modificarle a piacimento...

Segnala ad un moderatore | IP: Collegato | Permalink

26-07-2012 16:50

Tutte le ore sono con fuso orario CET. Ora sono le 21:01.

Ultima discussione Prossima discussione

HTML.it forumLato clientJavaScriptanimazione dopo scrolling

Versione per la stampa |

Invia il thread via email |

Ricevi aggiornamenti sul thread |

Scarica il thread

ciao Unregistered

HTML.it forumLato clientJavaScriptanimazione dopo scrolling

animazione dopo scrolling

HTML.it forumLato clientJavaScriptanimazione dopo scrolling

Cerchi un argomento specifico e hai fretta? Usa il motore di ricerca