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

Jak zrobić coś takiego.

0 głosów
105 wizyt
pytanie zadane 13 lutego w JavaScript, jQuery, AJAX przez bicnet Gaduła (3,560 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 Dyskutant (9,380 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 (13,110 p.)
O w morde. Jak zrobiles onclicka w css?
1
komentarz 13 lutego przez thryndl Dyskutant (9,380 p.)
edycja 13 lutego przez thryndl
Ukryty checkbox i pseudo-selektor :checked.
komentarz 14 lutego przez Alex.Ironside Stary wyjadacz (13,110 p.)
Ok dzieki. Zapamietam!
+1 głos
odpowiedź 13 lutego przez Alex.Ironside Stary wyjadacz (13,110 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 (3,560 p.)
A tekst jak ?
komentarz 13 lutego przez Alex.Ironside Stary wyjadacz (13,110 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 (13,110 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 (3,560 p.)
Dzięki wielkie, skorzystam z tego.
komentarz 13 lutego przez Alex.Ironside Stary wyjadacz (13,110 p.)
Pamietaj o wybraniu najlepszej odpowiedzi jak sie pojawi ;)

Podobne pytania

–1 głos
1 odpowiedź 98 wizyt
pytanie zadane 15 kwietnia w Sieci komputerowe, internet przez niezalogowany
0 głosów
2 odpowiedzi 108 wizyt
pytanie zadane 4 listopada 2017 w HTML i CSS przez Vorex444 Dyskutant (9,570 p.)
0 głosów
1 odpowiedź 73 wizyt
pytanie zadane 14 marca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,570 p.)
Oferty pracy dla początkujących programistów na portalu No Fluff Jobs
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

49,832 zapytań

91,793 odpowiedzi

185,495 komentarzy

24,245 pasjonatów

Przeglądających: 320
Pasjonatów: 23 Gości: 297

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.

...