Форум

DoubleDigit · #1 (**permalink**) 11.04.2016, 23:32

Добрый вечер. Друзья, у меня есть анимация https://jsfiddle.net/9ag0mo5c, но работает она при hover, а мне нужно при клике развернуть и вернуть в исходную позицию. Я попробовал написать скрипт https://jsfiddle.net/dL0L4dzz/3/
но к сожалению у меня не получилось, т. к. еще зеленый в программировании. Пожалуйста, помогите подправить.

рони · #2 (**permalink**) 11.04.2016, 23:53

DoubleDigit,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #content_item {
	display: inline-block;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	height: 400px;
	margin: 20px auto;
	overflow: hidden;
	position: relative;
	width: 300px;
}

#content_item .overlay {
	border-bottom: 200px solid #e8c63d;
	border-left: 200px solid transparent;
	bottom: 0;
	height: 0;
	opacity: .95;
	position: absolute;
	right: 0px;
	text-indent: -9999px;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	width: 0;
}

#content_item.hover .overlay {
	border-bottom: 1000px solid #e8c63d;
	border-left: 1000px solid transparent;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#content_item .corner_overlay_content {
	bottom: 15px;
	color: #333;
	position: absolute;
	right: 50px;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#content_item.hover .corner_overlay_content {
	opacity: 0;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#content_item .overlay_content {
	bottom: 0;
	color: #333;
	left: 0;
	opacity: 0;
	padding: 30px;
	position: absolute;
	right: 10px;
	top: 0;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#content_item .overlay_content h2 {
	border-bottom: 1px solid #333;
	padding: 0 0 12px;
	font-size: 12.6pt;
}

#content_item .overlay_content p {
	font-size: 10.6pt;
}

#content_item.hover .overlay_content {
	opacity: 1;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
</style>

  <script>
 window.addEventListener('DOMContentLoaded', function() {
   var content = document.querySelector('#content_item');
   content.addEventListener('click', function() {
         content.classList.toggle("hover")
   });
     });
  </script>
</head>

<body>
<div id="content_item">
				  <img src="http://ecoles-nn.ru/wa-data/public/shop/products/84/59/5984/images/14732/14732.750.jpg" alt="teach1">
				  <div class="overlay"></div>
				  <div class="corner_overlay_content">Подробнее</div>
				  <div class="overlay_content">
					<h2>Image Ink Logo</h2>
					<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
				  </div>
				</div>
</body>
</html>

DoubleDigit · #3 (**permalink**) 12.04.2016, 00:36

Если таких картинок с анимацией несколько? Как активировать это событие для других?

рони · #4 (**permalink**) 12.04.2016, 01:06

DoubleDigit,
тогда не id а class и forEach.

DoubleDigit · #5 (**permalink**) 12.04.2016, 02:37

Уважаемый рони, я конечно почитал про этот метод (конечно пока сложно понять), посмотрел способы реализации ну и изменил по-своему

window.addEventListener('DOMContentLoaded', function() {
		   var content = document.querySelector(".content_item");
		   [].forEach.call(content, function() { 
			   content.addEventListener('click', function() {
					 content.classList.toggle("hover")
			   });
		   });
		});

, конечно мой вариант не рабочий, но я стараюсь понять. До методов еще таких не дошел, потому что я сейчас решаю задачник Златопольского

Если не сложно, расскажите подробнее, как это реализовать в моем примере, т.е. я так понял нужно перебрать элементы в данном случае класса .content_item?

рони · #6 (**permalink**) 12.04.2016, 07:26

DoubleDigit,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .content_item {
	display: inline-block;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	height: 400px;
	margin: 20px auto;
	overflow: hidden;
	position: relative;
	width: 300px;
}

.content_item .overlay {
	border-bottom: 200px solid #e8c63d;
	border-left: 200px solid transparent;
	bottom: 0;
	height: 0;
	opacity: .95;
	position: absolute;
	right: 0px;
	text-indent: -9999px;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	width: 0;
}

.content_item.hover .overlay {
	border-bottom: 1000px solid #e8c63d;
	border-left: 1000px solid transparent;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.content_item .corner_overlay_content {
	bottom: 15px;
	color: #333;
	position: absolute;
	right: 50px;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.content_item.hover .corner_overlay_content {
	opacity: 0;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.content_item .overlay_content {
	bottom: 0;
	color: #333;
	left: 0;
	opacity: 0;
	padding: 30px;
	position: absolute;
	right: 10px;
	top: 0;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.content_item .overlay_content h2 {
	border-bottom: 1px solid #333;
	padding: 0 0 12px;
	font-size: 12.6pt;
}

.content_item .overlay_content p {
	font-size: 10.6pt;
}

.content_item.hover .overlay_content {
	opacity: 1;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
</style>

  <script>
 window.addEventListener('DOMContentLoaded', function() {
		   var content = document.querySelectorAll(".content_item");
		   [].forEach.call(content, function(item) {
			   item.addEventListener('click', function() {
					 item.classList.toggle("hover")
			   });
		   });
		});

  </script>
</head>

<body><div class="content_item">
				  <img src="http://ecoles-nn.ru/wa-data/public/shop/products/84/59/5984/images/14732/14732.750.jpg" alt="teach1">
				  <div class="overlay"></div>
				  <div class="corner_overlay_content">Подробнее</div>
				  <div class="overlay_content">
					<h2>Image Ink Logo</h2>
					<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
				  </div>
				</div><div class="content_item">
				  <img src="http://ecoles-nn.ru/wa-data/public/shop/products/84/59/5984/images/14732/14732.750.jpg" alt="teach1">
				  <div class="overlay"></div>
				  <div class="corner_overlay_content">Подробнее</div>
				  <div class="overlay_content">
					<h2>Image Ink Logo</h2>
					<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
				  </div>
				</div><div class="content_item">
				  <img src="http://ecoles-nn.ru/wa-data/public/shop/products/84/59/5984/images/14732/14732.750.jpg" alt="teach1">
				  <div class="overlay"></div>
				  <div class="corner_overlay_content">Подробнее</div>
				  <div class="overlay_content">
					<h2>Image Ink Logo</h2>
					<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
				  </div>
				</div>
<div class="content_item">
				  <img src="http://ecoles-nn.ru/wa-data/public/shop/products/84/59/5984/images/14732/14732.750.jpg" alt="teach1">
				  <div class="overlay"></div>
				  <div class="corner_overlay_content">Подробнее</div>
				  <div class="overlay_content">
					<h2>Image Ink Logo</h2>
					<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
				  </div>
				</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript