Nikolas*
Умник
Доброго времени суток, сегодня нашел одну замечательную штуку, под названием параллакс.
Вот:
Перейдите в Admin CP -> Внешний вид -> defaultheader -> и вставить этот код:
Перейти в Admin CP -> Внешний вид-> CSS -> ipb_styles и вставьте этот код ниже:
Заранее прошу сделать резервную копию ранее находящегося в defaulheader.
Сохранить. И готово.
Картинки можно заменять на свои.
Автор скрипта: Nikolas*
Пример скрипта:
Смотреть на логотип :ap:
Вот:
Перейдите в Admin CP -> Внешний вид -> defaultheader -> и вставить этот код:
PHP:
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>
<script src="http://new-paradise.su/styles/xendisconnect/xenforo/slider/js/index.js"></script>
<div class="banner">
<div id="parallxWrapper">
<div class="parallxBackground" data-bind="attr: { style:'-webkit-transform:perspective(10000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg);transform:perspective(10000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg)' }" style="-webkit-transform:perspective(10000px) rotateY(-6.18deg) rotateX(0.63deg);transform:perspective(10000px) rotateY(-6.18deg) rotateX(0.63deg)">
<div class="parallxLayerLogo"></div>
<div class="parallxLayerRStar"></div>
<div class="parallxLayerShooter"></div>
<div class="parallxLayerShooter1"></div>
</div>
</div>
</div>
</br></br>
PHP:
#parallxWrapper {
margin-left: 55px;
height: 380px;
width: 1144px;
margin-top: 26px;
}
.parallxBackground {
height: 100%;
background-image: url("http://www.new-paradise.su/styles/xendisconnect/xenforo/slider/bg.png");
border-radius: 10px;
padding: 10px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border: 1px solid rgb(0, 214, 255);
-moz-box-shadow: 0 0 20px #555;
-webkit-box-shadow: 0 0 10px #1DA88C;
box-shadow: 0 0 10px #1DA88C;
}
.parallxLayerLogo {
width: 382px;
height: 409px;
margin-top: -18px;
margin-left: 7px;
background-image: url("http://www.new-paradise.su/styles/xendisconnect/xenforo/slider/elf2.png");
position: absolute;
-webkit-transform: translateZ(49px);
-webkit-transition: all 0.2s;
transform: translateZ(90px);
transition: all 0.2s;
}
.parallxLayerRStar {
width: 1223px;
height: 399px;
;
margin-top: -22px;
/* float: right; */
background-image: url("http://www.new-paradise.su/styles/xendisconnect/xenforo/slider/elf.png");
position: absolute;
-webkit-transform: translateZ(49px);
transform: translateZ(20px);
}
.parallxLayerShooter {
width: 1000px;
height: 374px;
float: right;
background-image: url("http://www.new-paradise.su/styles/xendisconnect/xenforo/slider/image.png");
position: absolute;
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
;
}
.banner {
}
Сохранить. И готово.
Картинки можно заменять на свои.
Автор скрипта: Nikolas*
Пример скрипта:
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
(Не реклама)Смотреть на логотип :ap:
Последнее редактирование:
