Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                	<div id="wrapper">
		<ul class="area_menu-main">
			<li>
				<a href="http://www.stariki.team/html-template" alt="">Html template</a>
			</li>
			<li>
				<a href="#" alt="">Проекты</a>
			</li>
			<li>
				<a href="#" alt="">Сказки</a>
			</li>
		</ul>
		<div id="book_environment">
			<div id="control">
				<a id="pressLeft" href="#" alt="left">Влево</a>
				<a id="pressRight" href="#" alt="right">Вправо</a>
			</div>
			<div id="book" class="">
				<img src="http://www.stariki.team/image/0022_cssbook/message.png" alt="колобок" class="picture_preloader">
				<div class="page_project page-first page-open">
					<div class="page_side_left">
						<img src="http://www.stariki.team/image/0022_cssbook/book_cover.jpg" alt="колобок" class="picture_book">
					</div>
					<div class="page_side_right">
						<div class="working_area">
							<h1>
								Русская народная сказка "Колобок"
							</h1>
							<img src="http://www.stariki.team/image/0022_cssbook/kolobok.jpg" alt="колобок" class="picture_article">
						</div>
					</div>
				</div>
				<div class="page_project page-open">
					<div class="page_side_left">
						<div class="working_area">
							<p class="markletter texts">
								Жили-были старик со старухой.<br>
								Вот и говорит старик старухе:<br>
								— Поди-ка, старуха, по коробу поскреби, по сусеку помети, не наскребешь ли муки на колобок.<br><br>
								Взяла старуха крылышко, по коробу поскребла, по сусеку помела и наскребла муки горсти две.<br>
								Замесила муку на сметане, состряпала колобок, изжарила в масле и на окошко студить положила.<br><br>
								Колобок полежал, полежал, взял да и покатился — с окна на лавку, с лавки на пол, по полу к двери,<br>
								прыг через порог — да в сени, из сеней на крыльцо, с крыльца на двор, со двора за ворота, дальше и дальше.<br>
							</p>
						</div>
					</div>
					<div class="page_side_right">
						<div class="working_area">
							<img src="http://www.stariki.team/image/0022_cssbook/kolob_gulut1.jpg" alt="колобок идет гулять" class="picture_article">
							<br><br>
							<p class="markletter texts">
								Катится Колобок по дороге, навстречу ему Заяц:
								— Колобок, Колобок, я тебя съем!
								— Не ешь меня, Заяц, я тебе песенку спою:
							</p>
						</div>
					</div>
				</div>
				<div class="page_project page-open">
					<div class="page_side_left">
						<div class="working_area">
							<p class="poems">
								Я Колобок, Колобок,<br>
								Я по коробу скребен,<br>
								По сусеку метен,<br>
								На сметане мешон<br>
								Да в масле пряжон,<br>
								На окошке стужон.<br>
							</p>
							<br><br><br><br>
							<img src="http://www.stariki.team/image/0022_cssbook/kolob_zayc1.jpg" alt="колобок и заяц" class="picture_article">
						</div>
					</div>
					<div class="page_side_right">
						<div class="working_area">
							<p class="poems">
								Я от дедушки ушел,<br>
								Я от бабушки ушел,<br>
								От тебя, зайца, подавно уйду!<br>
							</p>
							<br>
							<p class="texts">
								И покатился по дороге — только Заяц его и видел!
							</p>
							<br>
							<p class="markletter texts">
								Катится Колобок, навстречу ему Волк:<br>
								— Колобок, Колобок, я тебя съем!<br>
								— Не ешь меня, Серый Волк, я тебе песенку спою:<br>
							</p>
							<br><br>
							<p class="poems">
								Я Колобок, Колобок,<br>
								Я по коробу скребен,<br>
								По сусеку метен,<br>
								На сметане мешон<br>
								Да в масле пряжон,<br>
								На окошке стужон.<br>
							</p>
						</div>
					</div>
				</div>
				<div class="page_project page-open">
					<div class="page_side_left">
						<div class="working_area">
							<p class="poems">
								Я от дедушки ушел,<br>
								Я от бабушки ушел,<br>
								Я от зайца ушел,<br>
								От тебя, волк, подавно уйду!
							</p>
							<br>
							<p class="texts">
								И покатился по дороге — только Волк его и видел!
							</p>
							<br>
							<img src="http://www.stariki.team/image/0022_cssbook/kolob_volk1.jpg" alt="колобок идет гулять" class="picture_article">
						</div>
					</div>
					<div class="page_side_right">
						<div class="working_area">
							<p class="markletter texts">
								Катится Колобок, навстречу ему Медведь:<br>
								— Колобок, Колобок, я тебя съем!<br>
								— Где тебе, косолапому, съесть меня!
							</p>
							<br><br>
							<p class="poems">
								Я Колобок, Колобок,<br>
								Я по коробу скребен,<br>
								По сусеку метен,<br>
								На сметане мешон<br>
								Да в масле пряжон,<br>
								На окошке стужон.<br>
								Я от дедушки ушел,<br>
								Я от бабушки ушел,<br>
								Я от зайца ушел,<br>
							</p>

						</div>
					</div>
				</div>
				<div class="page_project page-open">
					<div class="page_side_left">
						<div class="working_area">
							<p class="poems">
								Я от волка ушел,<br>
								От тебя, медведь, подавно уйду!
							</p>
							<br><br>
							<p class="texts">
								И опять покатился — только Медведь его и видел!
							</p>
							<br><br>
							<img src="http://www.stariki.team/image/0022_cssbook/kolob_medved1.jpg" alt="колобок идет гулять" class="picture_article">
						</div>
					</div>
					<div class="page_side_right">
						<div class="working_area">
							<p class="markletter texts">
								Катится Колобок, навстречу ему Лиса:<br>
								— Колобок, Колобок, куда катишься?<br>
								— Качусь по дорожке.<br>
								— Колобок, Колобок, спой мне песенку!<br>
								Колобок и запел:<br>
							</p>
							<br><br>
							<p class="poems">
								Я Колобок, Колобок,<br>
								Я по коробу скребен,<br>
								По сусеку метен,<br>
								На сметане мешон<br>
								Да в масле пряжон,<br>
								На окошке стужон.<br>
								Я от дедушки ушел,<br>
								Я от бабушки ушел,<br>
								Я от зайца ушел,<br>
								Я от волка ушел,<br>
							</p>
						</div>
					</div>
				</div>
				<div class="page_project page-open">
					<div class="page_side_left">
						<div class="working_area">
							<p class="poems">
								От медведя ушел,<br>
								От тебя, лисы, нехитро уйти!<br>
							</p>
							<br><br>
							<p class="texts">
								А Лиса говорит:<br>
								— Ах, песенка хороша, да слышу я плохо. Колобок, Колобок, сядь ко мне на носок да спой еще разок, погромче.<br>
							</p>
							<br><br>
							<img src="http://www.stariki.team/image/0022_cssbook/kolobok_lisa1.jpg" alt="колобок идет гулять" class="picture_article">
						</div>
					</div>
					<div class="page_side_right">
						<div class="working_area">
							<p class="texts">
								Колобок вскочил Лисе на нос и запел погромче ту же песенку.<br><br>
								А Лиса опять ему:<br>
								— Колобок, Колобок, сядь ко мне на язычок да пропой в последний разок.
								Колобок прыг Лисе на язык, а Лиса его — гам! — и съела.
							</p>
							<br><br>
							<img src="http://www.stariki.team/image/0022_cssbook/final_fox.jpg" alt="колобок идет гулять" class="picture_article">
						</div>
					</div>
				</div>
				<div class="page_project page-last page-open">
					<div class="page_side_left">
						<div class="working_area">
							<p class="markletter texts">
								Вот и сказке конец!
								А кто слушал - огурец!
							</p>
						</div>
					</div>
					<div class="page_side_right">
						<img src="http://www.stariki.team/image/0022_cssbook/book_cover.jpg" alt="колобок" class="picture_book">
					</div>
				</div>
			</div>
		</div>
	</div>
              
            
!

CSS

              
                @-webkit-keyframes flip-right-to-left {
	 0% {
		 -webkit-transform: rotateY(0);
		 transform: rotateY(0);
	 }
	 100% {
		 -webkit-transform: rotateY(-180deg);
		 transform: rotateY(-180deg);
	 }
 }
@keyframes flip-right-to-left {
	0% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}
	100% {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
}

@-webkit-keyframes flip-left-to-right {
	0% {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	100% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}
}
@keyframes flip-left-to-right {
	0% {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	100% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}
}

.flip-left-to-right {
	-webkit-animation: flip-left-to-right 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	animation: flip-left-to-right 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

.flip-right-to-left {
	-webkit-animation: flip-right-to-left 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	animation: flip-right-to-left 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin:0;
	font-family: TTLimesSlab;
	background-color: black;
	overflow: hidden;
}

body {
	background: url(http://www.stariki.team/image/0022_cssbook/zamok.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#pressLeft {
	float: left;
}

#pressRight {
	float: right;
}

a {
	display: block;
	font-size: 36px;
	width: 140px;
	text-align: center;
}

a:active, a:visited, a:link {
	color: white;
	border: 2px solid white;
	transition: .5s;
	text-decoration: none;
}

a:hover {
	color: #0b0047;
	border: 2px solid #0b0047;
	background-color: white;
	transition: .5s;
}

#wrapper {
	width: 100%;
	height: 100%;
}

#book_environment {
	/*padding: 60px 0px 0px 0px;*/
	width: 1140px;
	height: 760px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transform: rotateX(5deg);
	transform: rotateX(5deg);
}

img.picture_preloader {
	position: absolute;
	width: 500px;
	height: 350px;
	left: 30px;
	top: 150px;
	z-index: 999;
}

#control {
	width: 100%;
	height: 60px;
}

#book {
	width: 570px;
	height: 700px;
	perspective: 2500px;
	transition: 1s;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.page_project {
	position: absolute;
	width: 570px;
	height: 700px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform-origin: center left;
	right: 0;
}

h1 {
	color: #0b0047;
	text-align: center;
	margin: 0px 0px 16px 0px;
}

.page_side_left, .page_side_right {
	position: absolute;
	width: 100%;
	backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	height: 700px;
}

.page_side_left {

	background-color: #fdfdfd;
	/* IE9, iOS 3.2+ */
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45MjQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZDNkM2QzIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN2c2dnKSIgLz48L3N2Zz4=);
	background-image: -webkit-gradient(linear, 100% 0%, 0% 0%,color-stop(0.924, rgb(238, 238, 238)),color-stop(1, rgb(211, 211, 211)));
	/* Android 2.3 */
	background-image: -webkit-linear-gradient(right,rgb(238, 238, 238) 92.4%,rgb(211, 211, 211) 100%);
	/* IE10+ */
	background-image: linear-gradient(to left,rgb(238, 238, 238) 92.4%,rgb(211, 211, 211) 100%);
	background-image: -ms-linear-gradient(right,rgb(238, 238, 238) 92.4%,rgb(211, 211, 211) 100%);

}

.page_side_right {
	transform-origin: center center;
	transform: rotateY(180deg);

	background-color: #fdfdfd;
	/* IE9, iOS 3.2+ */
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZDNkM2QzIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjA4Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
	background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, color-stop(0, rgb(211, 211, 211)), color-stop(0.08, rgb(238, 238, 238)));
	/* Android 2.3 */
	background-image: -webkit-linear-gradient(right, rgb(211, 211, 211) 0%, rgb(238, 238, 238) 8%);
	/* IE10+ */
	background-image: linear-gradient(to left, rgb(211, 211, 211) 0%, rgb(238, 238, 238) 8%);
	background-image: -ms-linear-gradient(right, rgb(211, 211, 211) 0%, rgb(238, 238, 238) 8%);

}

.working_area {
	padding: 48px;
}

.page_side_left p.texts, .page_side_right p.texts  {
	font-size: 28px;
	color: #0b0047;
	text-align:justify;
	display: block;
	margin: 0;
}

p.markletter:first-letter {
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	color: red;
}

p.poems {
	text-align: center;
	font-style: italic;
	font-size: 28px;
	color: #0b0047;
	display: block;
	margin: 0;
}


.picture_article {
	width: 100%;
	height: auto;
}

.picture_book {
	width: calc(100% + 2px);
	height: auto;
	display: block;
	margin: 0 auto;
	margin-left: -2px;
	margin-top: -2px;
}

.area_menu-main {
	text-align: center;
	margin: 0;
	padding: 0;
}

.area_menu-main li {
	min-width: 140px;
	display:inline-block;
	font-size: 24px;
}

/* Настраиваем оформление пунктов меню */
.area_menu-main li a {
	display:block;
	font-size: .9em;
	color: #eee;
	letter-spacing: 1px;
	text-decoration: none;
}

.area_menu-main li > a:hover {
	color: #0b0047;
}
              
            
!

JS

              
                    let allPagesProject = document.getElementsByClassName('page_project');

    if (allPagesProject.length !== 0) {
        for (var y = 0; y < allPagesProject.length; y++)
        {
            allPagesProject[y].setAttribute('data-number', y.toString());
            allPagesProject[y].style.zIndex = (500-(y+1)).toString();
        }
    }
    else {

        console.log('Страниц книги не найдено');

    }

    // Присвоим нулевой странице обработчик
    allPagesProject[0].addEventListener('click', pageclick);

    // Найдем кнопку влево и прикрепим листенер
    let leftButton = document.getElementById('pressLeft');
    leftButton.addEventListener('click', leftClick);

    // Найдем кнопку вправо и прикрепим листенер
    let rightButton = document.getElementById('pressRight');
    rightButton.addEventListener('click', rightClick);

    setTimeout(killPreloader, 3000);

    function killPreloader() {

        let preloader = document.getElementsByClassName('picture_preloader');
        preloader[0].style.display = "none";

    }


function leftClick() {

    var allPagesProject = document.getElementsByClassName('page_project');
    let target;

    if (allPagesProject.length !== 0) {
        for (var y = allPagesProject.length-1; y > -1; y--)
        {

            if (allPagesProject[y].classList.contains('page-turned')) {
                target = allPagesProject[y];
                break;
            }

        }
    }

    if (typeof (target) != "undefined") performOperation(target, 'back');

}

function rightClick() {

    var allPagesProject = document.getElementsByClassName('page_project');
    let target;

    if (allPagesProject.length !== 0) {
        for (var y = 0; y < allPagesProject.length; y++)
        {

            if (allPagesProject[y].classList.contains('page-open')) {
                target = allPagesProject[y];
                break;
            }

        }
    }

    if (typeof (target) != "undefined") performOperation(target, 'forward');

}

function pageclick(e) {

    if( !e ) e = window.event;
    var target = e.target||e.srcElement;

    while ((!target.classList.contains('page_project')) && (target.tagName != 'body')) {
        target = target.parentElement;
    }

    // Работаем дальше, только если в дереве DOM была найдена страница книги
    if (target.classList.contains('page_project')) expertSystem(target);

}

// Экспертная система при щелчке по странице в google chrome
function expertSystem(target) {

    let operation;

    if (target.classList.contains('page-open')) {

        operation = "forward";

    }
    else {

        operation = "back";

    }

    performOperation(target, operation);

}


function performOperation(target, operation) {

    // Определим номер страницы в списке
    let page_number = parseInt(target.getAttribute('data-number'));

    // Удалим классы анимации у страницы
    target.classList.remove("flip-right-to-left");
    target.classList.remove("flip-left-to-right");

    // Найдем объект книги, для последующего изменения
    let styleBook = document.getElementById('book');

    // Объявим объект для расстановки приоритетов визуализации
    let orderPages = {};
    // let orderPages;

    // Объявим массив страниц для присвоение обработки нажатия кнопки мыши
    let clickPages = [];

    switch (operation) {

        // Если пользователь идет вперед по книге
        case "forward":

            // ******** Выполним действия с размерами книги ********

                // Если это открытие первой страницы, увеличим размер книги
                if (target.classList.contains("page-first")) {

                    styleBook.style.width = "1140px";

                }

                // Если это открытие последней страницы, уменьшим размер книги
                // и сдвинем ее расположение в центр
                if (target.classList.contains("page-last")) {

                    styleBook.style.width = "570px";
                    styleBook.style.left = "570px";

                }

            // ******** Выполним действия с выбранной страницей ********

                // Удалим класс открыто и применим класс перевернуто
                target.classList.remove("page-open");
                target.classList.add("page-turned");

                // Применим класс анимация переворота страницы
                target.classList.add("flip-right-to-left");

            // ******** Выполним действия с видимостью страниц и назначим обработку событий нажатия страницы ********

                // Если это открытие первой страницы, сделаем видимой ее и вторую страницу
                if (target.classList.contains("page-first")) {

                    // orderPages = { [page_number] : 600, [page_number+1] : 599};

                    orderPages[page_number] = 600;
                    orderPages[page_number+1] = 599;
                    clickPages.push(page_number);
                    clickPages.push(page_number+1);

                }
                else {

                    // Если это открытие последней страницы, сделаем видимой ее и предыдущую ей страницу
                    if (target.classList.contains("page-last")) {

                        // orderPages = { [page_number] : 600, [page_number-1] : 599};
                        orderPages[page_number] = 600;
                        orderPages[page_number-1] = 599;
                        clickPages.push(page_number);

                    }
                    // Если это открытие страниц в середине книжки
                    else {

                        // orderPages = { [page_number-1] : 598, [page_number] : 600, [page_number+1] : 599};

                        orderPages[page_number-1] = 598;
                        orderPages[page_number] = 600;
                        orderPages[page_number+1] = 599;
                        clickPages.push(page_number);
                        clickPages.push(page_number+1);

                    }

                }

        break;

        // Если пользователь идет назад по книге
        case "back":

            // ******** Выполним действия с размерами книги ********

                // Если последняя страница книги была закрыта и книгу открывают, размер книги надо увеличить
                if (target.classList.contains("page-last")) {

                    styleBook.style.width = "1140px";
                    styleBook.style.left = "0px";

                }

                // Если первая страница книги была открыта и ее закрывают, размер книги надо уменьшить
                if (target.classList.contains("page-first")) {

                    styleBook.style.width = "570px";

                }

            // ******** Выполним действия с выбранной страницей ********

                // Удалим класс открыто и применим класс перевернуто
                target.classList.remove("page-turned");
                target.classList.add("page-open");

                // Применим класс анимации переворота страницы
                target.classList.add("flip-left-to-right");

            // ******** Выполним действия с видимостью страниц ********

                // Если первая страница книги была открыта и ее закрывают
                if (target.classList.contains("page-first")) {

                    // orderPages = {  [page_number] : 600, [page_number+1] : 599 };
                    orderPages[page_number] = 600;
                    orderPages[page_number+1] = 599;
                    clickPages.push(page_number);


                }
                else {

                    // Если последняя страница книги была закрыта и ее открывают
                    if (target.classList.contains("page-last")) {

                        // orderPages = { [page_number-1] : 599, [page_number] : 600 };
                        orderPages[page_number-1] = 599;
                        orderPages[page_number] = 600;
                        clickPages.push(page_number);
                        clickPages.push(page_number-1);


                    }
                    // Если это возврат к началу книги ( открывает страницы в обратном направлении)
                    else {

                        // orderPages = { [page_number-1] : 599, [page_number] : 600, [page_number+1] : 598};
                        orderPages[page_number-1] = 599;
                        orderPages[page_number] = 600;
                        orderPages[page_number+1] = 598;
                        clickPages.push(page_number-1);
                        clickPages.push(page_number);

                    }

                }

        break;



        default:

            console.log('Не возможно выполнить неизвестную операцию');

        break;
    }

    setZIndexPages(orderPages);
    setListenerClick(clickPages);

}

function setZIndexPages(orderPages) {

    var allPagesProject = document.getElementsByClassName('page_project');

    if (allPagesProject.length !== 0) {
        for (var y = 0; y < allPagesProject.length; y++) {

            allPagesProject[y].style.zIndex = (500-(y+1)).toString();
            // allPagesProject[y].removeEventListener('click', pageclick, false);
        }

    }

    if ( typeof (orderPages) != "undefined" ) {

        for (key in orderPages) {

            allPagesProject[key].style.zIndex = orderPages[key];

        }

    }
    else {
        console.log('Приоритет визаулизации страниц не получен');
    }

}

function setListenerClick(clickPages) {

    if ((typeof (clickPages) !== "undefined") || (clickPages !== [])) {

        var allPagesProject = document.getElementsByClassName('page_project');


        // Удалим все обработчики событий у страниц.
        // Присвоем новые если они нужны
        if (allPagesProject.length !== 0) {
            for (var y = 0; y < allPagesProject.length; y++) {

                // Если этой странице не требуется листенер, а у нее он был - удалим
                if (clickPages.indexOf(y) == -1) {

                    allPagesProject[y].removeEventListener('click', pageclick, false);

                }
                // Если этой странице требуется листенер, а у нее его не было - присвоим
                else {

                    allPagesProject[y].addEventListener('click', pageclick);

                }



            }

        }

    }
    else {
        console.log('Номера страниц для присвоения обработчика нажатия на страницу не получены');
    }

}
              
            
!
999px

Console