Показать сообщение отдельно
  #2 (permalink)  
Старый 25.06.2016, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Jaz,
самое простое продублировать секцию /* Effect 11: Scale and rotate pusher */ в component.css заменив 11 на скажем 500
было
/* Effect 11: Scale and rotate pusher */

.st-effect-11.st-container {
	-webkit-perspective: 1500px;
	perspective: 1500px;
}

.st-effect-11 .st-pusher {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.st-effect-11.st-menu-open .st-pusher {
	-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
	transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

.st-effect-11.st-menu {
	opacity: 1;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.st-effect-11.st-menu-open .st-effect-11.st-menu {
	visibility: visible;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.st-effect-11.st-menu::after {
	display: none;
}


стало
/* Effect 11: Scale and rotate pusher */

.st-effect-11.st-container {
	-webkit-perspective: 1500px;
	perspective: 1500px;
}

.st-effect-11 .st-pusher {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.st-effect-11.st-menu-open .st-pusher {
	-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
	transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

.st-effect-11.st-menu {
	opacity: 1;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.st-effect-11.st-menu-open .st-effect-11.st-menu {
	visibility: visible;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.st-effect-11.st-menu::after {
	display: none;
}

/* Effect 500: Scale and rotate pusher */

.st-effect-500.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.st-effect-500 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.st-effect-500.st-menu-open .st-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

.st-effect-500.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.st-effect-500.st-menu-open .st-effect-500.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.st-effect-500.st-menu::after {
  display: none;
}


было
<a class="st-effect" data-effect="st-effect-11" href="#3">Ссылка 1</a> 


<a class="st-effect" data-effect="st-effect-11" href="#5">Ссылка 2</a>


стало
<a class="st-effect" data-effect="st-effect-11" href="#3">Ссылка 1</a> 


<a class="st-effect" data-effect="st-effect-500" href="#5">Ссылка 2</a>


было
<nav class="st-menu st-effect-11" id="menu-9">
<nav class="st-menu st-effect-11" id="menu-9">

стало
<nav class="st-menu st-effect-11" id="menu-9">
<nav class="st-menu st-effect-500" id="menu-9">
Ответить с цитированием