• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

animacja przejścia do innej strony

0 głosów
59 wizyt
pytanie zadane 4 czerwca w HTML i CSS przez hakiros54 Obywatel (1,160 p.)
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ć?
komentarz 4 czerwca przez _Pita_ Stary wyjadacz (11,410 p.)
Czy nie wystarczy overflow: scroll ?

1 odpowiedź

0 głosów
odpowiedź 4 czerwca przez pablop76 VIP (117,840 p.)

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);

 

komentarz 5 czerwca przez hakiros54 Obywatel (1,160 p.)
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.

Podobne pytania

0 głosów
1 odpowiedź 95 wizyt
pytanie zadane 22 listopada 2019 w JavaScript przez eMe Początkujący (320 p.)
0 głosów
1 odpowiedź 122 wizyt
pytanie zadane 11 września 2016 w HTML i CSS przez 123skiper Bywalec (2,180 p.)
0 głosów
1 odpowiedź 774 wizyt
pytanie zadane 24 kwietnia 2016 w HTML i CSS przez Mavimix Dyskutant (7,800 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

85,212 zapytań

134,029 odpowiedzi

297,158 komentarzy

56,309 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...