Created
July 24, 2023 10:47
-
-
Save InfinityScripter/b448d7370e387c56e29ee9abdb10edd1 to your computer and use it in GitHub Desktop.
Stories Slider - vanilla JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<main role="main"> | |
<div class="daily-stories"> | |
<div class="daily-stories__outer"> | |
<div class="daily-stories__container"> | |
<div class="slide" data-timeout="2000"> | |
<img src="https://ostylish.co.uk/stock/7.jpg" alt="Image" title="Title 1" /> | |
</div> | |
<div class="slide" data-timeout="3000"> | |
<img src="https://ostylish.co.uk/stock/2.jpg" alt="Image" title="Title 1" /> | |
</div> | |
<div class="slide video" data-timeout="6000"> | |
<video src="https://ostylish.co.uk/stock/39_n.mp4" preload="true" muted="muted"></video> | |
</div> | |
<div class="slide" data-timeout="3500"> | |
<img src="https://ostylish.co.uk/stock/6.jpg" alt="Image" title="Title 1" /> | |
</div> | |
<div class="slide" data-timeout="2000"> | |
<img src="https://ostylish.co.uk/stock/1.jpg" alt="Image" title="Title 1" /> | |
</div> | |
<div class="slide" data-timeout="4000"> | |
<img src="https://ostylish.co.uk/stock/8.jpg" alt="Image" title="Title 1" /> | |
</div> | |
<div class="slide" data-timeout="3000"> | |
<img src="https://ostylish.co.uk/stock/5.jpg" alt="Image" title="Title 1" /> | |
</div> | |
</div> | |
</div> | |
<div class="progress-bars" data-count="4"> | |
<div class="bar" data-index="0"><span style="animation-duration: 2000ms;"></span></div> | |
<div class="bar" data-index="1"><span style="animation-duration: 3000ms;"></span></div> | |
<div class="bar video" data-index="2"><span style="animation-duration: 6000ms"></span></div> | |
<div class="bar" data-index="3"><span style="animation-duration: 3500ms;"></span></div> | |
<div class="bar" data-index="4"><span style="animation-duration: 2000ms;"></span></div> | |
<div class="bar" data-index="5"><span style="animation-duration: 4000ms;"></span></div> | |
<div class="bar" data-index="6"><span style="animation-duration: 3000ms;"></span></div> | |
</div> | |
<a class="logo" href="#" title="Cretive Design Lab"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> | |
<path fill="#f6bb42" d="M63 32H53c0-5.801-2.35-11.051-6.15-14.851l7.07-7.069C59.53 15.689 63 23.439 63 32z" /> | |
<path fill="#8cc152" d="M53 32h10c0 8.55-3.46 16.3-9.08 21.909l-7.07-7.06C50.65 43.05 53 37.8 53 32z" /> | |
<path fill="#37bc9b" d="M53.92 53.909v.011C48.31 59.529 40.57 63 32 63V53c5.8 0 11.05-2.351 14.85-6.15z" /> | |
<path fill="#e9573f" d="M53.92 10.08l-7.07 7.069C43.05 13.35 37.8 11 32 11V1c8.57 0 16.31 3.47 21.92 9.08z" /> | |
<path fill="#ffce54" d="M53 32H43c0-3.04-1.23-5.79-3.22-7.78l7.069-7.07C50.65 20.949 53 26.199 53 32z" /> | |
<path fill="#48cfad" d="M39.78 39.779l7.069 7.07C43.05 50.649 37.8 53 32 53V43c3.04 0 5.79-1.23 7.78-3.221z" /> | |
<path fill="#4a89dc" d="M32 53v10c-8.56 0-16.31-3.471-21.92-9.08l7.07-7.07C20.95 50.649 26.21 53 32 53z" /> | |
<path fill="#5d9cec" d="M32 43v10c-5.79 0-11.05-2.351-14.85-6.15l7.069-7.07C26.21 41.77 28.97 43 32 43z" /> | |
<path fill="#ed5565" d="M32 11v10c-3.03 0-5.78 1.229-7.77 3.22h-.01l-7.069-7.07C20.95 13.35 26.21 11 32 11z" /> | |
<path fill="#967adc" d="M17.15 46.85l-7.07 7.07C4.47 48.31 1 40.56 1 32h10c0 5.8 2.35 11.05 6.15 14.85z" /> | |
<path fill="#a0d468" d="M43.01 32H53c0 5.8-2.35 11.05-6.15 14.85l-7.069-7.07C41.77 37.79 43 35.029 43 32z" /> | |
<path fill="#ec87c0" d="M17.15 17.149l7.069 7.07C22.23 26.21 21 28.96 21 32H11c0-5.801 2.35-11.051 6.15-14.851z" /> | |
<path fill="#ac92ec" d="M24.22 39.779l-7.069 7.07C13.35 43.05 11 37.8 11 32h10c0 3.029 1.23 5.79 3.22 7.779z" /> | |
<path fill="#d770ad" d="M10.08 10.08l7.07 7.069C13.35 20.949 11 26.199 11 32H1c0-8.561 3.47-16.311 9.08-21.92z" /> | |
<path fill="#fc6e51" d="M46.85 17.149l-7.069 7.07C37.79 22.229 35.04 21 32 21V11c5.8 0 11.05 2.35 14.85 6.149z" /> | |
<path fill="#da4453" d="M32 1v10c-5.79 0-11.05 2.35-14.85 6.149l-7.07-7.069C15.69 4.47 23.44 1 32 1z" /> | |
</svg> | |
</a> | |
<div class="context-menu-container"> | |
<a href="#" class="button"> | |
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> | |
<circle fill="#ffffff" cx="7" cy="16" r="2" /> | |
<circle fill="#ffffff" cx="16" cy="16" r="2" /> | |
<circle fill="#ffffff" cx="25" cy="16" r="2" /> | |
</svg> | |
</a> | |
<div class="context-menu"> | |
<a href="#" id="c-menu_save" target="_blank" class="link">Save picture</a> | |
<a href="#" id="c-menu_share" target="_blank" class="link">Share</a> | |
<a href="https://creative-design-lab.com" id="c-menu_copy" class="link">Copy link</a> | |
<a href="#" id="c-menu_cancel" class="link">Cancel</a> | |
</div> | |
</div> | |
</div> | |
<span id="prev-slide"></span> | |
<span id="next-slide"></span> | |
<div class="central-area" data-state="playing"> | |
<div class="button"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
<circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> | |
<path id="path_play" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 8l6 4-6 4V8z" /> | |
<path id="path_pause" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 15V9M14 15V9" /> | |
</svg> | |
</div> | |
</div> | |
</main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const container = document.querySelector(".daily-stories__outer"); | |
const imgs_wrapper = document.querySelector(".daily-stories__container"); | |
const imgs = document.querySelectorAll(".daily-stories .slide"); | |
const bars = document.querySelectorAll(".progress-bars .bar"); | |
const prevBtn = document.querySelector("#prev-slide"); | |
const nextBtn = document.querySelector("#next-slide"); | |
const centralArea = document.querySelector(".central-area"); | |
const total_imgs = imgs.length; | |
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); | |
const CM_container = document.querySelector(".context-menu-container"); | |
const CM_button = CM_container.querySelector("a.button"); | |
const cm_link_save = document.querySelector("#c-menu_save"); | |
const cm_link_share = document.querySelector("#c-menu_share"); | |
const cm_link_copy = document.querySelector("#c-menu_copy"); | |
const cm_link_cancel = document.querySelector("#c-menu_cancel"); | |
let entryURL; | |
let container_width = container.clientWidth; | |
let current_index = 0; | |
let pointer_is_down = false; | |
let [start_x, end_x] = [0, 0]; | |
let move_distance = 0; | |
let timersSet = []; | |
let dataSet = []; | |
let timer; | |
function reload() { | |
window.location.reload(false); | |
} | |
function init() { | |
container_width = container.clientWidth; | |
CM_container.style.width = `${container_width - 30}px`; | |
imgs_wrapper.style.width = `${container_width * total_imgs}px`; | |
} | |
function collections() { | |
for (var i = 0; i < total_imgs; ++i) { | |
timersSet.push(imgs[i].getAttribute("data-timeout")); | |
if (imgs[i].classList.contains("video")) { | |
dataSet.push(imgs[i].querySelector("video").getAttribute("src")); | |
} else { | |
dataSet.push(imgs[i].querySelector("img").getAttribute("src")); | |
} | |
} | |
} | |
function redirect(url) { | |
if (url !== null) { | |
window.location = "https://f5.local/" + url; // Redirect to "entry" URL | |
} else { | |
window.location = "https://f5.local/"; // Redirect to homepage | |
} | |
} | |
function slidesAutoPlay() { | |
clearTimeout(timer); | |
timer = setTimeout(() => { | |
if (current_index < total_imgs - 1) { | |
nextSlide(); | |
} else { | |
console.log("End of Story"); | |
toaster("End of Story for Today! 😎", "info"); | |
// setCookie('F5_Daily', true); // Set cookies - daily seen | |
// deleteCookie('EntryPageID'); // Remove temp "entry" URL cookie | |
// setTimeout( redirect(entryURL), 50); // Redirect to corresponding page | |
} | |
}, timersSet[current_index]); | |
} | |
// Mousemove and Touchmove Event | |
function createDraggingEffects() { | |
if (document.body.classList.contains("menu-open")) return; // Disallow slides dragging if context menu is open | |
const max_distance = 2; | |
const scrolled_distance = | |
current_index * container_width + (start_x - end_x) / max_distance; | |
switchImages(-scrolled_distance); | |
} | |
// Set slide "active" | |
function setSlideActive(i) { | |
const currentSlide = imgs[i]; | |
imgs.forEach((el) => el.classList.remove("active")); | |
currentSlide.classList.add("active"); | |
playVideo(); | |
} | |
// Set bar "active / animate" | |
function setBarActive(i) { | |
bars.forEach((el, index) => { | |
if (index >= i) { | |
el.classList.remove("animate"); | |
} | |
if (index < i) { | |
el.classList.add("seen"); | |
el.classList.remove("animate"); | |
} else { | |
el.classList.remove("seen"); | |
} | |
}); | |
bars[i].classList.add("animate"); | |
} | |
// Set current slide active | |
function setActive() { | |
if (current_index < total_imgs - 1) { | |
// if ain't LAST | |
setBarActive(parseInt(current_index, 10) + 1); | |
} else { | |
setBarActive(0); | |
} | |
setTimeout(() => { | |
setBarActive(current_index); | |
setSlideActive(current_index); | |
}, 1); | |
} | |
// Mouseup and Touchend Event | |
function calculateFinalMoveDistance() { | |
const scrolled_distance = Math.abs(start_x - end_x); | |
const minimum_distance = 50; | |
if (document.body.classList.contains("menu-open")) return; // Disallow slides switching if context menu is open | |
if (scrolled_distance < minimum_distance && current_index !== 0) { | |
move_distance = -(current_index * container_width); | |
switchImages(); | |
return false; | |
} | |
stopVideo(); // Stop video on current slide if any were playing | |
if ((start_x > end_x) & (current_index < total_imgs - 1)) { | |
// scroll next | |
current_index++; | |
} else if (start_x < end_x && current_index > 0) { | |
// scroll prev | |
current_index--; | |
} else if (current_index === 0) { | |
setBarActive(1); // hack to reset animation's play state of first slide | |
} | |
move_distance = -(current_index * container_width); | |
switchImages(move_distance); | |
updateSaveImgSrc(); | |
setActive(); | |
slidesAutoPlay(); | |
} | |
// Switch to Next Slide | |
function nextSlide() { | |
if (current_index < total_imgs - 1) { | |
// check if it isn't LAST slide | |
if (document.body.classList.contains("menu-open")) return; // Disallow slides switching if context menu is open | |
document.body.classList.remove("paused"); // Un-Pause slider | |
stopVideo(); // Stop video on current slide if any were playing | |
current_index++; | |
move_distance = -(current_index * container_width); | |
switchImages(move_distance); | |
updateSaveImgSrc(); | |
setActive(); | |
slidesAutoPlay(); | |
} | |
} | |
// Switch to Prev Slide | |
function prevSlide() { | |
if (current_index >= 0) { | |
// check if it isn't FIRST slide | |
if (document.body.classList.contains("menu-open")) return; // Disallow slides switching if context menu is open | |
document.body.classList.remove("paused"); // Un-Pause slider | |
stopVideo(); // Stop video on current slide if any were playing | |
if (current_index > 0) { | |
// decrease index only if larger than 0 | |
current_index--; | |
} | |
move_distance = -(current_index * container_width); | |
switchImages(move_distance); | |
updateSaveImgSrc(); | |
setActive(); | |
slidesAutoPlay(); | |
} | |
} | |
// Switch to specific Slide | |
function slideTo(i) { | |
if (document.body.classList.contains("menu-open")) return; // Disallow slides switching if context menu is open | |
document.body.classList.remove("paused"); // Un-Pause slider | |
stopVideo(); // Stop video on current slide if any were playing | |
current_index = i; | |
move_distance = -(current_index * container_width); | |
switchImages(move_distance); | |
updateSaveImgSrc(); | |
setActive(); | |
slidesAutoPlay(); | |
} | |
function pauseVideo() { | |
if (isVideo()) { | |
const v = imgs[current_index].querySelector("video"); | |
v.muted = true; | |
v.pause(); | |
} | |
} | |
function playVideo() { | |
if (isVideo()) { | |
const v = imgs[current_index].querySelector("video"); | |
v.muted = true; | |
v.play(); | |
} | |
} | |
function stopVideo() { | |
if (isVideo()) { | |
const v = imgs[current_index].querySelector("video"); | |
v.pause(); | |
v.currentTime = 0; | |
} | |
} | |
function toggleMute() { | |
if (isVideo()) { | |
const v = imgs[current_index].querySelector("video"); | |
v.muted = !v.muted; | |
} | |
} | |
function cancelAnimation() { | |
clearTimeout(timer); | |
} | |
// Switch Images | |
function switchImages(scrolled_number) { | |
const distance = scrolled_number || move_distance; | |
imgs_wrapper.style.transform = `translate3d(${distance}px, 0px, 0px)`; | |
} | |
// Mouseleave event | |
function handleMouseLeave(e) { | |
if (!pointer_is_down) return false; | |
pointer_is_down = false; | |
[start_x, end_x] = [0, 0]; | |
switchImages(); | |
} | |
// Update SRC of "Save Image" button on context menu | |
function updateSaveImgSrc() { | |
cm_link_save.href = dataSet[current_index]; | |
} | |
// Toggle Play/Pause of Carousel | |
function toggleSliderAutoplay(e) { | |
const state = e.target.getAttribute("data-state"); | |
// Return if Context Menu is active | |
if (CM_container.classList.contains("active")) { | |
return; | |
} | |
if (state === "paused") { | |
centralArea.setAttribute("data-state", "playing"); | |
document.body.classList.remove("paused"); | |
setActive(); | |
slidesAutoPlay(); | |
stopVideo(); | |
playVideo(); | |
} else { | |
centralArea.setAttribute("data-state", "paused"); | |
document.body.classList.add("paused"); | |
cancelAnimation(); | |
pauseVideo(); | |
} | |
} | |
// Check if Slide contains video | |
function isVideo() { | |
return imgs[current_index].classList.contains("video"); | |
} | |
// Handle Context-Menu | |
function CM_Handle(e) { | |
e.preventDefault(); | |
CM_container.classList.toggle("active"); | |
if (CM_container.classList.contains("active")) { | |
document.body.classList.add("menu-open"); | |
cancelAnimation(); | |
pauseVideo(); | |
updateSaveImgSrc(); | |
} else { | |
document.body.classList.remove("menu-open"); | |
setActive(); | |
slidesAutoPlay(); | |
stopVideo(); | |
playVideo(); | |
} | |
} | |
function copyText(element) { | |
const textToCopy = element.href; | |
const tempInput = document.createElement("input"); | |
tempInput.type = "text"; | |
tempInput.value = textToCopy; | |
document.body.appendChild(tempInput); | |
tempInput.select(); | |
document.execCommand("Copy"); | |
document.body.removeChild(tempInput); | |
toaster("Link copied to clipboard", "success"); | |
} | |
function toaster(message, type, timeout = 5000) { | |
const body = document.body; | |
if (typeof type === "undefined") { | |
return; | |
} | |
const toast = document.createElement("div"); | |
toast.classList.add("toast-notification", type); | |
toast.innerHTML = message; | |
body.appendChild(toast); | |
setTimeout(() => { | |
toast.classList.add("active"); | |
}, 100); | |
setTimeout(() => { | |
toast.classList.remove("active"); | |
}, timeout - 500); | |
setTimeout(() => { | |
toast.parentNode.removeChild(toast); | |
}, timeout); | |
} | |
// Bind Events on document ready | |
document.addEventListener("DOMContentLoaded", () => { | |
init(); | |
collections(); | |
setSlideActive(0); | |
setBarActive(0); | |
slidesAutoPlay(); | |
if (isMobile) { | |
document.body.classList.add("mobile"); | |
} | |
}); | |
// Handle PREV Slide btn | |
prevBtn.addEventListener("click", (e) => { | |
e.preventDefault(); | |
prevSlide(); | |
}); | |
// Handle NEXT Slide btn | |
nextBtn.addEventListener("click", (e) => { | |
e.preventDefault(); | |
nextSlide(); | |
}); | |
// Handle click on Central Area - Play/Pause animation | |
centralArea.addEventListener("click", (e) => { | |
e.preventDefault(); | |
toggleSliderAutoplay(e); | |
}); | |
// Handle Mouse events | |
// container.addEventListener("mousedown", (e) => { | |
// e.preventDefault(); | |
// pointer_is_down = true; | |
// start_x = e.pageX; | |
// }); | |
// container.addEventListener("mousemove", (e) => { | |
// e.preventDefault(); | |
// if (!pointer_is_down) return false; | |
// end_x = e.pageX; | |
// createDraggingEffects(); | |
// }); | |
// container.addEventListener("mouseup", (e) => { | |
// e.preventDefault(); | |
// pointer_is_down = false; | |
// calculateFinalMoveDistance(); | |
// }); | |
// container.addEventListener("mouseleave", handleMouseLeave); | |
// // Handle Touch events | |
// container.addEventListener("touchstart", (e) => { | |
// pointer_is_down = true; | |
// start_x = e.touches[0].pageX; | |
// }); | |
// container.addEventListener("touchmove", (e) => { | |
// if (!pointer_is_down) return false; | |
// end_x = e.touches[0].pageX; | |
// createDraggingEffects(); | |
// }); | |
// container.addEventListener("touchend", (e) => { | |
// pointer_is_down = false; | |
// calculateFinalMoveDistance(); | |
// }); | |
// Handle Window resize | |
window.addEventListener("resize", reload); | |
// Trigger Context Menu | |
CM_button.addEventListener("click", CM_Handle); | |
// Dismiss Context Menu | |
cm_link_cancel.addEventListener("click", CM_Handle); | |
// Copy STORIES Link from Context Menu | |
cm_link_copy.addEventListener("click", (e) => { | |
e.preventDefault(); | |
copyText(e.target); | |
}); | |
// Handle Progress Bar Click | |
bars.forEach((bar) => { | |
bar.addEventListener("click", () => { | |
slideTo(bar.getAttribute("data-index")); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
box-sizing: border-box; | |
line-height: 1.15; | |
background-color: #000; | |
position: relative; | |
-webkit-text-size-adjust: 100%; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
max-height: 100vh; | |
max-height: -webkit-fill-available; | |
height: -webkit-fill-available; | |
height: -moz-fill-available; | |
height: fill-available; | |
} | |
*, | |
::after, | |
::before { | |
box-sizing: inherit; | |
} | |
blockquote, | |
body, | |
dd, | |
dl, | |
dt, | |
fieldset, | |
figure, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
hr, | |
html, | |
iframe, | |
legend, | |
li, | |
ol, | |
p, | |
pre, | |
textarea, | |
ul { | |
margin: 0; | |
padding: 0; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-size: 100%; | |
font-weight: 400; | |
} | |
ul { | |
list-style: none; | |
} | |
:root { | |
-moz-tab-size: 4; | |
tab-size: 4; | |
} | |
body { | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", | |
"Segoe UI Symbol"; | |
min-height: 100vh; | |
min-height: -webkit-fill-available; | |
max-height: 100vh; | |
max-height: -webkit-fill-available; | |
height: -webkit-fill-available; | |
height: -moz-fill-available; | |
height: fill-available; | |
position: relative; | |
display: block; | |
padding: 0; | |
margin: 0; | |
text-align: center; | |
background-color: #000; | |
} | |
main { | |
position: relative; | |
text-align: center; | |
display: block; | |
padding: 0; | |
margin: 0; | |
min-height: 100vh; | |
min-height: -webkit-fill-available; | |
max-height: 100vh; | |
max-height: -webkit-fill-available; | |
height: -webkit-fill-available; | |
height: -moz-fill-available; | |
height: fill-available; | |
} | |
hr { | |
height: 0; | |
} | |
abbr[title] { | |
text-decoration: underline dotted; | |
} | |
b, | |
strong { | |
font-weight: bolder; | |
} | |
code, | |
kbd, | |
pre, | |
samp { | |
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, | |
monospace; | |
font-size: 1em; | |
} | |
small { | |
font-size: 80%; | |
} | |
sub, | |
sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
sub { | |
bottom: -0.25em; | |
top: -0.5em; | |
} | |
button, | |
input, | |
optgroup, | |
select, | |
textarea { | |
font-family: inherit; | |
font-size: 100%; | |
line-height: 1.15; | |
margin: 0; | |
} | |
button, | |
select { | |
text-transform: none; | |
} | |
[type="button"], | |
[type="reset"], | |
[type="submit"], | |
button { | |
-webkit-appearance: none; | |
} | |
[type="button"]::-moz-focus-inner, | |
[type="reset"]::-moz-focus-inner, | |
[type="submit"]::-moz-focus-inner, | |
button::-moz-focus-inner { | |
border-style: none; | |
padding: 0; | |
} | |
[type="button"]:-moz-focusring, | |
[type="reset"]:-moz-focusring, | |
[type="submit"]:-moz-focusring, | |
button:-moz-focusring { | |
outline: 1px dotted ButtonText; | |
} | |
audio, | |
embed, | |
iframe, | |
img, | |
object, | |
video { | |
height: auto; | |
max-width: 100%; | |
} | |
.daily-stories { | |
display: block; | |
position: relative; | |
width: 56.25vh; | |
max-width: 100vw; | |
height: 100vh; | |
margin: 0 auto; | |
background: black; | |
overflow: hidden; | |
} | |
.daily-stories__container { | |
width: 56.25vh; | |
height: 100vh; | |
background: black; | |
overflow: hidden; | |
display: flex; | |
position: relative; | |
transition: transform 0.25s cubic-bezier(0.8, 0, 0.2, 1); | |
will-change: auto; | |
touch-action: manipulation; | |
transform: translate3d(0px, 0px, 0px); | |
backface-visibility: hidden; | |
} | |
.slide { | |
position: relative; | |
display: block; | |
width: 56.25vh; | |
max-width: 100vw; | |
height: 100vh; | |
min-height: 100vh; | |
max-height: 100vh; | |
overflow: hidden; | |
will-change: opacity; | |
opacity: 0; | |
filter: blur(0); | |
transition: opacity 0.5s ease, filter 0.25s ease; | |
} | |
.slide.active { | |
opacity: 1; | |
} | |
body.menu-open .slide.active { | |
filter: blur(10px); | |
} | |
.slide img, | |
.slide video { | |
width: 56.25vh; | |
/*min-width: 56.25vh;*/ | |
max-width: 100vw; | |
height: 100vh; | |
min-height: 100vh; | |
max-height: 100vh; | |
display: block; | |
position: relative; | |
padding: 0; | |
margin: 0; | |
object-fit: contain; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
pointer-events: none; | |
} | |
#prev-slide { | |
display: block; | |
width: 32px; | |
height: 32px; | |
text-align: center; | |
cursor: pointer; | |
position: absolute; | |
top: calc(50% - 16px); | |
left: calc(50% - 35vh - 16px); | |
border-radius: 50%; | |
background-color: #fff; | |
overflow: hidden; | |
opacity: 0.85; | |
transition: opacity 0.25s ease; | |
} | |
#next-slide { | |
display: block; | |
width: 32px; | |
height: 32px; | |
text-align: center; | |
cursor: pointer; | |
position: absolute; | |
top: calc(50% - 16px); | |
left: calc(50% + 35vh - 16px); | |
border-radius: 50%; | |
background-color: #fff; | |
overflow: hidden; | |
opacity: 0.85; | |
transition: opacity 0.25s ease; | |
} | |
#prev-slide::before, | |
#next-slide::before { | |
content: ""; | |
display: block; | |
position: absolute; | |
width: 12px; | |
height: 12px; | |
top: 10px; | |
border-right: 4px solid #555; | |
border-bottom: 4px solid #555; | |
} | |
#prev-slide::before { | |
left: 11px; | |
transform: rotate(-225deg); | |
} | |
#next-slide::before { | |
left: 8px; | |
transform: rotate(-45deg); | |
} | |
#prev-slide:hover, | |
#next-slide:hover { | |
opacity: 1; | |
} | |
#prev-slide:hover::before, | |
#next-slide:hover::before { | |
border-right-color: #043cb7; | |
border-bottom-color: #043cb7; | |
} | |
body.mobile #prev-slide, | |
body.mobile #next-slide { | |
display: none; | |
} | |
/*@media (max-width: 800px) {*/ | |
#prev-slide, | |
#next-slide { | |
// display: none; | |
} | |
/*}*/ | |
.central-area { | |
position: absolute; | |
width: 30vh; | |
height: 75vh; | |
// background-color: tomato; | |
z-index: 1; | |
display: block; | |
top: 15vh; | |
left: calc(50% - 15vh); | |
} | |
@media (min-width: 800px) { | |
.central-area { | |
width: 55vh; | |
top: 12.5vh; | |
left: calc(50% - 27.5vh); | |
} | |
} | |
.central-area .button { | |
width: 48px; | |
height: 48px; | |
display: block; | |
position: absolute; | |
top: calc(50% - 24px - 2.5vh); | |
left: calc(50% - 24px); | |
border-radius: 50%; | |
cursor: pointer; | |
opacity: 0; | |
pointer-events: none; | |
transition: opacity 0.25s ease; | |
} | |
@media (min-width: 800px) { | |
.central-area .button { | |
top: calc(50% - 24px); | |
} | |
} | |
.central-area:hover .button { | |
opacity: 0.5; | |
} | |
.central-area .button svg { | |
display: block; | |
position: relative; | |
width: 100%; | |
height: 100%; | |
} | |
.central-area .button svg path { | |
display: none; | |
} | |
.central-area[data-state="paused"] .button svg #path_play { | |
display: block; | |
} | |
.central-area[data-state="playing"] .button svg #path_pause { | |
display: block; | |
} | |
body.menu-open .central-area .button { | |
opacity: 0; | |
} | |
.progress-bars { | |
position: absolute; | |
padding: 10px 5px 87px; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100px; | |
display: flex; | |
} | |
.progress-bars::before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
display: block; | |
background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); | |
} | |
.progress-bars[data-count="1"] .bar { | |
width: calc(100% - 6px); | |
} | |
.progress-bars[data-count="2"] .bar { | |
width: calc(100% / 2 - 6px); | |
} | |
.progress-bars[data-count="3"] .bar { | |
width: calc(100% / 3 - 6px); | |
} | |
.progress-bars[data-count="4"] .bar { | |
width: calc(100% / 4 - 6px); | |
} | |
.progress-bars[data-count="5"] .bar { | |
width: calc(100% / 5 - 6px); | |
} | |
.progress-bars[data-count="6"] .bar { | |
width: calc(100% / 6 - 6px); | |
} | |
.progress-bars[data-count="7"] .bar { | |
width: calc(100% / 7 - 6px); | |
} | |
.progress-bars[data-count="8"] .bar { | |
width: calc(100% / 8 - 6px); | |
} | |
.progress-bars[data-count="9"] .bar { | |
width: calc(100% / 9 - 6px); | |
} | |
.progress-bars[data-count="10"] .bar { | |
width: calc(100% / 10 - 6px); | |
} | |
.progress-bars[data-count="11"] .bar { | |
width: calc(100% / 11 - 6px); | |
} | |
.progress-bars[data-count="12"] .bar { | |
width: calc(100% / 12 - 6px); | |
} | |
.progress-bars[data-count="13"] .bar { | |
width: calc(100% / 13 - 6px); | |
} | |
.progress-bars[data-count="14"] .bar { | |
width: calc(100% / 14 - 6px); | |
} | |
.progress-bars[data-count="15"] .bar { | |
width: calc(100% / 15 - 6px); | |
} | |
.progress-bars[data-count="16"] .bar { | |
width: calc(100% / 16 - 6px); | |
} | |
.progress-bars[data-count="17"] .bar { | |
width: calc(100% / 17 - 6px); | |
} | |
.progress-bars[data-count="18"] .bar { | |
width: calc(100% / 18 - 6px); | |
} | |
.progress-bars[data-count="19"] .bar { | |
width: calc(100% / 19 - 6px); | |
} | |
.progress-bars[data-count="20"] .bar { | |
width: calc(100% / 20 - 6px); | |
} | |
.bar { | |
display: block; | |
position: relative; | |
border-radius: 3px; | |
height: 3px; | |
margin: 0 3px; | |
cursor: pointer; | |
overflow: hidden; | |
background-color: rgba(255, 255, 255, 0.4); | |
} | |
.bar span { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
cursor: pointer; | |
height: 100%; | |
width: 100%; | |
border-radius: 3px; | |
background-color: #fff; | |
will-change: auto; | |
transform: translateX(-101%) rotate(0deg); | |
} | |
.bar.seen span { | |
transform: translateX(0%) rotate(0deg); | |
} | |
.bar.animate span { | |
animation: bar 0s 0s linear both; | |
} | |
body.paused .bar.animate span, | |
body.menu-open .bar.animate span { | |
animation-play-state: paused; | |
} | |
.logo { | |
position: absolute; | |
width: 75px; | |
height: 75px; | |
display: block; | |
top: 24px; | |
right: 8px; | |
z-index: 2; | |
} | |
@media (min-width: 640px) { | |
.logo { | |
width: 9vh; | |
height: 9vh; | |
right: 12px; | |
max-width: 100px; | |
max-height: 100px; | |
} | |
} | |
@media (min-width: 1024px) { | |
.logo { | |
right: 15px; | |
} | |
} | |
.logo svg { | |
display: block; | |
width: 100%; | |
height: 100%; | |
position: relative; | |
pointer-events: none; | |
} | |
.context-menu-container { | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 50px; | |
bottom: 15px; | |
right: 15px; | |
z-index: 3; | |
} | |
.context-menu-container > .button { | |
display: block; | |
position: absolute; | |
bottom: -5px; | |
right: 0; | |
width: 50px; | |
height: 50px; | |
} | |
@media (min-width: 640px) { | |
.context-menu-container > .button { | |
right: 5px; | |
} | |
} | |
@media (min-width: 768px) { | |
.context-menu-container > .button { | |
right: 10px; | |
} | |
} | |
@media (min-width: 1024px) { | |
.context-menu-container > .button { | |
right: 15px; | |
} | |
} | |
.context-menu-container > .button svg { | |
display: block; | |
position: relative; | |
width: 100%; | |
height: 100%; | |
pointer-events: none; | |
} | |
.context-menu-container.active > .button { | |
display: none; | |
} | |
.context-menu-container .context-menu { | |
position: absolute; | |
display: block; | |
bottom: 0; | |
right: 0; | |
height: auto; | |
width: 100%; | |
opacity: 0; | |
visibility: hidden; | |
will-change: auto; | |
transform: scale(1.05) rotate(0deg); | |
transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out, | |
transform 0.25s ease-in-out; | |
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.5) inset; | |
} | |
.context-menu-container.active .context-menu { | |
opacity: 1; | |
visibility: visible; | |
transform: scale(1) rotate(0deg); | |
} | |
.context-menu-container .context-menu .link { | |
display: block; | |
background-color: #fff; | |
width: 100%; | |
padding: 18px; | |
text-align: center; | |
position: relative; | |
color: #000; | |
text-decoration: none; | |
border-bottom: 1px solid #eee; | |
font-weight: bold; | |
} | |
.context-menu-container .context-menu .link:last-child { | |
margin-top: 10px; | |
} | |
.toast-notification { | |
position: fixed; | |
display: inline-block; | |
text-align: center; | |
top: 3rem; | |
left: 50%; | |
color: #333; | |
border-radius: 0.25rem; | |
padding: 1rem 2rem; | |
margin: 0 auto; | |
font-size: 0.875rem; | |
font-weight: bold; | |
pointer-events: none; | |
z-index: 99; | |
will-change: auto; | |
opacity: 0; | |
transform: translate3d(-50%, 0.5rem, 0); | |
max-width: 300px; | |
width: 100%; | |
transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out, | |
transform 0.35s ease-in-out; | |
&.success { | |
background-color: #1bd861; | |
} | |
&.error { | |
background-color: #eb5555; | |
} | |
&.info { | |
background-color: #0096ff; | |
} | |
&.active { | |
opacity: 1; | |
transform: translate3d(-50%, 0, 0); | |
} | |
} | |
@keyframes bar { | |
from { | |
transform: translateX(-101%) rotate(0deg); | |
} | |
to { | |
transform: translateX(0%) rotate(0deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment