[WordPress] 動作していないスケールおよび翻訳の変換

スポンサーリンク

Question

これを見た

カーテンここでテンプレート: http://codyhouse.co/gem/3d-curtain-template/ ここでワードプレスのテンプレート ページを実装しようとした: http://cameroncampbell.me/curious-themes/ <--静的な HTML としてそのページの例のように動作がテーマ (または任意のテーマ) を追加したらそれは動作しません。ちょうどスクロールすると、最初のセクションにとどまります。なぜそれが働いていないかわからないので、スクリプトが jQuery の後発射します

誰かが指摘できる新鮮な目で明白な:) 期待

ここでこのカーテン テンプレートを見た: http://codyhouse.co/gem/3d-curtain-template/ ここでワードプレスのテンプレート ページを実装しようとした: http://cameroncampbell.me/curious-themes/ <--静的な HTML としてそのページの例のように動作がテーマ (または任意のテーマ) を追加したらそれは動作しません。ちょうどスクロールすると、最初のセクションにとどまります。なぜそれが働いていないかわからないので、スクリプトが jQuery の後発射します

誰かが指摘できる新鮮な目で明白な:) 期待

編集: 申し訳ありません以下のコードを掲載します。

HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!

JS:

(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);

答え

プラグイン/スクリプトは、

body

で特定の解像度の疑似要素を設定するメディア クエリを使用して、デバイスを検出しようとしている:

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

問題は含めなかったという関連性の高いメディア クエリあなたのサイトに携帯電話上にある場合、あなたのサイトが動作しているので。どこかあなたの 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';
  }
}

プラグインの作者はおそらくこの指摘している

http://stackoverflow.com/questions/27852754/scale-and-translate-transformations-not-working

スポンサーリンク

Leave a Reply