Показать сообщение отдельно
  #1 (permalink)  
Старый 30.07.2017, 23:17
Новичок на форуме
Отправить личное сообщение для Кристиан Посмотреть профиль Найти все сообщения от Кристиан
 
Регистрация: 10.07.2017
Сообщений: 8

Требуется помощь эксперта по 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.

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

Последний раз редактировалось Кристиан, 31.07.2017 в 13:48.
Ответить с цитированием