Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test

pull/1/head
Jan Umbach 2024-05-31 18:56:13 +02:00
parent 3bf256a4ca
commit 80f4884c2d
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
snippets/shx-product-desc.liquid
View File

@ -53,12 +53,13 @@
this.appendChild(videoWrapperClone); this.appendChild(videoWrapperClone);
// get video element
let videoElement = videoWrapperClone.querySelector('video');
videoWrapperClone.classList.add('shx-video-for-desc'); videoWrapperClone.classList.add('shx-video-for-desc');
// get video element
let videoElement = videoWrapperClone.querySelector('video');
// move video element out of his parent // move video element out of his parent
videoWrapperClone.appendChild(videoElement); videoWrapperClone.appendChild(videoElement);
@ -72,15 +73,22 @@
videoElement.play(); videoElement.play();
if(openAnimation) { if(openAnimation) {
// calculate of videoWrapperClone height
let height = videoWrapperClone.offsetHeight;
videoWrapperClone.style.height = '0px'; videoWrapperClone.style.height = '0px';
function animate() { function animate() {
anime({ anime({
targets: videoWrapperClone, targets: videoWrapperClone,
height: '400px', height: height,
duration: 500, duration: 500,
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)' easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
done: function() {
videoWrapperClone.style.height = 'auto';
}
}); });
} }
//animejs fade in //animejs fade in

8
snippets/shx-video-base.liquid
View File

@ -37,12 +37,16 @@
margin: 0 auto; margin: 0 auto;
} }
.shx-video-for-desc video {
width: 100%;
height: auto;
object-fit: cover;
}
.shx-video-card-product { .shx-video-card-product {
width: 100%; width: 100%;
height: auto; height: auto;
opacity: 0; opacity: 0;
} }
</style> </style>