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

Jak zrobić coś takiego.

Geoinformatyka UKSW Warszawa rekrutacja
0 głosów
111 wizyt
pytanie zadane 13 lutego w JavaScript, jQuery, AJAX przez bicnet Gaduła (4,050 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 przez thryndl Pasjonat (17,690 p.)
wybrane 13 lutego 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 przez Alex.Ironside Stary wyjadacz (14,630 p.)
O w morde. Jak zrobiles onclicka w css?
1
komentarz 13 lutego przez thryndl Pasjonat (17,690 p.)
edycja 13 lutego przez thryndl
Ukryty checkbox i pseudo-selektor :checked.
komentarz 14 lutego przez Alex.Ironside Stary wyjadacz (14,630 p.)
Ok dzieki. Zapamietam!
+1 głos
odpowiedź 13 lutego przez Alex.Ironside Stary wyjadacz (14,630 p.)
Dodaj event listenera, obroc dodajac klase, albo dodajac css (transform: rotate(180deg), transition: transform 2s;). Powinno zadzialac
komentarz 13 lutego przez bicnet Gaduła (4,050 p.)
A tekst jak ?
komentarz 13 lutego przez Alex.Ironside Stary wyjadacz (14,630 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 przez Alex.Ironside Stary wyjadacz (14,630 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 przez bicnet Gaduła (4,050 p.)
Dzięki wielkie, skorzystam z tego.
komentarz 13 lutego przez Alex.Ironside Stary wyjadacz (14,630 p.)
Pamietaj o wybraniu najlepszej odpowiedzi jak sie pojawi ;)

Podobne pytania

0 głosów
1 odpowiedź 67 wizyt
–1 głos
1 odpowiedź 103 wizyt
pytanie zadane 15 kwietnia w Sieci komputerowe, internet przez niezalogowany
0 głosów
2 odpowiedzi 111 wizyt
pytanie zadane 4 listopada 2017 w HTML i CSS przez Vorex444 Dyskutant (9,660 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

54,236 zapytań

97,998 odpowiedzi

201,481 komentarzy

26,616 pasjonatów

Przeglądających: 226
Pasjonatów: 17 Gości: 209

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.

...