animacja przejścia do innej strony

Question

Witam, próbuję aktualnie zrobić animacje przejścia, polega to na tym, że mamy normalną stronę gdzie możemy sobie scrollować i w pewnym miejscu jest element po którego kliknięciu z prawej strony wysuwa nam się karta z dodatkowymi informacjami o tym elemencie, która zasłania nam bazową stronę.

Początkowo chciałem to zrobić tak, że tej karcie z dodatkowymi informacjami dajemy position: fixed, left:100% przez co bazowo będzie ona niewidoczna i po kliknięciu zmieniamy css'y na left:0; dzięki czemu wszystko stanie się widoczne ALE tych informacji może (i będzie) na tyle dużo, że trzeba by scrollować na tej dodatkowej karcie a przy possition fixed jest to niemożliwe. Jakieś pomysły jak coś takiego zrobić?

Comments

Czy nie wystarczy overflow: scroll ?

Answer 1

Uczyń element fixed pojemnikiem na treść i dodaj mu overflow-x: hidden;

<section class="outside">
	<header>
		<h1>Strona głowna</h1></header>
	<button class="btn">pokaż wiecej</button>
	<section class="inside">
		<heaader>
			<h2>
				Slide
			</h2>
			<a href="#" class="close">x</a>
		</heaader>
		<section class="inside-scroll">
			<h2>
				content
			</h2>
		</section>
	</section>
</section>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    overflow-x: hidden;
	width: 100%;
	height: 100vh;
	background-color: gray;
}
.outside{
	transition: all .5s;
}
.inside{
	position: fixed;
	background-color: #fff;
	transform: translate(100%, 0);
	top: 0;
	left: 0;
	overflow-x: hidden;
	transition: all .5s;
}
.inside-scroll{
	height: 200vh;
	background-color: blue;
}
.show{
	transform: translate(0, 0);
}
.btn{
	width: 100px;
	height: 40px;
	border: none;
	margin: 20px;
	cursor: pointer;
}
.close{
	font-size: 2rem;
	text-decoration: none;
	color: red;
}

const btn = document.querySelector(".btn");
const inside = document.querySelector(".inside");
const close = document.querySelector(".close");
const toggleContent = function(){
	inside.classList.toggle("show");
}
btn.addEventListener("click", toggleContent);
close.addEventListener("click", toggleContent);

 

Comments

Faktycznie działa, dzięki.
A możesz wyjaśnić dlaczego? Ja rozumiem overflow tak, że jak coś wystaje spoza tego diva do definiujemy co ma z tym się dziać (czy mamy scrollować, czy ma wystawać, czy ma być ukryte itd.). Dlaczego więc ukrycie tego co wystaje na osi x'ów miałoby umożliwić scrollowanie na osi Y'ów? Tym bardziej, że nic nie wystaje.