Jak zrobić coś takiego.

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

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,900 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,900 p.)

Ok dzieki. Zapamietam!

odpowiedź 13 lutego 2018 przez Alex.Ironside Stary wyjadacz (14,900 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,900 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,900 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