mirrors/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-17 07:34:38 -05:00
Code Issues Activity

cool animation stuff

Browse source
This commit is contained in:
Ashley 2023-03-10 20:58:17 +00:00
parent 4ac3dfafd9
commit b8e8c2335f
1 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
html/poketube.ejs
View file

@ -81,6 +81,17 @@
margin-top: 50px; margin-top: 50px;
} }
/* CSS */
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in.fade-in-active {
opacity: 1;
}
@media (max-width: 414px) { @media (max-width: 414px) {
.comments-area { .comments-area {
padding: 50px 8px; padding: 50px 8px;
@ -346,6 +357,10 @@
display:none !important; display:none !important;
} }
.fade-in {
opacity: 1 !important;
}
</style> </style>
</noscript> </noscript>
<% if (inv_vid.videoId == "QrGrOK8oZG8") { %> <% if (inv_vid.videoId == "QrGrOK8oZG8") { %>
@ -1040,7 +1055,7 @@ display: block; !important;" autoplay controls
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<% inv.comments.forEach(x =>{ %> <% inv.comments.forEach(x =>{ %>
<div class="<%- x.commentId %>.<%- btoa(x.commentId) %>"> <div class="<%- x.commentId %>.<%- btoa(x.commentId) %> fade-in ">
<div class="comment_<%- x.commentId %>_<%- btoa(btoa(x.commentId)) %>" style="padding: 10px;"> <div class="comment_<%- x.commentId %>_<%- btoa(btoa(x.commentId)) %>" style="padding: 10px;">
<div class="comment-list left-padding" style="background: #333;padding-top: 1px;padding: 10px;border-radius: 30px;padding-top: 0;"> <div class="comment-list left-padding" style="background: #333;padding-top: 1px;padding: 10px;border-radius: 30px;padding-top: 0;">
@ -1167,7 +1182,7 @@ Recommended Videos
<% if (!f) { %> <% if (!f) { %>
<% k.Video.Recommendations.Video.forEach(x => { %> <% k.Video.Recommendations.Video.forEach(x => { %>
<div class="video" > <div class="video fade-in" >
<% if (!optout) { %> <% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" alt="<%= x.Title %>" class="thumbnail " style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;" > <span class="video-length"><%- x.duration || "LIVE"%></span> <a href="/watch?v=<%= x.id %>" alt="<%= x.Title %>" class="thumbnail " style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;" > <span class="video-length"><%- x.duration || "LIVE"%></span>
@ -1412,6 +1427,28 @@ window.addEventListener("load", () => {
window.addEventListener('resize', lazyLoadBg); window.addEventListener('resize', lazyLoadBg);
}); });
const fadeInElements = () => {
const elements = document.querySelectorAll('.fade-in');
const viewportHeight = window.innerHeight;
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementBottom = element.getBoundingClientRect().bottom;
const isVisible = (elementTop < viewportHeight && elementBottom > 0);
if (isVisible || document.fullscreenElement) {
element.classList.add('fade-in-active');
}
});
};
fadeInElements();
window.addEventListener('scroll', fadeInElements);
document.addEventListener('fullscreenchange', () => {
fadeInElements();
});
// Get all anchor links on the page // Get all anchor links on the page
const links = document.querySelectorAll('a'); const links = document.querySelectorAll('a');