Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
はてなブログでマーカーが引けるようになります。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
<script>
// DOM が描画されるまで待つ
setTimeout(vue, 1000);
function vue() {
new Vue({
el: '#container',
components: {
hl: highlight(),
}
});
}
// Just return a Vue component.
function highlight() {
// 2) configuration
const startLineOffset = -100;
class Style {
constructor(highlighter) {
const color = highlighter.color
this['background'] = `linear-gradient(${color}, ${color})`;
this['background-size'] = '0% 45%';
this['background-position'] = '0% 100%';
this['background-repeat'] = 'no-repeat';
this['transition-delay'] = '1s';
this['transition-duration'] = '2.5s';
}
};
// 3) Return a Vue component.
return {
template:
'<span v-bind:style="style">' +
'<slot></slot>' +
'</span>',
props: ['color'],
data: function() {
return {
style: new Style(this),
};
},
mounted: function() {
window.addEventListener('scroll', this.scroll);
},
methods: {
scroll: function() {
if (this.startLine() < this.domRectTop()){
this.style['background-size'] = ' 0% 45%';
} else {
this.style['background-size'] = '100% 45%';
}
},
startLine: function() {
return window.innerHeight + startLineOffset;
},
domRectTop: function() {
return this.$el.getBoundingClientRect().top;
},
},
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.