Требуется помощь эксперта по js.
Здравствуйте.
Уже задавал данный вопрос на других форумах, но похоже, что здесь стоит капнуть немного глубже, нежели просто пробежаться взглядом. Вначале опишу проблему: подключив и использовав 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 {Я буду вам очень очень благодарен, если вы поможете найти, что исправить. |
попробуйте в 53 строку вставить это!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
Я указал jquery, просто почему-то пропустил при вставке
|
Я добавил код на jsfiddle https://jsfiddle.net/GeniusG/e5qaD/7246/ . Чтобы увидеть всю картину уберите у всех элементов-изображений с атрибутами data для wow.js visibility: hidden. По идее при прокрутке страницы hidden должен убираться автоматически,- в этом и состоит функция библиотеки wow.js.
|
| Часовой пояс GMT +3, время: 14:53. |