カスタムスクロールディレクティブの作成

スクロールイベントと連動して要素が出現する

ローカルディレクティブに登録して、ローカルに使用する場合

<template lang="pug">
div(id="app")
h1(class="centered") Scroll me
div(
v-scroll="handleScroll"
class="box"
)
p 本居宣長は享保15年（1730年）6月伊勢国松坂（現在の三重県松阪市）の木綿仲買商である小津家[10]の次男として生まれる。幼名は富之助。元文2年（1737年）、8歳で寺子屋に学ぶ。元文5年（1740年）、11歳で父を亡くす[11]。延享2年（1745年）、16歳で江戸大伝馬町にある叔父の店に寄宿し、翌年郷里に帰る。[12]寛延元年（1748年）、19歳のとき、伊勢山田の紙商兼御師の今井田家の養子となるが、3年後、寛延3年（1750年）離縁して松坂に帰る。このころから和歌を詠み始める。宝暦2年、22歳のとき、義兄[13]が亡くなり、小津家を継ぐが、商売に関心はなく、江戸の店を整理してしまう。母と相談の上、医師を志し、京都へ遊学する。医学を堀元厚・武川幸順に、儒学を堀景山に師事し、寄宿して漢学や国学などを学ぶ。景山は広島藩儒医で朱子学を奉じたが、反朱子学の荻生徂徠の学にも関心を示し、また契沖の支援者でもあった。同年、姓を先祖の姓である「本居」に戻す。この頃から日本固有の古典学を熱心に研究するようになり、景山の影響もあって荻生徂徠や契沖に影響を受け、国学の道に入ることを志す。また、京都での生活に感化され、王朝文化への憧れを強めていく。宝暦7年（1758年）京都から松坂に帰った宣長は医師を開業し、そのかたわら自宅で『源氏物語』の講義や『日本書紀』の研究に励んだ。27歳の時、『先代旧事本紀』と『古事記』を書店で購入し、賀茂真淵の書[14]に出会って国学の研究に入ることになる。その後宣長は真淵と文通による指導を受け始めた。宝暦13年（1763年）5月25日、宣長は、伊勢神宮参宮のために松阪を来訪した真淵に初見し、古事記の注釈について指導を願い、入門を希望した。その年の終わり頃に入門を許可され、翌年の正月に宣長が入門誓詞を出している。真淵は、万葉仮名に慣れるため、『万葉集』の注釈から始めるよう指導した。以後、真淵に触発されて『古事記』の本格的な研究に進む。この真淵との出会いは、宣長の随筆『玉勝間（たまがつま）』[15]に収められている「おのが物まなびの有りしより」と「あがたゐのうしの御さとし言」という文章に記されている[16]。宣長は、一時は紀伊藩に仕えた[17]が、生涯の大半を市井の学者として過ごした。門人も数多く、特に、天明年間 (1781年〜1789年) の末頃から増加する。天明8年 (1788年) 末のまでの門人の合計は164人であるが、その後増加し、宣長が死去したときには487人に達していた。伊勢国の門人が200人と多く、尾張国やその他の地方にも存在していた。職業では町人が約34％、農民約23％、その他となっていた。60歳の時、名古屋・京都・和歌山・大阪・美濃などの各地に旅行に出かけ、旅先で多くの人と交流し、また、各地にいる門人を激励するなどした。寛政5年（1793年）64歳の時から散文集『玉勝間』を書き始めている。その中では、自らの学問・思想・信念について述べている。また、方言や地理的事項について言及し、地名の考証を行い、地誌を記述している。寛政10年（1797年）、69歳にして『古事記伝』を完成させた。起稿して34年後のことである。寛政12年（1800年）、71歳の時、『地名字音転用例』を刊行する。『古事記』『風土記』『和名抄』などから地名の字音の転用例を200近く集め、それを分類整理している[18]。死に臨んでは遺言として、相続その他の一般的な内容の他、命日の定め方[19]、供養、墓のデザインまでにも及ぶ詳細で大部の「遺言書」をのこした。これについては、やまとごころにおける死生観として以前に述べていることといささかズレがあるとして、「謎」であるとする評論もある。本居家の墓がある旧山室村から殿町の森に大正4年に学問の神様として本居神社が遷座して平成七年に社号を本居宣長ノ宮と改称した。その墓は近世以後、1959年（昭和34年）に松阪市内を見渡す妙楽寺の小高い山（生前の宣長が好んだ場所とされる）へ移され、さらに1999年（平成11年）には遺言のデザインに沿った「本居宣長奥津墓（城）」が建造された。
</template>
<script>
export default {
name: "CustumScrollDirective",
directives: {
scroll: {
// ディレクティブ定義
inserted: function(el, binding) {
let f = function(evt) {
if (binding.value(evt, el)) {
window.removeEventListener("scroll", f);
}
};
window.addEventListener("scroll", f);
}
}
},
methods: {
handleScroll: function(evt, el) {
if (window.scrollY > 50) {
el.setAttribute(
"style",
"opacity: 1; transform: translate3d(0, -10px, 0)"
);
}
return window.scrollY > 100;
}
}
};
</script>
<style lang="sass" scoped>
#app
height: 300vh
background: #FFFFDD
.centered
margin: auto
display: table
font-size: 60px
margin-top: 100px
.box
border: 1px solid black
padding: 8px 20px
line-height: 1.3em
opacity: 0
color: black
width: 500px
margin: 0 auto
margin-top: 30px
transform: translateZ(0)
perspective: 1000px
backface-visibility: hidden
background: rgba(255, 255, 255, 0.1)
transition: 1.5s all cubic-bezier(0.39, 0.575, 0.565, 1)
</style>
view raw CustumScrollDirective.vue hosted with ❤ by GitHub

pluginsディレクトリに登録し、グローバルに使用する場合

<template lang="pug">
div(id="app")
h1(class="centered") Scroll me
div(
v-scroll="handleScroll"
class="box"
)
p 本居宣長は享保15年（1730年）6月伊勢国松坂（現在の三重県松阪市）の木綿仲買商である小津家[10]の次男として生まれる。幼名は富之助。元文2年（1737年）、8歳で寺子屋に学ぶ。元文5年（1740年）、11歳で父を亡くす[11]。延享2年（1745年）、16歳で江戸大伝馬町にある叔父の店に寄宿し、翌年郷里に帰る。[12]寛延元年（1748年）、19歳のとき、伊勢山田の紙商兼御師の今井田家の養子となるが、3年後、寛延3年（1750年）離縁して松坂に帰る。このころから和歌を詠み始める。宝暦2年、22歳のとき、義兄[13]が亡くなり、小津家を継ぐが、商売に関心はなく、江戸の店を整理してしまう。母と相談の上、医師を志し、京都へ遊学する。医学を堀元厚・武川幸順に、儒学を堀景山に師事し、寄宿して漢学や国学などを学ぶ。景山は広島藩儒医で朱子学を奉じたが、反朱子学の荻生徂徠の学にも関心を示し、また契沖の支援者でもあった。同年、姓を先祖の姓である「本居」に戻す。この頃から日本固有の古典学を熱心に研究するようになり、景山の影響もあって荻生徂徠や契沖に影響を受け、国学の道に入ることを志す。また、京都での生活に感化され、王朝文化への憧れを強めていく。宝暦7年（1758年）京都から松坂に帰った宣長は医師を開業し、そのかたわら自宅で『源氏物語』の講義や『日本書紀』の研究に励んだ。27歳の時、『先代旧事本紀』と『古事記』を書店で購入し、賀茂真淵の書[14]に出会って国学の研究に入ることになる。その後宣長は真淵と文通による指導を受け始めた。宝暦13年（1763年）5月25日、宣長は、伊勢神宮参宮のために松阪を来訪した真淵に初見し、古事記の注釈について指導を願い、入門を希望した。その年の終わり頃に入門を許可され、翌年の正月に宣長が入門誓詞を出している。真淵は、万葉仮名に慣れるため、『万葉集』の注釈から始めるよう指導した。以後、真淵に触発されて『古事記』の本格的な研究に進む。この真淵との出会いは、宣長の随筆『玉勝間（たまがつま）』[15]に収められている「おのが物まなびの有りしより」と「あがたゐのうしの御さとし言」という文章に記されている[16]。宣長は、一時は紀伊藩に仕えた[17]が、生涯の大半を市井の学者として過ごした。門人も数多く、特に、天明年間 (1781年〜1789年) の末頃から増加する。天明8年 (1788年) 末のまでの門人の合計は164人であるが、その後増加し、宣長が死去したときには487人に達していた。伊勢国の門人が200人と多く、尾張国やその他の地方にも存在していた。職業では町人が約34％、農民約23％、その他となっていた。60歳の時、名古屋・京都・和歌山・大阪・美濃などの各地に旅行に出かけ、旅先で多くの人と交流し、また、各地にいる門人を激励するなどした。寛政5年（1793年）64歳の時から散文集『玉勝間』を書き始めている。その中では、自らの学問・思想・信念について述べている。また、方言や地理的事項について言及し、地名の考証を行い、地誌を記述している。寛政10年（1797年）、69歳にして『古事記伝』を完成させた。起稿して34年後のことである。寛政12年（1800年）、71歳の時、『地名字音転用例』を刊行する。『古事記』『風土記』『和名抄』などから地名の字音の転用例を200近く集め、それを分類整理している[18]。死に臨んでは遺言として、相続その他の一般的な内容の他、命日の定め方[19]、供養、墓のデザインまでにも及ぶ詳細で大部の「遺言書」をのこした。これについては、やまとごころにおける死生観として以前に述べていることといささかズレがあるとして、「謎」であるとする評論もある。本居家の墓がある旧山室村から殿町の森に大正4年に学問の神様として本居神社が遷座して平成七年に社号を本居宣長ノ宮と改称した。その墓は近世以後、1959年（昭和34年）に松阪市内を見渡す妙楽寺の小高い山（生前の宣長が好んだ場所とされる）へ移され、さらに1999年（平成11年）には遺言のデザインに沿った「本居宣長奥津墓（城）」が建造された。
</template>
<script>
export default {
name: "CustumScrollDirective",
methods: {
handleScroll(evt, el) {
// console.log(window.scrollY);
if (window.scrollY > 50) {
el.setAttribute(
"style",
"opacity: 1; transform: translate3d(0, -10px, 0)"
);
}
return window.scrollY > 100;
}
}
};
</script>
<style lang="sass" scoped>
#app
height: 300vh
background: #FFFFDD
.centered
margin: auto
display: table
font-size: 60px
margin-top: 100px
.box
border: 1px solid black
padding: 8px 20px
line-height: 1.3em
opacity: 0
color: black
width: 500px
margin: 0 auto
margin-top: 30px
transform: translateZ(0)
perspective: 1000px
backface-visibility: hidden
background: rgba(255, 255, 255, 0.1)
transition: 1.5s all cubic-bezier(0.39, 0.575, 0.565, 1)
</style>
view raw CustumScrollDirective.vue hosted with ❤ by GitHub
module.exports = {
~~~
// 追加
plugins: ["~plugins/scroll.js"],
~~~
~~~
}
view raw nuxt.config.js hosted with ❤ by GitHub
// pluginsディレクトリ直下
import Vue from "vue";
Vue.directive("scroll", {
inserted: function(el, binding) {
let f = function(evt) {
if (binding.value(evt, el)) {
console.log(el);
console.log(evt);
window.removeEventListener("scroll", f);
}
};
window.addEventListener("scroll", f);
}
});
view raw scroll.js hosted with ❤ by GitHub

参考

タイトルとURLをコピーしました