111 lines
2.6 KiB
Plaintext
111 lines
2.6 KiB
Plaintext
{% assign content_type = content_type | default: 'awdawd' %}
|
|
|
|
{% if content_type == 'wasd' %}
|
|
|
|
|
|
{% elsif content_type == "init" %}
|
|
|
|
<style type="text/css">
|
|
|
|
.shx-video {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shx-video__wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.shx-video__wrapper video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.shx-video-for-desc {
|
|
max-width: 100%;
|
|
width: 200px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// create Class for video in product card
|
|
class ShxVideo {
|
|
constructor(video) {
|
|
this.video = video;
|
|
this.videoWrapper = video.closest('.shx-video__wrapper');
|
|
//this.videoWrapper.addEventListener('click', this.togglePlay.bind(this));
|
|
|
|
// get parrent with class "card-wrapper product-card-wrapper"
|
|
this.productCard = video.closest('.product-card-wrapper');
|
|
|
|
//hover effect
|
|
this.productCard.addEventListener('mouseenter', this.hoverEffectIn.bind(this));
|
|
this.productCard.addEventListener('mouseleave', this.hoverEffectOut.bind(this));
|
|
|
|
// play video on hover
|
|
this.productCard.addEventListener('mouseenter', this.playVideo.bind(this));
|
|
this.productCard.addEventListener('mouseleave', this.pauseVideo.bind(this));
|
|
|
|
// also make it mobile friendly
|
|
this.productCard.addEventListener('touchstart', this.hoverEffectIn.bind(this));
|
|
this.productCard.addEventListener('touchend', this.hoverEffectOut.bind(this));
|
|
|
|
this.productCard.addEventListener('touchstart', this.playVideo.bind(this));
|
|
this.productCard.addEventListener('touchend', this.pauseVideo.bind(this));
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
hoverEffectIn() {
|
|
// use animejs
|
|
anime({
|
|
targets: this.video,
|
|
scale: 1.1,
|
|
opacity: 1,
|
|
duration: 300,
|
|
easing: 'easeOutQuad'
|
|
});
|
|
}
|
|
|
|
hoverEffectOut() {
|
|
// use animejs
|
|
anime({
|
|
targets: this.video,
|
|
scale: 1,
|
|
opacity: 0,
|
|
duration: 300,
|
|
easing: 'easeOutQuad'
|
|
});
|
|
}
|
|
|
|
playVideo() {
|
|
this.video.play();
|
|
}
|
|
|
|
pauseVideo() {
|
|
this.video.pause();
|
|
}
|
|
|
|
}
|
|
|
|
// dom ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const videos = document.querySelectorAll('.shx-video-card-product');
|
|
videos.forEach(video => new ShxVideo(video));
|
|
});
|
|
|
|
</script>
|
|
|
|
{% endif %} |