jquery动画页面打桩
Posted
技术标签:
【中文标题】jquery动画页面打桩【英文标题】：Jquery animation pagePiling 【发布时间】：2017-06-08 21:31:20 【问题描述】：我正在寻找类似于本网站http://cuberto.com/ 的jquery 动画。 到目前为止，我已经通过 pagePiling.js 完成了这个链接http://codepen.io/mirmibrahim/pen/MJoGBY。任何人都可以帮助我完全按照路伯托的方式完成它。我不知道如何加载一半页面的图像和一半的文本，然后打开下一部分以从第一张幻灯片上的方形动画开始。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin - Horizontal scroll</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="pagePiling.js plugin by Alvaro Trigo." />
<meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--script src="../jquery-1.9.1.js"></script-->
<script type="text/javascript" src="../jquery.pagepiling.js"></script>
<script type="text/javascript">
$(document).ready(function()
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling(
direction: 'horizontal',
menu: '#menu',
scrollingSpeed: 2000,
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'],
navigation:
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
,
afterRender: function()
$('#pp-nav').addClass('custom');
console.log("After Render ");
,
afterLoad: function(anchorLink, index)
// $.fn.pagepiling.setAllowScrolling(false);
console.log("After Load " + index);
if (index == 1)
console.log("index " + index);
else if (index == 2)
if (index > 1)
$('#pp-nav').removeClass('custom');
else
$('#pp-nav').addClass('custom');
,
onLeave: function(index, nextIndex, direction)
console.log("After Load " + index);
if (index == 1)
/* $( "#block" ).animate(
width: "100%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "12em",
borderWidth: "20px"
, 4000 , function()
// Animation complete.
//alert("s");
);
*/
$("#block").animate(
width: "58%"
, 1000, function()
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(500);
);
else if (index == 2 && nextIndex == 1)
$("#block").animate(
width: "0%"
, 3000, function()
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(2000);
);
);
);
</script>
<style>
#section1 img
margin: 20px 0;
opacity: 0.7;
/* colors
* --------------------------------------- */
#colors2,
#colors3
position: absolute;
height: 163px;
width: 362px;
z-index: 1;
background-repeat: no-repeat;
left: 0;
margin: 0 auto;
right: 0;
#colors2
background-image: url(imgs/colors2.gif);
top: 0;
#colors3
background-image: url(imgs/colors3.gif);
bottom: 0;
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip
color: #AAA;
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
<li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
<li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<!--img src="imgs/pagePiling-plugin.gif" /-->
<div class="intro">
<div>
<div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block">
</div>
<h1 style="color: white;">DIGITAL</h1>
<p style="color: white;">CREATIVE AGENCY</p>
</div>
</div>
</div>
<div class="section">
<div class="intro">
<h1>Simple to use</h1>
<p>Just use the option direction: 'horizontal' to have it working!</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Isn't it great?</h1>
<p>Just as you expected!</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
您的 codepen 在我看来工作正常，您有什么要求？ 如果你能看到第一页，红线扩展应该打开一半的下一页，其中一半从左侧动画出现，我卡在上面了。 根据 BuiltWith 搜索，他们似乎在使用 skrollr、history js 和 greensock。 关键是他们如何从动画中打开页面。查看cuberto的第一页。 div 展开的位置，然后在其中打开下一页并从左侧部分加载。 【参考方案1】：我认为 pagepiling.js 可能是错误的方向，因为它只是在一页上制作动画，而不是在两页之间制作动画。
我过去处理此类事情的方式是使用像Barba.JS 这样的 PJAX 插件，它允许您在站点导航事件之间添加动画转换。 Barba 通过手动更改 URL、为新页面抓取新内容以及在新旧页面之间执行转换（您可以像 Cuberto 一样为元素制作动画！）来劫持页面更改。
如果这有帮助，或者我错过了重点，请告诉我，我会尝试相应地更新我的答案！
编辑：刚刚意识到这是一个七个月前的问题，但希望这对某人有所帮助！
【讨论】：
以上是关于jquery动画页面打桩的主要内容，如果未能解决你的问题，请参考以下文章