Кликабельная анимация
Добрый вечер. Друзья, у меня есть анимация 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, время: 02:01. |