Develop Reference

navbar disappears when i switch to mobile view

When I minimize the browser to mobile, the burger icon should come up in mobile view and my navbar doesn't come up, but I am facing this issue. I am applying the codes I got from Github to my website. When I minimize it in the browser it switches to mobile view and the nav bar is gone, it disappears in the menus in my navbar. codes i use github
navbar.js:
function Navbar() {
const [isOpen,setIsOpen] =useState(false);
return (
<div className="per">
<div className="logo">
<div className="search">
</div>
<div className={`Items ${isOpen && "open "}`}>
<a href="/home" to="/home">
Home
</a>
<a href="/contact" to="/contact">
contact
</a>
<a href="/about-us" to="/about-us">
About Us
</a>
<div className={`nav-toggle ${isOpen && "open"}`}
onClick={() => setIsOpen(!isOpen)}>
<div className="bar"></div>
</div>
</div>
</div>
);
}
navbar.css:
#media (max-width: 700px){
.Items > a{
margin: 15px;
}
.Items{
position: absolute;
top: 60px;
display: flex;
flex-direction: column;
background: #7e77e1;
left: 200px;
width: 100%;
height: 100%;
transform: translateX(100%);
transition: all .45s;
}
.Items > a::before{
background: transparent;
}
.Items.open{
transform: translateX(0);
}
.per > .nav-toggle{
display: flex;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav-toggle > .bar{
position: relative;
width: 32px;
height: 2px;
background: #ffffff;
transition: all 0.45s ease-in-out;
}
.nav-toggle >.bar::before,
.nav-toggle >.bar::after{
content: "";
position: absolute;
height: 2px;
background: #ffffff;
border-radius: 2px;
transition: all 0.45s ease-in-out;
}
.nav-toggle >.bar::before{
width: 25px;
transform: translateY(-8px);
right: 0;
}
.nav-toggle >.bar::after{
width: 32px;
transform: translateY(8px);
}
.nav-toggle.open > .bar{
transform: translateX(-40px);
background: transparent;
}
.nav-toggle.open > .bar::before{
width: 32px;
transform: rotate(45deg) translate(26px, -26px);
}
.nav-toggle.open > .bar::after{
transform: rotate(-45deg) translate(26px, 26px);
}
}

My site Items section is on the left, I made 200px, it should be 0
Items{
left:0px;
}

Moving Carousel Delay/Jump

Basically I have a moving carousel which I created using key-frames, however;
Problem: After the key-frame animation has ended there seems to be a delay before the next animation has starts again. After some research, I came upon this: requestAnimationFrame, however I'm not too sure(or comfortable enough) on implementing it. Any help would be appreciated, thanks.
Here is what I have so far:
const slider = document.querySelectorAll('.image-container');
slider.forEach((dropdown) => {
dropdown.classList.toggle("animate");
});
.carousel-wrapper {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-slider {
height: 100px;
position: relative;
display: flex;
overflow: hidden;
}
.animate {
height: 100px;
display: flex;
align-items: center;
animation: slideshow 5s linear infinite;
}
.image-container img {
height: 85px;
padding: 0 8px 0 8px;
}
#keyframes slideshow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.carousel-slider::before,
.slider::after {
height: 100px;
width: 50px;
position: absolute;
content: "";
background: linear-gradient(to right, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.carousel-slider::before {
left: 0;
top: 0;
}
.carousel-slider::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
<div style="max-width: 800px;">
<div class="carousel-wrapper">
<div class="carousel-slider">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1444464666168-49d633b86797?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="image1">
<img src="https://images.unsplash.com/photo-1529257414772-1960b7bea4eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="image2">
<img src="https://images.unsplash.com/photo-1584028887908-f6d2257fe9d4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="image3">
</div>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1444464666168-49d633b86797?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="image1">
<img src="https://images.unsplash.com/photo-1529257414772-1960b7bea4eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="image2">
<img src="https://images.unsplash.com/photo-1584028887908-f6d2257fe9d4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="image3">
</div>
</div>
</div>
</div>

How to use IntersectionObserer with transform: scale()?

I have a menu with css snaps that works perfectly with IntersectionObserver, just using opacity. But when I add transform:scale() it doesn't work, or it flickers on mobile devices. What is the solution for this? In the browser it works perfectly, but on mobile devices it keeps blinking.The problem is when i try to change any transform:.
const cards = document.querySelectorAll('.card')
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((elem) => {
if (elem.isIntersecting) {
cards.forEach(e => {
e.classList.remove('active')
})
elem.target.classList.add("active");
}
});
}, {
rootMargin: "0px",
threshold: 0.5
}
);
document.querySelectorAll('.card').forEach(elem => observer.observe(elem));
.gallery {
position: relative;
max-width: 800px;
padding: 0 10;
}
.gallery_scroller {
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 50vh;
}
.gallery_scroller .card {
scroll-snap-align: center;
scroll-snap-stop: always;
margin: 10px;
position: relative;
}
.card {
min-width: 75%;
min-height: 95%;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
.card {
transform: scale(.9);
opacity: 0.2;
transition: 0.3s ease;
}
.card.active{
transform: scale(1.0);
opacity: 1;
}
<div class="gallery">
<div class="gallery_scroller">
<div class="card active">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
</div>

how to make CSS transition when Item is clicked? [duplicate]

This question already has answers here:
Flip content of a div on clicking a button
(4 answers)
Closed 2 years ago.
I have created a pen here(https://codepen.io/rupamkairi/pen/ExjJRMo?editors=1100) on codepen. The card is made to rotate(specifically to Flip) when hovered on the element. I want it to be flip when I click on the element(.card).
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card:hover .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
I tried using :active pseudo-class but in that case I need to hold the card to keep it fliped.
Is there any way to use css animation with javascript?
I want to make multiple cards on a single page, and make them flip when clicked.

If you want the card to toggle the flip on every click try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;
card.addEventListener("click", () => {
if(!flipped) {
cardContent.style.transform = "rotateY(180deg)"
} else {
cardContent.style.transform = "rotateY(0deg)"
}
flipped = !flipped;
});
Or if you want the card to be flipped only once try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
card.addEventListener("click", () => {
cardContent.style.transform = "rotateY(180deg)";
});
As it's implemented through JavaScript remove .card:hover .card-content { transform: rotateY(180deg);} from stylesheet.

Initially add the id to the div tag where class = "card" like
HTML
<div class="card" id ="card1">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
Here you set the id as card1 and then you must you the following simple JS like
<script>
document.getElementById("card1").onclick = function(){
document.getElementById("card1").style.transform = rotateY(180deg);
}
</script>
This is a simple way by which you can achieve what you want.

just change .card:hover .card-content
to .card.flip .card-content
and add js code:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
demo:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Roboto", sans-serif;
background-color: #96cfe1;
}
.container {
padding: 10%;
}
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px #00000080;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card.flip .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="container">
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
</div>

How to make a child div override its parent position in a grid?

I'm currently building my own graphic design portfolio, which is grid based (inspired by this concept https://codepen.io/jkantner/pen/KQPdXK (there is my codepen at the end of the post with my modified version)) and I'm struggling to get some features to work.
I have a series of div, one per project I want to showcase, which are referred by the class .stack:nth-child(n) individually and by the classes .card and .top as a whole. Those cards are contained in the .cards-div with display: grid property applied. A transform property is also applied to it to create the 3D-perspective effect.
I want to make a card, that, once active/focused, stands in front of everything and to show in details its particular project. I already succeeded in making it bigger than the others, getting it in another position and reversing the 3D-effect of its parent but I cannot figure out how to make all the cards go to the same place once focused, because they retain their position induced by the parent.
How should I proceed to set one position for all focus/active cards and overriding their position in their parent's grid ?
Here's my messy code although you probably should read it on CodePen as you'll probably see the mobile version here because of the size of the snippet thumbnail: https://codepen.io/Goo_m_Ba/pen/gdqGrP
window.addEventListener("scroll", scrollGrid);
window.addEventListener("wheel", noShakeScroll);
function scrollGrid() {
let transY = window.pageYOffset,
cards = document.querySelector(".cards");
cards.style.setProperty("--scroll", transY + "px");
}
scrollGrid();
/* Without this, the `items` div erratically shakes while scrolling with wheel or touchpad. The issue still persists in Safari though… */
function noShakeScroll(e) {
this.scrollBy(0, e.deltaY);
e.preventDefault();
}
var $stickyBlock = document.querySelector('.portfolio');
var origOffsetY = $stickyBlock.offsetTop - 15; // 15 is your top margin
function onScroll() {
window.scrollY >= origOffsetY ? $stickyBlock.classList.add('sticky') :
$stickyBlock.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: 1vw;
--cardW: 20vw;
--cardH: 20vw;
--cardZInc: 0.5em;
--gap: 1.5em;
--ttxt: 0.5em;
}
a {
text-decoration: none;
color: white;
}
body {
background-image: repeating-linear-gradient(35deg, #eeeeee, #dddddd, transparent 2px, transparent 80px), repeating-linear-gradient(-35deg, #eeeeee, #dddddd, transparent 2px, transparent 80px);
background-attachment: fixed;
font: 1em "Open Sans", sans-serif;
height: 100vh;
overflow-x: hidden;
position: sticky;
}
/* Grid */
.cards,
.stack {
transform-style: preserve-3d;
}
.portfolio {
text-align: center;
font: 1em "Rubik Mono One", sans-serif;
/* letter-spacing: 0.5em; */
font-size: 1.1em;
text-color: white;
grid-template: repeat(12, calc (var(--cardH)*2)) / var(--cardW);
z-index: 0;
outline: 50px solid white;
position: absolute;
background-color: white;
width: 100%;
height: 40em;
transform: translateZ(-10px);
top: calc(-1% - var(--gap)*2);
opacity: 1;
}
.stack .contents {
color: #faf;
position: relative;
}
.cards {
--scroll: 100px;
display: grid;
grid-template: repeat(12 var(--cardH)) / var(--cardW);
grid-gap: var(--gap);
padding-bottom: calc(var(--cardH) * 3);
position: absolute;
transform: translate(-20%, calc(-50% + var(--scroll))) rotateX(45deg) rotateZ(45deg) translateY(calc(50% - var(--scroll)));
z-index: 1;
}
/* Card hover */
.stack:hover .top,
.stack:focus .top {
transition: all 0.5s;
transform: translateZ(calc(var(--cardZInc)*4))rotateX(-20deg);
transform-origin: center bottom;
z-index: 2
}
.stack:nth-child(2):active .top {
transform: translateX(calc(0px - calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}
.stack:nth-child(3):active .top {
transform: translateX(calc(0px + calc(var(--gap) * 1) - calc(var(--cardW) * 0.5))) translateY(calc(0px + calc(var(--gap) * 4) + calc(var(--cardW) * 1))) translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}
.stack:nth-child(4):focus .top {
transform: translateX(calc(0px + calc(var(--gap) * 0) - calc(var(--cardW) * 1.5))) translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateZ(16vw)rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}
.stack:focus .top {
transform-origin: center bottom;
transform: translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
height: 70vh;
width: 70vw;
/*translate(-20%, calc(-50% + var(--scroll))) rotateX(45deg)
rotateZ(45deg) translateY(calc(50% - var(--scroll)));*/
z-index: 15;
/*width:50vw ;
height:50vw;*/
}
.stack:hover .shadow,
.stack:focus .shadow {
filter: blur(5px);
-webkit-filter: blur(5px);
opacity: 0.2;
transform-origin: center bottom;
height: 80%;
transform: translatey(20%);
}
/* Other card styles */
.card {
/*background-image: url(https://cdn.weasyl.com/static/media/dd/c2/45/ddc2458130dd90cf4d5f5783f14f7835cf980110df9131354325a358a3d3d60d.png);*/
background-color: black;
background-size: 200% 200%;
box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2) inset;
color: #000;
padding: 0.75em;
position: absolute;
transition: all 0.3s;
width: 100%;
height: 100%;
outline: 5px solid green;
}
.top {
transform: translateZ(10px);
z-index: 15;
}
.shadow {
background: #000;
filter: blur(2px);
-webkit-filter: blur(2px);
opacity: 0.2;
}
/* Alter grid at breakpoints */
#media screen and (max-width: 550px) {
:root {
font-size: 5vw;
--cardW: 100vw;
--cardH: 100vw;
--cardZInc: 10.5em;
--ttxt: 0.5em;
}
.stack:hover .top,
.stack:focus .top {
transform: translateZ(calc(var(--cardZInc)*0))rotateX(0deg);
transform-origin: center bottom;
}
.cards {
grid-template: repeat(24, var(--cardH)) / repeat(1, var(--cardW));
transform: translate(-0, calc(0 + var(--scroll))) rotateX(0deg) rotateZ(0deg) translateY(calc(0% - var(--scroll)));
left: 0%;
top: 25%;
}
.titre {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
bottom: 80vh;
left: 10px;
white-space: nowrap;
}
.portfolio {
font-size: 6vw;
letter-spacing: 0em;
opacity: 0;
width: 100vw;
top: -100px;
}
#dg {
bottom: 5vh
}
}
#media screen and (min-width: 551px) {
#nom {
white-space: nowrap;
width: 100%;
}
#dg {
margin-top: 10vh;
}
.cards {
grid-template: repeat(16, var(--cardH)) / repeat(2, var(--cardW));
top: 50%;
left: 60%;
}
:root {
font-size: 2vw;
--cardW: 40vw;
--cardH: 40vw;
--cardZInc: 0.5em;
--ttxt: 1em;
}
}
#media screen and (min-width: 1050px) {
#nom {
white-space: normal;
}
#dg {
font-size: calc(var(--ttxt) * 0.7);
margin-top: 13vw;
}
.cards {
grid-template: repeat(12, var(--cardH)) / repeat(3, var(--cardW));
top: 35%;
left: 60%
}
:root {
font-size: 2vw;
--cardW: 18vw;
--cardH: 18vw;
--cardZInc: 0.5em;
--ttxt: 1em;
}
}
<div class="cards">
<div class="portfolio">
<div class="contents">
<p>nice portfolio</p>
</div>
</div>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">1 NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>

A html element is relative to it's first positioned parent. To cancel positioning on an element, you can set the rule
position: static;