0
我在理解數據錨目標我想問題,或者沒有做什麼,我想數據錨目標和skrollr菜單
我有一大堆的場面都具有相同的背景,我的pano
元素。
<div id="pano"
data--0p-top="top:0%; opacity:1; transform: scale(1);"
data--200p-top="top:13%; opacity:0.5; transform: scale(2);"
data--620p-top="top: 20%; transform: scale(3);"
data--1000p-top="top:-100%; opacity:0.2; scale(4);">
</div>
<div id="scene1"
data-anchor-target="#pano"
data--50p-top="opacity:0.3; top: 20%; left: 5%; transform: scale(0);"
data--100p-top="opacity:1; transform: scale(1); top: 10%; left:30%;"
data--150p-top="opacity:0; transform: scale(1.5); top: -10%; left:60%;">
<div class="cloud1"></div>
</div>
<div id="scene2" class="scene-text"
data-anchor-target="#scene1"
data--130p-top="transform: scale(0); opacity: 0.5; top: 27%;"
data--150p-top="transform: scale(1); opacity: 1; top: 27%;"
data--200p-top="transform: scale(1.2);"
data--230p-top="transform: scale(3); opacity: 0;">
<div class="content">
<h2>Text</h2>
<p>This is a excerpt telling a story.</p>
</div>
</div>
據我瞭解scene2
的數據標籤應取決於從scene1
?但現在他們仍然像pano
一樣依賴頂部?
我的另一個問題是,當我嘗試實施skrollr menu
在此設置來alloq錨幾乎不能滾動,即使我把一個元素在最後做出一個錨,隨時隨地每個場景。我也嘗試設置data-menu-top
到我想要鏈接去的場景。
我的鏈路測試: <a href="#scene2" data-menu-top="700">Passenger Portal</a>
只滾動到頁面頂部有一點偏移。改變data-menu-top的值什麼也不做。
這是我的開始(我有jQuery的包括OFC)
<script>
var s = skrollr.init({
smoothScrolling: true
/*render: function (data) {
//Log the current scroll position.
console.log(data.curTop);
}*/
});
skrollr.menu.init(s, {
animate: true,
//The easing function to use.
easing: 'sqrt',
//Multiply your data-[offset] values so they match those set in skrollr.init
scale: 2,
//How long the animation should take in ms.
duration: function (currentTop, targetTop) {
//By default, the duration is hardcoded at 500ms.
return 500;
//But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
//return Math.abs(currentTop - targetTop) * 10;
},
//If you pass a handleLink function you'll disable `data-menu-top` and `data-menu-offset`.
//You are in control where skrollr will scroll to. You get the clicked link as a parameter and are expected to return a number.
handleLink: function (link) {
return 400;//Hardcoding 400 doesn't make much sense.
},
//By default skrollr-menu will only react to links whose href attribute contains a hash and nothing more, e.g. `href="#foo"`.
//If you enable `complexLinks`, skrollr-menu also reacts to absolute and relative URLs which have a hash part.
//The following will all work (if the user is on the correct page):
//http://example.com/currentPage/#foo
//http://example.com/currentDir/currentPage.html?foo=bar#foo
///?foo=bar#foo
complexLinks: false,
//This event is triggered right before we jump/animate to a new hash.
change: function (newHash, newTopPosition) {
//Do stuff
}
});
</script>
Intresting!我本來希望嘗試它,但我實際上報廢了所有內容,並從頭開始使用scrollMagic。對於任何閱讀此內容並試圖製作「高級」動畫(同時發生多件事)的人,我強烈建議使用scrollMagic。如果你甚至知道一個小的JavaScript,它將是100倍更多的可定製和動態! – Cammy 2015-03-30 08:35:11