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

Podobne pytania

0 głosów
2 odpowiedzi 106 wizyt
pytanie zadane 4 listopada 2017 w HTML i CSS przez Vorex444 Dyskutant (8,850 p.)
0 głosów
1 odpowiedź 73 wizyt
pytanie zadane 14 marca 2017 w HTML i CSS przez Vorex444 Dyskutant (8,850 p.)
0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 17 stycznia 2016 w C i C++ przez Daaa22 Mądrala (5,510 p.)
Porady nie od parady
Możesz zmodyfikować, zamknąć lub ukryć swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.
Ciekawy innych porad? Odwiedź tę stronę!

45,873 zapytań

86,345 odpowiedzi

172,632 komentarzy

22,284 pasjonatów

Przeglądających: 109
Pasjonatów: 11 Gości: 98

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.

...