Здравствуйте.
Уже задавал данный вопрос на других форумах, но похоже, что здесь стоит капнуть немного глубже, нежели просто пробежаться взглядом. Вначале опишу проблему: подключив и использовав wow.js библиотеку, я не добился нужного результата, кроме как для нижнего слоя параллакса с идентификатором #back (почему-то только здесь код работает как надо). В другом слое эффект также работает, но что-то не даёт ему стать visible.
Я добавил код на jsfiddle
https://jsfiddle.net/GeniusG/e5qaD/7246/ . Чтобы увидеть всю картину уберите у всех элементов-изображений с атрибутами data для wow.js visibility: hidden. По идее при прокрутке страницы hidden должен убираться автоматически,- в этом и состоит функция библиотеки wow.js.
Возможно, это оттого, что я использовал эффект параллакса через чистый css. Вот код (js-код в низу html-кода):
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="FlexSlider/flexslider.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>
<body>
<div id="parallax">
<div id="layer-back">
<div data-wow-duration="1s" data-wow-delay="0.5s" id="back" class="wow fadeIn"></div>
</div>
<div id="layer-base">
<main>
<article>
<div id="pic-position">
<section data-wow-delay="0.5s" data-wow-duration="1s" data-wow-offset="15" class="wow fadeInUp">
<div></div>
</section>
<aside data-wow-delay="0.5s" data-wow-duration="1s" data-wow-offset="15" class="wow fadeInUp">
<div></div>
</aside>
<footer data-wow-delay="0.5s" data-wow-duration="1s" data-wow-offset="15" class="wow fadeInUp">
<div></div>
</footer>
</div>
</article>
<div id="slider-1">
<div class="flexslider" style="margin: 0;">
<ul data-wow-duration="1s" class="wow fadeInUp slides">
<li class="item" style="background-image: url(FotoOptimized/Slide1.jpg);"></li>
</ul>
</div>
</div>
</main>
<div id="new-main">
<div id="slider-2">
<div class="flexslider" style="margin: 0;">
<ul data-wow-duration="1s" class="wow fadeInUp slides">
<li class="item" style="background-image: url(FotoOptimized/Slide8.jpg);"></li>
</ul>
</div>
</div>
</div>
<footer data-wow-duration="1s" class="wow fadeInUp">
<div id="menuicon">
<a href="#" alt="">
<span id="top"></span>
<span id="mid"></span>
<span id="bot"></span>
</a>
</div>
<footer style="position: absolute; left: 50px; bottom: 20px; font: 2vh sp1, sans-serif; color: #fff; transition: 0.35s ease">by Chris</footer>
</footer>
</div>
</div>
<!--|............WOW.JS............|-->
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="FlexSlider/jquery.flexslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.flexslider').flexslider({
slideshowSpeed: 4000,
directionNav: true,
animation: 'fade',
slideshow: true,
animationSpeed: 800,
animationLoop: true,
pauseOnAction: false,
controlNav: false
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var nCount = +$.cookie('user_count') || 0;
$('#menuicon').click(function() {
nCount++;
$.cookie('user_count', nCount, { expires: 1, path: '/' });
if (nCount%2 != 0) {
$('#top').addClass('tchanged');
$('#bot').addClass('bchanged');
$('#mid').addClass('mchanged');
$('ul').addClass('no-hiding');
$('footer footer').addClass('footer');}
else {
$('#top').removeClass('tchanged');
$('#bot').removeClass('bchanged');
$('#mid').removeClass('mchanged');
$('ul').removeClass('no-hiding');
$('footer footer').removeClass('footer');}
});
});
</script>
</body>
Ну и css:
|
Код:
|
body, html, #parallax {
overflow-x: hidden;
overflow-y: auto;}
#parallax {
perspective: 1px;
height: 100vh;}
/*........FIRST-LAYER.......*/
#layer-back {
position: relative;
height: 100vh;
transform-style: preserve-3d;}
#back {
background: url(dey.jpg) no-repeat 100%;
background-size: cover;
position: absolute;
top: 0;
left: -9px !important;
right: 9px !important;
bottom: 0;
transform: translateZ(-1px) scale(2);}
/*.......SECOND-LAYER........*/
#layer-base {
position: relative;
background: url(ed.jpg) center center fixed;
background-size: cover;}
main {
display: block;
position: relative;
box-shadow: 0px 5px 19px -5px rgb(0,0,0);
box-shadow: 0px 5px 19px -1px rgba(0,0,0,0.75);
background: url(1.jpg) repeat-y 100% 0;
background-size: contain;}
/*........PIC-BLOCK........*/
article {
display: block;
padding-top: 8px;
background: url(k1.1.jpg) repeat-y 100% 0;
background-size: contain;}
#pic-position {
max-width: 1294px;
margin: 0 auto;}
section, aside, #pic-position footer {
float: left;
display: block;
width: 635px;
width: calc(50% - 12px);
margin-left: 8px;
margin-bottom: 8px;}
/*........FIRST-PIC........*/
article section div, article aside div, article footer div {
display: block;
padding-top: 62.5%;
border-radius: 3px;
box-shadow: 4px 4px 5px -1px rgba(0,0,0,0.75);}
article section div {
background: url(FotoOptimized/top3.2.jpg);
background-size: cover;}
/*.......SECOND-PIC........*/
aside {
margin-right: 8px;}
article aside div {
background: url(FotoOptimized/top3.1.jpg) no-repeat 0 0;
background-size: cover;}
/*.......THIRD-PIC........*/
#pic-position footer {
width: 1278px;
width: calc(100% - 16px);
margin-right: 8px;}
#pic-position:after {
content:".";
display: block;
height: 0;
clear: both;
overflow: hidden;}
article footer div {
padding-top: 44.7%;
background: url(FotoOptimized/top3.jpg) no-repeat 50% 100%;
background-size: cover;}
/*.........SLIDE-SHOW..........*/
#slider-1 {
margin: 30vh auto 0;
padding-bottom: 30vh;
width: 70%;
max-width: 1100px;}
.flexslider .slides li.item {
padding-top: 56.25%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;}
#slider-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
max-width: 550px;}
#slider-2 .item {
background-size: contain;
padding-top: 100%;}
/*..........FIXED-PIC............*/
#transparent {
height: 100vh;
background-color: transparent;}
/*.........MAIN-CONTINUE.........*/
#new-main {
height: 120vh;
position: relative;
box-shadow: 0px -5px 19px -1px rgba(0,0,0,0.75);
background: url(ck.jpg) repeat-y 100% -200%;
background-size: contain;}
/*.........FOOTER...........*/
#new-main + footer {
display: block;
height: 100vh;
overflow: hidden;
position: relative;
background-image: url(ey.jpg);
background-size: cover;}
/*..........FOOTER..........*/
footer footer {
opacity: 0;}
footer footer.footer {
opacity: 1;} |
Я добавил код на jsfiddle
https://jsfiddle.net/GeniusG/e5qaD/7246/ . Чтобы увидеть всю картину уберите у всех элементов-изображений с атрибутами data для wow.js visibility: hidden. По идее при прокрутке страницы hidden должен убираться автоматически,- в этом и состоит функция библиотеки wow.js.
Я буду вам очень очень благодарен, если вы поможете найти, что исправить.