Page Loading Effects
Доброго времени!
Прошу прощение, но не могли вы мне подсказать, как можно изменить JS из данного примера так чтобы он работал для нескольких оверлеев. http://codepen.io/ArtStyles/pen/QEQNKa В примере есть два div блока (оверлеи) со своими id и есть две кнопки, которые должны открывать конкретный оверлей, но всегда открывается только первый оверлей, если скажем, нажать на вторую кнопку. Кнопок может быть несколько. Замена строчки: currentPage = currentPage ? 0 : 1; на currentPage = currentPage == pages.length - 1 ? 0 : currentPage + 1; результата не даёт. Благодарю всех за помощь. |
Открытие блоков с эффектом svg
artstyles,
<!DOCTYPE html><html class=''> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Loading Effects | Demo 11</title> <meta name="description" content="Page Loading Effects: Modern ways of revealing new content" /> <meta name="keywords" content="page loading, svg animation, loading effect, fullscreen svg" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/PageLoadingEffects/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/PageLoadingEffects/css/demo.css" /> <link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/PageLoadingEffects/css/component.css" /> <script src="http://tympanus.net/Development/PageLoadingEffects/js/snap.svg-min.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="pagewrap" class="pagewrap"> <div class="container show" id="page-1"> <header class="codrops-header"> <h1>Page Loading Effects <span>Modern ways of revealing new content</span></h1> <a class="pageload-link" href="#page-2">Open Overlay #1</a> <a class="pageload-link" href="#page-3">Open Overlay #2</a> <a class="pageload-link" href="#page-4">Open Overlay #3</a> </header> </div><!-- /container --> <!-- Overlay #1 --> <div class="container" id="page-2"> <section> <h2>Overlay #1</h2> <p><a class="pageload-link" href="#page-1">Go back</a></p> </section> </div> <!-- Overlay #1 --> <!-- Overlay #2 --> <div class="container" id="page-3"> <section> <h2>Overlay #2</h2> <p><a class="pageload-link" href="#page-1">Go back</a></p> </section> </div> <!-- Overlay #2 --> <!-- Overlay #2 --> <div class="container" id="page-4"> <section> <h2>Overlay #3</h2> <p><a class="pageload-link" href="#page-1">Go back</a></p> </section> </div> <!-- Overlay #2 --> <div id="loader" class="pageload-overlay" data-opening="m -5,-5 0,70 90,0 0,-70 z m 5,35 c 0,0 15,20 40,0 25,-20 40,0 40,0 l 0,0 C 80,30 65,10 40,30 15,50 0,30 0,30 z"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none" > <path d="m -5,-5 0,70 90,0 0,-70 z m 5,5 c 0,0 7.9843788,0 40,0 35,0 40,0 40,0 l 0,60 c 0,0 -3.944487,0 -40,0 -30,0 -40,0 -40,0 z"/> </svg> </div><!-- /pageload-overlay --> </div><!-- /pagewrap --> <script src="http://tympanus.net/Development/PageLoadingEffects/js/classie.js"></script> <script src="http://tympanus.net/Development/PageLoadingEffects/js/svgLoader.js"></script> <script> (function () { var pageWrap = document.getElementById('pagewrap'), pages = [].slice.call(pageWrap.querySelectorAll('div.container')), currentPage = 0, triggerLoading = [].slice.call(pageWrap.querySelectorAll('a.pageload-link')), loader = new SVGLoader(document.getElementById('loader'), { speedIn: 400, easingIn: mina.easeinout }); function init() { triggerLoading.forEach(function (trigger,i) { trigger.addEventListener('click', function (ev) { ev.preventDefault(); loader.show(); setTimeout(function () { loader.hide(); classie.removeClass(pages[currentPage], 'show'); currentPage = currentPage ? 0 : i + 1; classie.addClass(pages[currentPage], 'show'); }, 800); }); }); } init(); }()); </script> </body></html> |
Спасибо! Всё отлично работает.
|
Часовой пояс GMT +3, время: 16:14. |