크기 변환 및 변환 변환이 작동하지 않습니다.

Question

이 커튼 템플릿을 여기에서 보았습니다 : http://codyhouse.co/gem/3d-curtain-template/ 그리고 여기 WordPress 템플릿 페이지에서 구현하려고했습니다 : http://cameroncampbell.me/curious-themes/ < - 정적 HTML 페이지는 예제처럼 작동하지만 한 번 테마 (또는 테마)가 작동하지 않습니다. 스크롤 할 때 초기 섹션에 머물러 있습니다. 스크립트가 jQuery 이후에 실행되므로 왜 작동하지 않는지 알 수 없습니다. http://codyhouse.co/gem/3d-curtain-template/ 여기에 워드 프레스 템플릿 페이지에 구현하기 위해 노력 : :이 여기에 템플릿을 커튼 보았다

희망 누군가가 신선한 눈 :

의 세트 명백한을 지적 할 수 http://cameroncampbell.me/curious-themes/ < 정적 HTML을 --as 그 페이지는 예제처럼 작동하지만 테마 (또는 테마)에 추가하면 작동하지 않습니다. 스크롤 할 때 초기 섹션에 머물러 있습니다. 스크립트가 jQuery 이후에 실행되므로 왜 작동하지 않는지 알 수 없습니다.

희망 누군가가 신선한 눈 :

편집의 세트 명백한을 지적 할 수 : 죄송합니다; 아래 코드를 게시했습니다.

HTML :

<section class="cd-section"> 
    <div class="cd-block"> 
     <h1><?php the_title(); ?></h1> 
    </div> 
</section> <!-- .cd-section --> 

<section class="cd-section"> 
    <div class="cd-block"> 
     <div class="cd-half-block"></div> 

     <div class="cd-half-block"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae! 
      </p> 
     </div> 
    </div> 
</section> <!-- .cd-section --> 

JS : 플러그인/스크립트 body에 해상도 별 가상 요소를 설정하는 미디어 쿼리를 사용하여 장치를 검색하려고 시도 함

(function($){ 

$(document).ready(function() { 
//change this value if you want to change the speed of the scale effect 
var scaleSpeed = 0.3, 
//change this value if you want to set a different initial opacity for the .cd-half-block 
    boxShadowOpacityInitialValue = 0.7, 
    animating = false; 

//check the media query 
var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, ""); 
$(window).on('resize', function(){ 
    MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, ""); 
}); 

//bind the animation to the window scroll event 
triggerAnimation(); 
$(window).on('scroll', function(){ 
    triggerAnimation(); 
}); 

//move to next/previous section 
$('.cd-vertical-nav .cd-prev').on('click', function(){ 
    prevSection(); 
}); 
$('.cd-vertical-nav .cd-next').on('click', function(){ 
    nextSection(); 
}); 
$(document).keydown(function(event){ 
    if(event.which=='38') { 
     prevSection(); 
     event.preventDefault(); 
    } else if(event.which=='40') { 
     nextSection(); 
     event.preventDefault(); 
    } 
}); 

function triggerAnimation(){ 
    if(MQ == 'desktop') { 
     //if on desktop screen - animate sections 
     (!window.requestAnimationFrame) ? animateSection() : window.requestAnimationFrame(animateSection); 
    } else { 
     //on mobile - remove the style added by jQuery 
     $('.cd-section').find('.cd-block').removeAttr('style').find('.cd-half-block').removeAttr('style'); 
    } 
    //update navigation arrows visibility 
    checkNavigation(); 
} 

function animateSection() { 
    var scrollTop = $(window).scrollTop(), 
     windowHeight = $(window).height(), 
     windowWidth = $(window).width(); 

    $('.cd-section').each(function(){ 
     var actualBlock = $(this), 
      offset = scrollTop - actualBlock.offset().top, 
      scale = 1, 
      translate = windowWidth/2+'px', 
      opacity, 
      boxShadowOpacity; 

     if(offset >= -windowHeight && offset <= 0) { 
      //move the two .cd-half-block toward the center - no scale/opacity effect 
      scale = 1, 
      opacity = 1, 
      translate = (windowWidth * 0.5 * (- offset/windowHeight)).toFixed(0)+'px'; 

     } else if(offset > 0 && offset <= windowHeight) { 
      //the two .cd-half-block are in the center - scale the .cd-block element and reduce the opacity 
      translate = 0+'px', 
      scale = (1 - (offset * scaleSpeed/windowHeight)).toFixed(5), 
      opacity = (1 - (offset/windowHeight)).toFixed(5); 

     } else if(offset < -windowHeight) { 
      //section not yet visible 
      scale = 1, 
      translate = windowWidth/2+'px', 
      opacity = 1; 

     } else { 
      //section not visible anymore 
      opacity = 0; 
     } 

     boxShadowOpacity = parseInt(translate.replace('px', ''))*boxShadowOpacityInitialValue/20; 

     //translate/scale section blocks 
     scaleBlock(actualBlock.find('.cd-block'), scale, opacity); 

     var directionFirstChild = (actualBlock.is(':nth-of-type(even)')) ? '-': '+'; 
     var directionSecondChild = (actualBlock.is(':nth-of-type(even)')) ? '+': '-'; 
     if(actualBlock.find('.cd-half-block')) { 
      translateBlock(actualBlock.find('.cd-half-block').eq(0), directionFirstChild+translate, boxShadowOpacity); 
      translateBlock(actualBlock.find('.cd-half-block').eq(1), directionSecondChild+translate, boxShadowOpacity); 
     } 
     //this is used to navigate through the sections 
     (offset >= 0 && offset < windowHeight) ? actualBlock.addClass('is-visible') : actualBlock.removeClass('is-visible');  
    }); 
} 

function translateBlock(elem, value, shadow) { 
    var position = Math.ceil(Math.abs(value.replace('px', ''))); 

    if(position >= $(window).width()/2) { 
     shadow = 0; 
    } else if (position > 20) { 
     shadow = boxShadowOpacityInitialValue; 
    } 

    elem.css({ 
     '-moz-transform': 'translateX(' + value + ')', 
     '-webkit-transform': 'translateX(' + value + ')', 
     '-ms-transform': 'translateX(' + value + ')', 
     '-o-transform': 'translateX(' + value + ')', 
     'transform': 'translateX(' + value + ')', 
     'box-shadow' : '0px 0px 40px rgba(0,0,0,'+shadow+')' 
    }); 
} 

function scaleBlock(elem, value, opac) { 
    elem.css({ 
     '-moz-transform': 'scale(' + value + ')', 
     '-webkit-transform': 'scale(' + value + ')', 
     '-ms-transform': 'scale(' + value + ')', 
     '-o-transform': 'scale(' + value + ')', 
     'transform': 'scale(' + value + ')', 
     'opacity': opac 
    }); 
} 

function nextSection() { 
    if (!animating) { 
     if ($('.cd-section.is-visible').next().length > 0) smoothScroll($('.cd-section.is-visible').next()); 
    } 
} 

function prevSection() { 
    if (!animating) { 
     var prevSection = $('.cd-section.is-visible'); 
     if(prevSection.length > 0 && $(window).scrollTop() != prevSection.offset().top) { 
      smoothScroll(prevSection); 
     } else if(prevSection.prev().length > 0 && $(window).scrollTop() == prevSection.offset().top) { 
      smoothScroll(prevSection.prev('.cd-section')); 
     } 
    } 
} 

function checkNavigation() { 
    ($(window).scrollTop() < $(window).height()/2) ? $('.cd-vertical-nav .cd-prev').addClass('inactive') : $('.cd-vertical-nav .cd-prev').removeClass('inactive'); 
    ($(window).scrollTop() > $(document).height() - 3*$(window).height()/2) ? $('.cd-vertical-nav .cd-next').addClass('inactive') : $('.cd-vertical-nav .cd-next').removeClass('inactive'); 
} 

function smoothScroll(target) { 
    animating = true; 
    $('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false;  }); 
} 
}) 

})(jQuery); 

Answer 1

:

var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, ""); 

문제는 귀하가 관련 medi 사이트의 검색어로 인해 사이트가 모바일에있는 것처럼 행동합니다. CSS 파일의 어딘가에 다음 코드를 추가해야합니다.

body::before { 
    /* never visible - this is used in jQuery to check the current MQ */ 
    content: 'mobile'; 
    display: none; 
} 
@media only screen and (min-width: 1170px) { 
    body::before { 
    /* never visible - this is used in jQuery to check the current MQ */ 
    content: 'desktop'; 
    } 
} 

플러그인 작성자가이를 지적했을 것입니다.