Scale and Translate transformations not working

Question

I saw this curtains template here: http://codyhouse.co/gem/3d-curtain-template/ and tried to implement in a WordPress template page here: http://cameroncampbell.me/curious-themes/ <--as static HTML that page works just like their example, but once I add it to the theme (or any theme) it doesn't work. As you scroll it just stays on the initial section. The script is firing after jQuery so I don't know why it's not working.

Hoping someone can point out the obvious with a set of fresh eyes :)

I saw this curtains template here: http://codyhouse.co/gem/3d-curtain-template/ and tried to implement in a WordPress template page here: http://cameroncampbell.me/curious-themes/ <--as static HTML that page works just like their example, but once I add it to the theme (or any theme) it doesn't work. As you scroll it just stays on the initial section. The script is firing after jQuery so I don't know why it's not working.

Hoping someone can point out the obvious with a set of fresh eyes :)

Edit: Sorry; posted the code below.

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

Christian · Accepted Answer

That plugin/script is attempting to detect the device by using a media query that sets a resolution-specific pseudo-element on the body:

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

The problem is that you haven't included the relevant media query in your site, so your site is acting as if it's on mobile. You need to add the following code somewhere in your CSS file:

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';
  }
}

The author of the plugin should have probably pointed this out.

Scale and Translate transformations not working

Answers (1)

Related Questions