Files
front/dist/assets/vendor/appear/templates/index.ejs
2021-12-28 13:34:18 +01:00

59 lines
1.4 KiB
Plaintext

<% include header %>
<script>
<%- js.appear %>
appear({
// function to get all elements to track
elements: function elements(){
return [document.getElementById('message')];
},
disappear: function disappear(el){
el.style.display = 'none';
}
});
appear((function(){
var trick, hat, rabbit = true, count = 0;
return {
init: function(){
trick = document.getElementsByClassName('trick')[0];
hat = document.getElementsByClassName('hat')[0];
},
// function to get all elements to track
elements: function elements(){
return document.getElementsByClassName('hat');
},
// function to run when an element is in view
appear: function appear(el){
trick.style.display = 'none';
},
disappear: function disappear(el){
trick.style.display = 'block';
if(++count > 1 && rabbit && Math.floor((Math.random() * 5) + 1) === 1) {
hat.setAttribute('src', '<%- img.hatEmpty %>');
rabbit = false;
} else if (!rabbit) {
rabbit = true;
hat.setAttribute('src', '<%- img.hat %>');
}
},
deltaSpeed: 100,
deltaTimeout: 250,
reappear: true,
bounds: 0
};
}()));
<% include js/prismjs %>
</script>
</head>
<body>
<% locals.message = 'scroll down'; %>
<% include cover %>
<div class="content">
<%- readme %>
</div>
<div class="bar"><img src="<%- img.hat %>" class="hat"></div>
<div class="trick"></div>
</body>
</html>