Javascript-форум - Очень не простая ситуация с действием 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 {

    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.

Я буду вам очень очень благодарен, если вы поможете найти, что исправить.