我在这里看到了这个窗帘模板:http://codyhouse.co/gem/3d-curtain-template/并尝试在这里的WordPress模板页面中实现:http://cameroncampbell.me/curious-themes/< - 作为静态HTML,该页面就像他们的示例一样工作,但是一旦我添加它对主题(或任何主题)它不起作用。滚动时它只停留在初始部分。该脚本在jQuery之后触发,因此我不知道它为什么不起作用。
希望有人能用一双新鲜的眼睛指出明显的东西:)
我在这里看到了这个窗帘模板:http://codyhouse.co/gem/3d-curtain-template/并尝试在这里的WordPress模板页面中实现:http://cameroncampbell.me/curious-themes/< - 作为静态HTML,该页面就像他们的示例一样工作,但是一旦我添加它对主题(或任何主题)它不起作用。滚动时它只停留在初始部分。该脚本在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:
(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);
答案 0 :(得分:1)
该插件/脚本试图通过使用媒体查询来检测设备,该查询在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';
}
}
该插件的作者可能已经指出了这一点。