Animacja - rozwijanie się obrazka

pytanie zadane 11 lutego 2017 w HTML i CSS przez husarbilu Początkujący (370 p.)

Witam Pasjonaci!

Męczy mnie problem, ponieważ bardzo spodobała mi się taka animacja, niby zwykła ale przyjemny dla oka detal.

Chodzi mi o taki rozwijany pasek, przykładem jest strona moto-odcina.pl po prawej stronie mamy logo facebooka.

I prosiłbym o pomoc w jaki sposób mogę zrobić taką "animację"?

2 odpowiedzi

odpowiedź 12 lutego 2017 przez mtk3d Nałogowiec (46,690 p.)

Był podobny temat ostatnio: http://forum.pasja-informatyki.pl/224608/wysuwana-belka-facebooka-na-stronie#a224616

Jeśli ten element ma być klikany, tak jak na moto-odcina.pl, musisz użyć zdarzenia onClick.

komentarz 12 lutego 2017 przez husarbilu Początkujący (370 p.)

Poczytałem o tej funkcji, spróbowałem jednak nie znalazłem odpowiednio działającej.

Fakt, element się wysuwa ale nie na kliknięcie, jakieś wskazówki, rozwiązania?

komentarz 12 lutego 2017 przez mtk3d Nałogowiec (46,690 p.)

Jeśli weźmiemy przykład który podałem wyżej, to musisz przy pomocy JS sprawdzić, ile wynosi wartość właściwości left: i na tej podstawie decydować, czy element ma zostać schowany, czy wysunięty.

komentarz 12 lutego 2017 przez husarbilu Początkujący (370 p.)

Jestem na takim etapie, ale nie wiem jak można to w javie zrobić, ponieważ nie rozumiem tego języka:

HTML

<div class="fb">
<div class="fb-text">
<a href="https://www.facebook.com">
<img src="fb.png" />
</a>
</div>
</div>

CSS:

<style>

.fb{
    position: fixed;
    width: 270px;
    height: 380px;
    background: red;
    top: 100px;
    left: -270px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 100;
    transition: 0.3s all ease-in-out;
}
.fb-text{
    position: absolute;
    right: -25px;
    top: 0px;
    text-align: right;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    width: 40px;
    height: 165px;
    }
.fb:hover {
  left: 0;
}

</style>

komentarz 12 lutego 2017 przez mtk3d Nałogowiec (46,690 p.)

Kod w znaczniki!

Z JS będzie Ci potrzebna instrukcja warunkowa i np. metoda getElementById. Możesz użyć ew. funkcji toggle z jQuery, ale dobrze by było, żebyś napisał to w czystym JS, to się czegoś nauczysz. Szukaj pod hasłem JS toggle.

odpowiedź 12 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Masz gotowca:

<!DOCTYPE html>
<html lang="pl">
<head>
  <title></title>
  <meta charset="utf-8">
  <style>
		.socBox {
			border: 1px solid red;
			height: 400px;
			width: 300px;
			position: fixed;
			transition: 1s all ease-in-out;
		}
		.socBoxButton {
			transform: rotate(90deg);
			transform-origin: left top;
		}
		socBoxHide {
			right: 0px !impoortant;
		}
		
		.socBox:first-child {
			top: 100px;
			background-color: red;
			width: 400px;
			right: -402px;
		}

		.socBox:nth-child(2) {
			top: 170px;
			background-color: blue;
			right: -302px;
		}
		.socBox:nth-child(3) {
			top: 240px;
			background-color: green;
			width: 500px;
			right: -502px;
		}
</style>
  
</head>
<body>
	<div class="socBox">
		<button type="button" class="socBoxButton">Przycisk</button>
	</div>
	<div class="socBox">
		<button type="button" class="socBoxButton">Przycisk</button>
	</div>
	<div class="socBox">
		<button type="button" class="socBoxButton">Przycisk</button>
	</div>
	
	<script>
		var elements = document.getElementsByClassName('socBox'),
		elementsLength=elements.length,
		i;
		
		for(i = 0; i < elementsLength; i++) {
			elements[i].addEventListener('click', function(){
				if(this.style.right != '1px') {
					this.style.right= '1px';
				} else {
					this.style.right= this.offsetWidth * -1 +'px';
				}
			}, false);
		}
	
	</script>
</body>
</html>

komentarz 12 lutego 2017 przez husarbilu Początkujący (370 p.)

Co mogę zrobić aby button nie był obrócony??

Próbowałem usunąć linijkę transform: rotate(90deg);

Jednak po odświeżeniu obrazek(button) znika.

<div class="socBox">
<button type="button" class="socBoxButton"><img src="fb.png" /></button>
</div>

komentarz 12 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Nie wiem dokładnie o co ci chodzi ale np. bez obracania będzie tak:

		.socBoxButton {
			//transform: rotate(90deg);
			//transform-origin: left top;
			left: -70px;
			position: relative;
		}

Podobne pytania

0 głosów

1 odpowiedź 131 wizyt

Animacja diva na miejscu obrazja pojawia się jednlity kolor z listą hrefów

pytanie zadane 16 listopada 2021 w HTML i CSS przez TheDarkSide Użytkownik (930 p.)

+1 głos

0 odpowiedzi 794 wizyt

CSS animacja - czy da się uzyskać tu płynny ruch?

pytanie zadane 28 lutego 2021 w HTML i CSS przez lukasz21 Obywatel (1,090 p.)

+1 głos

2 odpowiedzi 258 wizyt

W jaki sposób animacja może przesuwać się po ekranie?

pytanie zadane 5 grudnia 2020 w HTML i CSS przez nowa Początkujący (450 p.)

Animacja - rozwijanie się obrazka

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci