Non so come far mostrare i div nascosti con il plug-in animatescroll e jquery al click sul link:
qui l'html:
codice:<!doctype html><html> <head> <meta charset="UTF-8"> <title>Super Super Test</title> <link href="css/Super Test.css" rel="stylesheet" type="text/css"> <script src="jquery-2.1.0.min.js"></script> <script src="animatescroll.js"></script> <style type="text/css"> body { background-color: #CCC;} </style> </head> <body> <div id="pagina"> <div id="home"> <h1> TEST prima pagina </h1> Questa è prima <hr> <h1><a onclick="$('#articolo').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});">Avanti ></a></h1> </div> <div id="articolo"> <h1> TEST seconda pagina </h1> Questa è la seconda <hr> <h1><a onclick="$('#home').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});"> < Indietro</a></h1> <h1><a onclick="$('#footer').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});">Avanti ></a></h1> </div> <div id="footer"> <h1> TEST terza pagina </h1> Questo è la terza <hr> <h1><a onclick="$('#home').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});"> < Indietro</a></h1> </div> </div> </body> </html>
qui il CSS:
codice:#pagina { width: 800px; height: 800px; overflow:hidden;} #pagina #home { width: 800px; height: 800px; background-color: #2e9422; } #pagina #articolo { width: 800px; height: 800px; background-color: #e74c3c; } #pagina #footer { width: 800px; height: 800px; background-color: #fffb82; } a { text-decoration: none; cursor: pointer; } h1 { width: 300px; display: inline-block; }
Rispondi quotando
