Javascript - Skeleton Content Placeholder

Javascript - Skeleton Content Placeholder - javascript

This function displays a style for :empty HTML elements (designed to look like a placeholder) until page load, then injects some content into these elements thus removing the :empty style and revealing the content.
How do I simply show the placeholders until existing HTML content is loaded without using :empty and injecting it through JS? I want to already have data for the h1, p and img and have a placeholder show for these elements during page load.
var
image = document.querySelector('.sk-image'),
heading = document.querySelector('.sk-heading'),
paragraph = document.querySelector('.sk-paragraph');
var content = false;
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
if (content === false) {
content = true;
image.src = 'http://unsplash.it/400/400?image=564';
heading.innerHTML = 'Some heading';
paragraph.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa rerum porro aut laboriosam animi.';
} else {
content = false;
image.src = '';
heading.innerHTML = '';
paragraph.innerHTML = '';
}
}, 2000);
}, false);
body {
display: flex
}
.card {
width: 100%;
max-width: 300px;
min-height: 400px;
margin: 10px;
background: #fff;
border-bottom: 1px solid #d8d8d8;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.card__image {
position: relative;
width: 100%;
height: 0;
padding-bottom: 60%;
background: #eee;
overflow: hidden;
}
.card__image:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.65), rgba(0, 0, 0, 0));
transform: translateX(-100%);
animation: loading 1.5s infinite;
}
.card__image img {
position: relative;
max-width: 100%;
z-index: 1;
}
.card__content {
padding: 20px;
}
.card__heading {
margin-top: 0;
margin-bottom: 10px;
font-family: 'Alegreya Sans', sans-serif;
font-weight: 400;
}
.card__heading:empty {
width: 100%;
height: 35px;
background: #d8d8d8;
margin-bottom: 20px;
}
.card__paragraph {
margin: 0;
font-size: 20px;
line-height: 1.35;
}
.card__paragraph:empty {
width: 90%;
height: 20px;
background: #d8d8d8;
}
.button {
margin: 10px;
padding: 15px 20px;
background: #2aa1c0;
border: 0;
color: #fff;
}
.button:hover {
background: #0e647d;
}
#-moz-keyframes loading {
100% {
transform: translateX(100%);
}
}
#-webkit-keyframes loading {
100% {
transform: translateX(100%);
}
}
#-o-keyframes loading {
100% {
transform: translateX(100%);
}
}
#keyframes loading {
100% {
transform: translateX(100%);
}
}
<div class="card">
<div class="card__image">
<img class="sk-image" alt="" />
</div>
<div class="card__content">
<h1 class="card__heading sk-heading"></h1>
<p class="card__paragraph sk-paragraph"></p>
</div>
</div>
<div class="card">
<div class="card__image">
<img class="sk-image" alt="" />
</div>
<div class="card__content">
<h1 class="card__heading sk-heading"></h1>
<p class="card__paragraph sk-paragraph"></p>
</div>
</div>

Related

How do I make a paragraph fade in everytime I swipe on my 3d carousel swiper?

What's going on and what should be going on
I built a 3 d carousel popup. There are 3 slides; each slide must show a paragraph if it's "selected".
The z-index for the "selected" one always equals 1, the one on the right equals 0 and the one on the left equals -1.
I tried to add and remove visibility from the paragraphs if the z-index for the slide = 1. But unfortunately,your text it only works when I open the page because that's when the z-index is being checked I guess.
I would like to fade in the paragraphing that belongs to the slide every time it's "selected".
(I know my code for this might be 100% wrong.)
What I think should work...
I think I might need some sort of a swipe event listener but I'm not sure and I don't know how to do one of those.
HTML
`
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<button onclick="Size()"></button>
<div class="sizeGuidance">
<form data-multi-step2>
<div class="whatGuideD" data-step2>
<br>
<h1>The Size Guide</h1>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div id="sw1" class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div id="sw2" class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-bullseye fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div id="sw3" class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-square-poll-horizontal fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" class="d1">Get to know your size in less than 1 minute. <br> - no measuring bands required.</p>
<p id="d2" class="d1">Get a more accurate size recommendation. <br> - no measuring bands required.</p>
<p id="d3" class="d1">You already know your measurments? <br> here is the size guide.</p>
</div>
</div>
</form>
<form data-multi-step2M>
<div class="whatGuideM" data-step2M>
<br>
<h1>The Size Guide</h1>
<br>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-bullseye fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-square-poll-horizontal fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" ></p>
</div>
</div>
</form>
</div>
</body>
</html>
`
CSS
`
<style>
.d1 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d1.showDisc1{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d2 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d2.showDisc2{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d3 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d3.showDisc3{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
</style>
<style>
/*only desktop*/
.whatGuideD {
display: none;
}
#media only screen and (min-width: 900px) {
.whatGuideD {display: block;
}
.whatGuideM {display: none;
}
}
</style>
<!-- Demo styles -->
<style>
html {
height: -webkit-fill-available;
}
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
height: -webkit-fill-available;
}
.swiper {
width: 100%;
padding-top: 0;
padding-bottom: 50px;
padding-left: 0;
padding-right: 0;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 60%;
max-width: 500px;
height: 75vh;
max-height: 500px;
border-radius: 15px;
background: rgb(238, 235, 241);
box-shadow: 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
-10px -10px 10px -1px rgba(255, 255, 255, 0.70);
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #fff6)
}
.swiper-slide button {
display: block;
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
Font-family: 'Bebas Neue', cursive;
font-size: 5vw;
margin: 0;
}
.pickGuideD {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 48px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideD:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
</style>
<style>
.pickGuideM {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideM:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
.close-button1D {
background-color: rgb(238, 235, 241);
color: rgb(0, 0, 0);
cursor: pointer;
font-size: 30px;
float: right;
margin-right: 40px;
border: 0;
}
::-webkit-scrollbar {
display: none;
}
</style>
<style>
.whatGuideD {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideD.active2{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: scroll;
transform: translate(-50%, -50%) scale(1);
}
.whatGuideM {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideM.active2M{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: hidden;
transform: translate(-50%, -50%) scale(1);
}
</style>
`
JS
`
<script>
var disc1 = document.querySelector("[showdiscrip1]")
function showdisc1() {
disc1.classList.add("disc");
}
function removedisc1() {
disc1.classList.remove("disc")
}
var disc2 = document.querySelector("[showdiscrip2]")
function showdisc2() {
disc2.classList.add("disc");
}
function removedisc2() {
disc2.classList.remove("disc")
}
var disc3 = document.querySelector("[showdiscrip3]")
function showdisc3() {
disc3.classList.add("disc");
}
function removedisc3() {
disc3.classList.remove("disc")
}
const mulitStepForm2 = document.querySelector("[data-multi-step2]")
const formSteps2 = [...mulitStepForm2.querySelectorAll("[data-step2]")]
let currentStep2 = formSteps2.findIndex(step2 => {
return step2.classList.contains("active2")
})
if (currentStep2 < 0) {
function SizeD() {
currentStep2 = 0
formSteps2[currentStep2].classList.add("active2")
showCurrentStep2();
window.scrollTo(0, 20);
}
}
mulitStepForm2.addEventListener("click", j => {
if (j.target.matches("[data-next]")) {
currentStep2++
} else if (j.target.matches("[data-closeguide]")) {
currentStep2 = -1
}
showCurrentStep2()
})
function showCurrentStep2() {
formSteps2.forEach((step2, index) => {
step2.classList.toggle("active2", index ===
currentStep2)
})
}
const mulitStepForm2M = document.querySelector("[data-multi-step2M]")
const formSteps2M = [...mulitStepForm2M.querySelectorAll("[data-step2M]")]
let currentStep2M = formSteps2M.findIndex(step2M => {
return step2M.classList.contains("active2M")
})
if (currentStep2M < 0) {
function SizeM() {
currentStep2M = 0
formSteps2M[currentStep2M].classList.add("active2M")
showCurrentStep2M();
window.scrollTo(0, 0);
}
}
mulitStepForm2M.addEventListener("click", j => {
if (j.target.matches("[data-nextM]")) {
currentStep2M++
} else if (j.target.matches("[data-closeguideM]")) {
currentStep2M = -1
}
showCurrentStep2M()
})
function showCurrentStep2M() {
formSteps2M.forEach((step2M, index) => {
step2M.classList.toggle("active2M", index ===
currentStep2M)
})
}
function Size() {
SizeD();
SizeM();
}
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 500,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
<script>
const sw1 = document.getElementById("sw1");
const sw2 = document.getElementById("sw2");
const sw3 = document.getElementById("sw3");
const sw1CS = window.getComputedStyle(sw1);
const sw2CS = window.getComputedStyle(sw2);
const sw3CS = window.getComputedStyle(sw3);
console.log(sw1CS.zIndex)
console.log(sw2CS.zIndex)
console.log(sw3CS.zIndex)
if (sw1CS.zIndex == 1) {
document.getElementById("d1").classList.add("showDisc1")
document.getElementById("d2").classList.remove("showDisc2")
}
if (sw2CS.zIndex == 1) {
document.getElementById("d2").classList.add("showDisc2")
document.getElementById("d1").classList.remove("showDisc1")
document.getElementById("d3").classList.remove("showDisc3")
}
if (sw3CS.zIndex == 1) {
document.getElementById("d3").classList.add("showDisc3")
document.getElementById("d2").classList.remove("showDisc2")
}
</script>
`

Turn a mouseover event into an autoscroll

As part of the creation of an overlay, I got a code that is close to what I want to do, on codepen.
This one displays a parallax of text on a background.
But on the CodePen project, the motion animation is done on a mouseover event.
I would like to make this animation happen automatically, over a period of ten seconds, without having to call a mouseover.
Here is the code in question
const position = document.documentElement;
position.addEventListener("mousemove", (e) => {
position.style.setProperty("--x", e.clientX + "px");
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
font-weight: 900;
}
a {
text-decoration: none;
}
section {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #111;
}
.text {
position: relative;
transform: skewY(350deg) translateY(-200px);
animation: animatecolor 5s linear infinite;
}
#keyframes animatecolor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.text h2 {
position: relative;
width: 100%;
font-size: 8em;
color: #fff;
pointer-events: none;
line-height: 1em;
white-space: nowrap;
text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
color: #0f0;
margin: 0 10px;
}
.text h2 span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 2px #fff;
}
<section>
<div class="text">
<a href="https://wgraphiste.com" target="blank">
<h2 style="--i:0.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:0.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:3"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.75"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
</a>
</div>
</section>
Thank you in advance for your ideas! :)

It can be changed to run automatically with the requestAnimationFrame like this:
const position = document.documentElement;
let time = Date.now(), x = 0;
const move = () => {
if (Date.now() - time > 10000)
return;
position.style.setProperty("--x", (x++) + "px");
requestAnimationFrame(move);
};
move();
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
font-weight: 900;
}
a {
text-decoration: none;
}
section {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #111;
}
.text {
position: relative;
transform: skewY(350deg) translateY(-200px);
animation: animatecolor 5s linear infinite;
}
#keyframes animatecolor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.text h2 {
position: relative;
width: 100%;
font-size: 8em;
color: #fff;
pointer-events: none;
line-height: 1em;
white-space: nowrap;
text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
color: #0f0;
margin: 0 10px;
}
.text h2 span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 2px #fff;
}
<section>
<div class="text">
<a href="https://wgraphiste.com" target="blank">
<h2 style="--i:0.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:0.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:3"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.75"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
</a>
</div>
</section>

How to add video inside the carousel

I have created a carousel, with dummy images. But when I am trying to embed video in it, it goes blank and throws no error at all. How can I add the video link inside the carousel so that on click of it, it gets opened up in an iframe.
I tried replacing the img tag with video tag and created separate div too but that also seem to be not working
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');
class Carousel {
constructor(container, items, controls) {
this.carouselContainer = container;
this.carouselControls = controls;
this.carouselArray = [...items];
}
// Update css classes for gallery
updateGallery() {
this.carouselArray.forEach(el => {
el.classList.remove('gallery-item-1');
el.classList.remove('gallery-item-2');
el.classList.remove('gallery-item-3');
el.classList.remove('gallery-item-4');
el.classList.remove('gallery-item-5');
});
this.carouselArray.slice(0, 5).forEach((el, i) => {
el.classList.add(`gallery-item-${i + 1}`);
});
}
// Update the current order of the carouselArray and gallery
setCurrentState(direction) {
if (direction.className == 'gallery-controls-previous') {
this.carouselArray.unshift(this.carouselArray.pop());
} else {
this.carouselArray.push(this.carouselArray.shift());
}
this.updateGallery();
}
setControls() {
this.carouselControls.forEach(control => {
galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
document.querySelector(`.gallery-controls-${control}`).innerText = control;
});
}
useControls() {
const triggers = [...galleryControlsContainer.childNodes];
triggers.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.className == 'gallery-controls-add') {
const newItem = document.createElement('img');
const latestItem = this.carouselArray.length;
const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length) + 1;
this.carouselArray.splice(latestIndex, 0, newItem);
document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
this.updateGallery();
} else {
this.setCurrentState(control);
}
});
});
}
}
function callfunc() {
console.log("this func is being caled")
}
const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
exampleCarousel.setControls();
// exampleCarousel.setNav();
exampleCarousel.useControls();
.gallery {
width: 100%;
}
.gallery-container {
align-items: center;
display: flex;
height: 400px;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
.gallery-item {
height: 150px;
opacity: 0;
position: absolute;
transition: all 0.3s ease-in-out;
width: 150px;
z-index: 0;
}
.gallery-item-1 {
left: 15%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-item-2,
.gallery-item-4 {
height: 200px;
opacity: 1;
width: 200px;
z-index: 1;
}
.gallery-item-2 {
left: 30%;
transform: translateX(-50%);
}
.gallery-item-3 {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
height: 300px;
opacity: 1;
left: 50%;
transform: translateX(-50%);
width: 300px;
z-index: 2;
}
.gallery-item-4 {
left: 70%;
transform: translateX(-50%);
}
.gallery-item-5 {
left: 85%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-controls {
display: flex;
justify-content: center;
margin: 30px 0;
}
.gallery-controls button {
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 16px;
margin: 0 20px;
padding: 0 12px;
text-transform: capitalize;
}
.gallery-controls button:focus {
outline: none;
}
.gallery-controls-previous {
position: relative;
}
.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-previous:hover::before {
left: -18px;
}
.gallery-controls-next {
position: relative;
}
.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-next:hover::before {
right: -18px;
}
.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}
.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}
.gallery-nav li.gallery-item-selected {
background: #555;
}
<div class="gallery">
<div class="gallery-container">
<img class="gallery-item gallery-item-1" onclick="callfunc()" src="http://fakeimg.pl/300/" data-index="1">
<img class="gallery-item gallery-item-2" src="http://fakeimg.pl/300/" data-index="2">
<img class="gallery-item gallery-item-3" src="http://fakeimg.pl/300/" data-index="3">
<img class="gallery-item gallery-item-4" src="http://fakeimg.pl/300/" data-index="4">
<img class="gallery-item gallery-item-5" src="http://fakeimg.pl/300/" data-index="5">
</div>
<div class="gallery-controls"></div>
</div>

You can just add the video as a gallery item.
If you want an image that shows the video in a modal on click, you can set a data attribute with the video url and on click send it to a hidden modal and show it.
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');
class Carousel {
constructor(container, items, controls) {
this.carouselContainer = container;
this.carouselControls = controls;
this.carouselArray = [...items];
}
// Update css classes for gallery
updateGallery() {
this.carouselArray.forEach(el => {
el.classList.remove('gallery-item-1');
el.classList.remove('gallery-item-2');
el.classList.remove('gallery-item-3');
el.classList.remove('gallery-item-4');
el.classList.remove('gallery-item-5');
});
this.carouselArray.slice(0, 5).forEach((el, i) => {
el.classList.add(`gallery-item-${i + 1}`);
});
}
// Update the current order of the carouselArray and gallery
setCurrentState(direction) {
if (direction.className == 'gallery-controls-previous') {
this.carouselArray.unshift(this.carouselArray.pop());
} else {
this.carouselArray.push(this.carouselArray.shift());
}
this.updateGallery();
}
setControls() {
this.carouselControls.forEach(control => {
galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
document.querySelector(`.gallery-controls-${control}`).innerText = control;
});
}
useControls() {
const triggers = [...galleryControlsContainer.childNodes];
triggers.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.className == 'gallery-controls-add') {
const newItem = document.createElement('img');
const latestItem = this.carouselArray.length;
const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length) + 1;
this.carouselArray.splice(latestIndex, 0, newItem);
document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
this.updateGallery();
} else {
this.setCurrentState(control);
}
});
});
}
}
function callfunc() {
console.log("this func is being caled")
}
const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
exampleCarousel.setControls();
// exampleCarousel.setNav();
exampleCarousel.useControls();
.gallery {
width: 100%;
}
.gallery-container {
align-items: center;
display: flex;
height: 400px;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
.gallery-item {
height: 150px;
opacity: 0;
position: absolute;
transition: all 0.3s ease-in-out;
width: 150px;
z-index: 0;
}
.gallery-item-1 {
left: 15%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-item-2,
.gallery-item-4 {
height: 200px;
opacity: 1;
width: 200px;
z-index: 1;
}
.gallery-item-2 {
left: 30%;
transform: translateX(-50%);
}
.gallery-item-3 {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
height: 300px;
opacity: 1;
left: 50%;
transform: translateX(-50%);
width: 300px;
z-index: 2;
}
.gallery-item-4 {
left: 70%;
transform: translateX(-50%);
}
.gallery-item-5 {
left: 85%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-controls {
display: flex;
justify-content: center;
margin: 30px 0;
}
.gallery-controls button {
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 16px;
margin: 0 20px;
padding: 0 12px;
text-transform: capitalize;
}
.gallery-controls button:focus {
outline: none;
}
.gallery-controls-previous {
position: relative;
}
.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-previous:hover::before {
left: -18px;
}
.gallery-controls-next {
position: relative;
}
.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-next:hover::before {
right: -18px;
}
.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}
.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}
.gallery-nav li.gallery-item-selected {
background: #555;
}
<div class="gallery">
<div class="gallery-container">
<img class="gallery-item gallery-item-1" onclick="callfunc()" src="http://fakeimg.pl/300/" data-index="1">
<video class="gallery-item gallery-item-2" data-index="2" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<img class="gallery-item gallery-item-3" src="http://fakeimg.pl/300/" data-index="3">
<img class="gallery-item gallery-item-4" src="http://fakeimg.pl/300/" data-index="4">
<img class="gallery-item gallery-item-5" src="http://fakeimg.pl/300/" data-index="5">
</div>
<div class="gallery-controls"></div>
</div>

It does not detect the top property in my code when the window is 1300px

Error does not recognize the top:
Hello, my problem is that when the window is less than 1300px, the upper part does not apply: 100% only applies this condition if I update the page, on the contrary, if it is the other way around, ¿the same thing happens. How can i fix this.?
I leave the code so that you can test the error I am a newbie I hope you can help me. Cheers
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
max-width: 450px;
position: relative;
margin: 50px auto;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>

I have solved your problem by adjusting the code in the box-container. Your image was at the top, however the div containing the image wasn't. I changed box-container to have a top of 0, and removed the max-width because you had already said the width should be 100%. You can adjust the code (like adding margin and padding) to your needs.
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
position: relative;
top:0;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>

Animation out of sync, how to achieve smooth animation?

Image and backgroung color out of sync. And i need smooth animation so the image & bgcolor fade's together.
It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening. It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening.
https://codepen.io/l-ba-iwanowa/pen/poJZQVN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet">
<style>
body,
.col-1,
.col-3-4,
.col-1 p {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#rcorners1 {
border-radius: 15px 50px;
background-color: yellow;
padding: 20px;
width: 200px;
height: 150px;
animation-name: bbb;
animation-duration: 5s;
animation-fill-mode: forwards;
}
#rcorners1:hover {
width:600px;
transform: translate(300px);
transition:1s;
}
#keyframes bbb {
0% {background-color: blue;}
100% {background-color: red}
}
.asd {
width: 1000px;
height: 600px;
/*overflow: hidden;*/
position:relative;
margin: 0 auto;
}
.asd img{
width: 100%;
width: 1000px;
height: 600px;
}
.asd img {
position:absolute;
top: 0;
}
.asd img.top {
/*position:relative;*/
opacity: 0;
transition: 2s;
}
/*
.asd img.top:hover {
opacity: 100;
}*/
.trans {
opacity: 100 !important;
}
#container {
max-width: 1000px;
margin:0 auto;
}
.col-1 {
width:25%;
display:inline-block;
vertical-align: top;
}
.col-3-4 {
width:75%;
display:inline-block;
vertical-align: top;
}
.relative {
position:relative;
}
.black-col {
position: relative;
top: -150px;
background: #474747;
height: 300px;
color:white;
padding: 1rem;
}
.zastup {
position: relative;
top:-50px;
background-color: white;
word-wrap: break-word;
}
img {
max-width: 100%;
}
.slider-bg {
background-color: rgb(0,0,0);
transition: background-color 2s;
}
#container2 {
width: 900px;
margin: 0 auto;
}
.slider-nav {
float:right !important;
}
ul {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
li {
/* Rounded border */
border-radius: 9999px;
height: 14px;
width: 14px;
/* Active dot */
/*background-color: rgba(0, 0, 0, .3);*/
/* Inactive dot */
background-color: rgba(255, 255, 255, .3);
/*border: 1px solid rgba(0, 0, 0, .3);*/
/* OPTIONAL: Spacing between dots */
margin: 0 12px;
transition: transform 0.5s, background-color 0.5s;
}
.nav-active {
background-color: rgba(255, 255, 255, .9);
transform: scale(1.5);
}
.clear {
clear:both;
zoom: 1;
}
.col-1-3 {
position: relative;
width: 33%;
word-wrap: break-word;
white-space: nowrap;
display: inline-block;
vertical-align: top;
padding: 1rem;
box-sizing: border-box;
}
button.abc {
border: 0;
background-color: #e86d10;
padding: 1rem 2rem;
border-radius: 25px;
font-size: inherit;
color: #fff;
}
.price {
font-size:1.5rem;
position: relative;
top:-20px;
}
.description {
position: relative;
top:-40px;
word-break: break-all;
white-space: pre-wrap;
font-size: 1.2rem;
}
.p1rem {
padding: 1rem;
}
.orange {
color: #e86d10;
}
.apply-font {
font-family: 'Caveat', cursive;
}
.bg-black {
background-color: rgb(0,0,0);
}
.bg-blue {
background-color: rgb(34, 73, 200);
}
</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ab corrupti impedit culpa provident nemo numquam? Magnam, rerum, magni. Autem quisquam deserunt a est iste iure odit laudantium, dolores.</p>
</div>
<div class="slider-bg ">
<div class="asd">
<!-- <img src="https://i.ytimg.com/vi/tAp9BKosZXs/maxresdefault.jpg" alt=""> -->
<img src="https://i.imgur.com/xCGxXuy.jpg" alt="">
<img class="top" src="https://i.imgur.com/D1tDvcG.jpg" alt="">
<img class="top" src="https://cdn.vox-cdn.com/thumbor/gBv91a9YqyhIxGsxc26x5TORV_8=/0x0:1296x730/1200x800/filters:focal(669x161:875x367)/cdn.vox-cdn.com/uploads/chorus_image/image/66274455/horsegirl.0.jpg" alt="">
<img class="top" src="https://1.bp.blogspot.com/-73o9cfxSC7Q/XQMxoVjfdMI/AAAAAAAAUkM/RSi0lSlsQoAfhMHLR-3U8Sfk_PpvZuziQCLcBGAs/s1600/copertina.jpg" alt="">
</div></div>
<div id="container2" style="position: relative;top:-60px; ">
<ul class="slider-nav">
<li data-id='0' class="nav-active"></li>
<li data-id='1'></li>
<li data-id='2'></li>
<li data-id='3'></li>
<li data-id='4'></li>
</ul></div><div class="clear"></div>
<div id="container2">
<div class="col-1 black-col">asd</div><!--
--><div class="col-3-4 zastup">
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js'></script> -->
<script type="text/javascript">
console.log(111);
// document.querySelector('#btn-click').addEventListener('click', ()=>{
// document.querySelector('.top').classList.toggle("trans");
// console.log(document.querySelector('.top').classList);
// });
let p = document.querySelectorAll('.slider-bg img');
let pp = Array.from(p);
console.log(pp);
function changeBgColor (){
if (i == 0 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(0,0,0)';
}
if (i == 1 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(34, 73, 200)';
}
if (i == 2 ) {document.querySelector('.slider-bg').style.backgroundColor = 'red';}
if (i == 3 ) {document.querySelector('.slider-bg').style.backgroundColor = 'green';}
}
let i = 1;
function asd(arguments) {
setTimeout(()=>{
// b = arrayImages[i];
// document.querySelector('#slider-hero img').src = b;
let z = document.querySelectorAll('li');
let zz = Array.from(z);
zz.forEach((item)=>{item.classList.remove('nav-active')});
// console.log(el);
zz[i].classList.add('nav-active');
b = pp[i];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
changeBgColor();
i++;
if (i ==4) {
i =0;
}
console.log(b);
asd();
},4000);
}
asd();
document.querySelector('.slider-nav').addEventListener('click',(el)=>{
if (el.target.tagName === 'LI') {
let z = document.querySelectorAll('li');
let zz = Array.from(z);
console.log(el.target.dataset.id);
b = pp[el.target.dataset.id];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
zz.forEach((item)=>{item.classList.remove('nav-active');});
el.target.classList.add('nav-active');
i = el.target.dataset.id;
changeBgColor();
}
});
</script>
</body>
</html>

Seems working fine to Chrome Browser. You can validate the css for all the browser using: https://www.browseemall.com/Compatibility/ValidateCSS
There might be chances of browser compatibility issues.
Seems broken in IE10 and lower.
ul{align-items:center;display:flex;justify-content:center;list-style-type:none;margin:0;padding:0;}

We Keep Coding

JavaScript is the programming language of the Web.

Javascript - Skeleton Content Placeholder - javascript

Related

How do I make a paragraph fade in everytime I swipe on my 3d carousel swiper?

Turn a mouseover event into an autoscroll

How to add video inside the carousel

It does not detect the top property in my code when the window is 1300px

Animation out of sync, how to achieve smooth animation?

Categories

Resources