Кликабельная анимация
Добрый вечер. Друзья, у меня есть анимация https://jsfiddle.net/9ag0mo5c, но работает она при hover, а мне нужно при клике развернуть и вернуть в исходную позицию. Я попробовал написать скрипт https://jsfiddle.net/dL0L4dzz/3/
но к сожалению у меня не получилось, т. к. еще зеленый в программировании. Пожалуйста, помогите подправить. |
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,
тогда не id а class и forEach. |
Уважаемый рони, я конечно почитал про этот метод (конечно пока сложно понять), посмотрел способы реализации ну и изменил по-своему
window.addEventListener('DOMContentLoaded', function() {
var content = document.querySelector(".content_item");
[].forEach.call(content, function() {
content.addEventListener('click', function() {
content.classList.toggle("hover")
});
});
});
, конечно мой вариант не рабочий, но я стараюсь понять. До методов еще таких не дошел, потому что я сейчас решаю задачник Златопольского:) Если не сложно, расскажите подробнее, как это реализовать в моем примере, т.е. я так понял нужно перебрать элементы в данном случае класса .content_item? |
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>
|
| Часовой пояс GMT +3, время: 20:09. |