5
मैं इस वेबसाइट http://cuberto.com/ के समान jquery एनीमेशन की तलाश में हूं। अब तक मैंने पेज 12iling3j34 के माध्यम से इस लिंक को http://codepen.io/mirmibrahim/pen/MJoGBY पूरा कर लिया है। क्या कोई मुझे curberto पर बिल्कुल सही तरीके से पूरा करने में सहायता कर सकता है। मुझे नहीं पता कि छवि के साथ आधा पृष्ठ कैसे लोड करें और टेक्स्ट के साथ आधा लोड करें और अगले स्लाइड को पहले स्लाइड पर एनिमेट करने वाले वर्ग से खोलें।Jquery एनीमेशन पेज Piling
<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" alt="pagePiling" /-->
<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>
आपका कोडपेन मेरे लिए ठीक से काम कर रहा है, आपकी आवश्यकता क्या है? –
यदि आप पहले पृष्ठ को देख सकते हैं, तो लाल रेखा का विस्तार आधे अगले पृष्ठ को इसके साथ खोलना चाहिए और बाएं एनीमेशन से आधा दिखाई देता है, मैं उस पर फंस गया हूं। – ibrahim
बिल्टविथ खोज के आधार पर, वे स्कॉलर, इतिहास जेएस और ग्रीन्सॉक का उपयोग कर रहे हैं। – rawnewdlz