目前使用“interactive_bg”插件使用两个图像在图像上创建视差效果,以创建深度幻觉。
插件网站:http://www.thepetedesign.com/demos/interactive_bg_demo.html
<section id="header" class="header-image bg header-image-back" data-ibg-bg="img/case.study.images/project.images/example.project/header/example_header_back.png">
<div id="header-image-front" class="header-image bg" data-ibg-bg="img/case.study.images/project.images/example.project/header/example_header_front.png"></div>
<div id="header-txt-cont">
<div id="header-client" class="six-col col">Panasonic</div>
<div id="header-date" class="six-col col">June 14</div>
<h1>Raising High The Union Flag</h1>
<h5>Social & PR. Creative Design</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed neque est. Proin dictum ante ut ullamcorper convallis. Phasellus auctor in eros vitae feugiat.</p>
</div>
</section>
我遇到的问题是,绝对位于屏幕中央的文本会导致鼠标事件停止,而光标位于“#header-txt-cont”上并且基本上暂停了视差效果。这是一个布局图像,可以让你更好地了解它是如何渲染的(男人是#header-image-front,tv .header-image-back):
有没有人知道如何在不必进入插件脚本并进行广泛编辑的情况下阻止这种情况发生,我希望这是我的最后手段。