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

Jak zrobić coś takiego.

VPS Starter Arubacloud
0 głosów
229 wizyt
pytanie zadane 13 lutego 2018 w JavaScript przez bicnet Gaduła (4,800 p.)

Witam,

chcę zrobić coś takiego jak na rysunku poniżej, czyli że jest obrazek np. z logiem HTML5 i na dole jest taki trójkącik, po kliknięciu w ten trójkącik wysuwa się (z animacją) tekst, a trójkąt odwraca się o 180 stopni , po czym można kliknąć w ten trójkąt i wszystko zmienia się w wcześniejszą wersję (z animacją).

Jak takie coś zrobić?

Z góry dziękuję za odpowiedzi.

Pozdrawiam serdecznie

2 odpowiedzi

+2 głosów
odpowiedź 13 lutego 2018 przez thryndl Nałogowiec (30,470 p.)
wybrane 13 lutego 2018 przez bicnet
 
Najlepsza

Wrzucę może komuś się przyda. Powyższy efekt z wykorzystaniem samego CSS, codepen.io

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.card {
			width: 250px;
			height: 300px;
			overflow: hidden;
			position: relative;
			background-color: #000000;
		}
		
		.card img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.cover {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 0;
			transition: height 1s ease-in-out;
			color: #D0D0D0;
			background-color: #000000;
		}
		
		label {
			position: absolute;
			bottom: 20px;
			left: calc(50% - 20px);
			display: block;
			width: 0; 
		 	height: 0; 
		  	border-left: 20px solid transparent;
		  	border-right: 20px solid transparent; 
		  	border-bottom: 20px solid #D0D0D0;
		  	z-index: 999;
		  	transition: all 1s linear;
		}

		#triangle {
			visibility: hidden;
		}

		#triangle:checked ~ .cover{
			height: 100%;
		}

		#triangle:checked ~ label {
			transform: rotate(180deg);
		}
	</style>
</head>
<body>
	<div class="card">
		<img src="html5.png" alt="">
		<input type="checkbox" id="triangle">
		<label for="triangle"></label>
		<div class="cover">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores mollitia aliquid et molestias nesciunt quae, exercitationem totam cum commodi eaque! Reprehenderit quibusdam, error accusantium eveniet veritatis nesciunt voluptatibus dolor cupiditate.
		</div>
	</div>
</body>
</html>

 

komentarz 13 lutego 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
O w morde. Jak zrobiles onclicka w css?
1
komentarz 13 lutego 2018 przez thryndl Nałogowiec (30,470 p.)
edycja 13 lutego 2018 przez thryndl
Ukryty checkbox i pseudo-selektor :checked.
komentarz 14 lutego 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Ok dzieki. Zapamietam!
+1 głos
odpowiedź 13 lutego 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Dodaj event listenera, obroc dodajac klase, albo dodajac css (transform: rotate(180deg), transition: transform 2s;). Powinno zadzialac
komentarz 13 lutego 2018 przez bicnet Gaduła (4,800 p.)
A tekst jak ?
komentarz 13 lutego 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Dobre pytanie. Mozesz uzyc bootstrapa ale to troche strzal w stope. Moglbys zlapac wysokosc diva z tekstem i o tyle obnizyc strzalke. Sprobuje zrobic codepena zeby to pokazac
1
komentarz 13 lutego 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)

@bicnet,
Trzymaj tutaj codepena. Jeszcze nie jestem pewien jak zrobic to zjezdzanie tekstu ale pobaw sie z efektami w css. Javascript juz dziala.

https://codepen.io/Alex-Iron/pen/jZwggg?editors=1111

komentarz 13 lutego 2018 przez bicnet Gaduła (4,800 p.)
Dzięki wielkie, skorzystam z tego.
komentarz 13 lutego 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Pamietaj o wybraniu najlepszej odpowiedzi jak sie pojawi ;)

Podobne pytania

0 głosów
2 odpowiedzi 135 wizyt
pytanie zadane 6 października 2018 w JavaScript przez matrimex Użytkownik (810 p.)
0 głosów
0 odpowiedzi 262 wizyt
pytanie zadane 15 sierpnia 2020 w OpenGL, Unity przez Igorek Mądrala (6,290 p.)
0 głosów
1 odpowiedź 507 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...