Swipeable Video Cards

Developer
Anton Mudrenok
Size
11,052 Kb
Views
22,264
  1. Swipeable Video Cards Previews
  2. Swipeable Video Cards HTML Codes
  3. Swipeable Video Cards CSS Codes
  4. Swipeable Video Cards JS Codes

How do I make an swipeable video cards?

Was interesting to know about performance when video gets some translations. Idea for test: https://dribbble.com/shots/2846926-Time-Lapse-Cards-with-location-for-travel-iOS-app-by-Fantasy. What is a swipeable video cards? How do you make a swipeable video cards? This script and codes were developed by Anton Mudrenok on 28 September 2022, Wednesday.

Swipeable Video Cards Previews
IQ Test

Swipeable Video Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swipeable Video Cards</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="elements"> <div class="container"> <div class="slide slide1 index4"> <video id="italy" height="310" autoplay="autoplay" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/590456190_640x360.jpg"> <source src="//player.vimeo.com/external/181785119.sd.mp4?s=5bb11371ddf8b65207173d68f30ebe9759c60554" type="video/mp4"/>Your browser doesn't support HTML5 video tag. </video> </div> <div class="slide index3"> <video id="paris" height="310" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/529880565_640x360.jpg">//, controls) <source src="//player.vimeo.com/external/135710130.sd.mp4?s=16036acc01a6d26d6a64feb4d92afd23" type="video/mp4"/>Your browser doesn't support HTML5 video tag. </video> </div> <div class="slide index2"> <video id="hongkong" height="310" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/571934523_640x360.jpg"> <source src="//player.vimeo.com/external/167599912.sd.mp4?s=f97f57e9205c9c86f10df25404edba51a8ea0917" type="video/mp4"/>Your browser doesn't support HTML5 video tag. </video> </div> <div class="slide index1"> <video id="prog" height="310" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/587730046_640x360.jpg"> <source src="//player.vimeo.com/external/179738669.sd.mp4?s=fb42e7e2c8c6ff0d5d0b03dfa6aa8af830019f79" type="video/mp4"/>Your browser doesn't support HTML5 video tag. </video> </div> </div> <div class="description"> <div class="description__country"><span>La Crusc, Italy</span> <svg class="italy" viewbox="0 0 35 23"> <rect width="12" height="23" fill="#3D9348"></rect> <rect x="23" width="12" height="23" fill="#D80031"></rect> </svg> </div> <div class="description__country hide"><span>Paris, France</span> <svg class="france" viewbox="0 0 35 23"> <rect x="-0.1" width="12" height="23" fill="#323E95"></rect> <rect x="23" width="12" height="23" fill="#D80031"></rect> </svg> </div> <div class="description__country hide"><span>Hong Kong, China</span> <svg class="china" viewbox="0 0 35 23"> <g> <rect width="35" height="23" fill="#CB1D23"></rect> <polygon points="4,8.9 4.7,6.6 2.8,5.2 5.2,5.2 5.9,2.9 6.7,5.2 9.1,5.2 7.1,6.6 7.8,8.9 5.9,7.5	" fill="#F7DE29"></polygon> <polygon points="10.7,10.1 11.5,10.4 12,9.8 12,10.6 12.8,11 11.9,11.2 11.9,12 11.4,11.3 10.6,11.5 11.1,10.8	" fill="#F7DE29"></polygon> <polygon points="15,5.7 14.2,5.6 13.8,6.3 13.6,5.5 12.8,5.3 13.6,4.9 13.4,4.1 14.1,4.7 14.8,4.3 14.4,5.1	" fill="#F7DE29"></polygon> <polygon points="13.2,9.6 13.5,8.8 12.8,8.3 13.6,8.3 13.9,7.4 14.2,8.3 15.1,8.3 14.4,8.8 14.6,9.6 13.9,9.1	" fill="#F7DE29"></polygon> <polygon points="10.7,2 11.5,2.4 12.1,1.8 12,2.6 12.8,3 11.9,3.2 11.8,4 11.4,3.3 10.5,3.4 11.1,2.8	" fill="#F7DE29"></polygon> </g> </svg> </div> <div class="description__country hide"><span>Thx for watching</span> <svg class="china" viewbox="0 0 35 23"><a xlink:href="https://twitter.com/AntonMudrenok" target="_blank"> <path d="M31.3,2.7c-1,0.5-2.2,0.8-3.3,0.9c1.2-0.7,2.1-1.9,2.6-3.2c-1.1,0.7-2.4,1.1-3.7,1.4C25.8,0.7,24.3,0,22.6,0 c-3.2,0-5.8,2.6-5.8,5.8c0,0.5,0.1,0.9,0.1,1.3C12.1,6.9,7.8,4.6,5,1.1C4.5,1.9,4.2,2.9,4.2,4c0,2,1,3.8,2.6,4.8 c-1,0-1.8-0.3-2.6-0.7c0,0,0,0,0,0.1c0,2.8,2,5.2,4.7,5.7c-0.5,0.1-1,0.2-1.5,0.2c-0.4,0-0.7,0-1.1-0.1c0.7,2.3,2.9,4,5.4,4 c-2,1.6-4.5,2.5-7.2,2.5c-0.5,0-0.9,0-1.4-0.1C5.6,22,8.6,23,11.9,23c10.7,0,16.5-8.8,16.5-16.5c0-0.3,0-0.5,0-0.8 C29.5,4.9,30.5,3.9,31.3,2.7z" fill="#55ACEE"></path></a></svg> </div> <div class="description__line"></div> <div class="description__text"><span>How about you explore cultural events in La Crusc?</span></div> <div class="description__text hide"><span>How about you explore cultural events in Paris?</span></div> <div class="description__text hide"><span>How about you explore cultural events in Hong Kong?</span></div> <div class="description__text hide"><span>More demos soon =)</span></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Swipeable Video Cards - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Questrial");
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;
}
html, body { font-size: 62.5%;
}
body { background: #eeeeee; overflow-x: hidden; font-family: 'Questrial', "Helvetica Neue", Helvetica, sans-serif;
}
.elements { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 35rem; height: 51rem; background-color: #fff; border-radius: 3px; box-shadow: 0.5rem 1rem 3rem rgba(0, 0, 0, 0.7);
}
.container { position: relative; margin: 3rem auto 0; width: 32rem;
}
.slide { position: absolute; height: 31rem; width: 32rem; border-radius: 3px; cursor: -webkit-grab; cursor: grab; background-color: gray; overflow: hidden; will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0);
}
.slide1 { box-shadow: 0.2rem 0.2rem 2.5rem rgba(0, 0, 0, 0.7); background-image: url("https://i.vimeocdn.com/video/590456190_640x360.jpg"); background-size: 55rem;
}
#paris { margin-left: -15rem;
}
#italy, #prog { margin-left: -0rem;
}
#hongkong { margin-left: -10rem;
}
.index1 { z-index: 1;
}
.index2 { z-index: 2;
}
.index3 { z-index: 3;
}
.index4 { z-index: 4;
}
.description { position: absolute; top: 39rem; margin: auto 4.2rem; width: 26.6rem;
}
.description__line { position: absolute; top: 3.5rem; width: 100%; border-bottom: 1px solid #eeeeee;
}
.description__country, .description__text { position: absolute; will-change: transform, opacity; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; -webkit-transition: all 0.25s cubic-bezier(0.74, 0.05, 0.94, 0.36); transition: all 0.25s cubic-bezier(0.74, 0.05, 0.94, 0.36);
}
.description__country { width: 100%; font-size: 2rem; font-weight: 600;
}
.description__text { top: 5rem; font-size: 1.7rem; font-weight: 300; color: #aaaaaa; -webkit-transition-delay: 0.03s; transition-delay: 0.03s;
}
.description__text.hide { -webkit-transition-delay: .28s; transition-delay: .28s;
}
.fadeout-up { opacity: 0; -webkit-transform: translate3D(0, -2rem, 0); transform: translate3D(0, -2rem, 0);
}
.hide { opacity: 0; -webkit-transform: translate3D(0, 2rem, 0); transform: translate3D(0, 2rem, 0); -webkit-transition: all 0.25s cubic-bezier(0.05, 0.67, 0.47, 0.99); transition: all 0.25s cubic-bezier(0.05, 0.67, 0.47, 0.99); -webkit-transition-delay: .25s; transition-delay: .25s;
}
.fadein-up { opacity: 1; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0);
}
svg { width: 3.5rem; height: 2.3rem; position: absolute; right: 0; top: -0.1rem;
}

Swipeable Video Cards - Script Codes JS Codes

"use strict";
$(document).ready(function () { var $videos = [].slice.call(document.querySelectorAll('.slide')); var $countries = [].slice.call(document.querySelectorAll(".description__country")); var $texts = [].slice.call(document.querySelectorAll(".description__text")); var fromTo = function fromTo(from, to) { var prgrs = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2]; return from + (to - from) * prgrs; }; var easing = { inCubic: function inCubic(t, b, c, d) { // t: current time, b: begInnIng value, c: change In value, d: duration var ts = (t /= d) * t; var tc = ts * t; return b + c * (1.7 * tc * ts - 2.05 * ts * ts + 1.5 * tc - 0.2 * ts + 0.05 * t); } }; var transforms = { translate3D: function translate3D() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2]; var el = arguments.length <= 3 || arguments[3] === undefined ? "px" : arguments[3]; return "translate3D(" + x + el + ", " + y + el + ", " + z + el + ")"; }, rotate3d: function rotate3d() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2]; var deg = arguments.length <= 3 || arguments[3] === undefined ? 0 : arguments[3]; return "rotate3d(" + x + ", " + y + ", " + z + ", " + deg + "deg)"; }, rotate: function rotate() { var deg = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; return "rotate(" + deg + "deg)"; }, scale: function scale() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; return "scale(" + x + ", " + y + ")"; }, perspective: function perspective() { var val = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var el = arguments.length <= 1 || arguments[1] === undefined ? "px" : arguments[1]; return "perspective(" + val + el + ")"; } }; var descriptions = { index: 0, timeout: 550, countries: $countries.slice(), texts: $texts.slice(), animateDescription: function animateDescription() { $(this.countries[0]).addClass("fadeout-up"); $(this.countries[1]).addClass("fadein-up"); $(this.texts[0]).addClass("fadeout-up"); $(this.texts[1]).addClass("fadein-up"); }, swapDescription: function swapDescription() { var shdC = this.countries.shift(); var shdT = this.texts.shift(); var count = $countries.length; if (count > this.index + 4) { this.countries.push($countries[this.index + 5]); this.texts.push($texts[this.index + 5]); } else { this.countries.push(shdC); this.texts.push(shdT); } this.index === count ? this.index = 0 : this.index++; this.initDescriptions(); }, initDescriptions: function initDescriptions() { var length = this.countries.length; $(this.countries[0]).removeClass("hide fadein-up"); $(this.countries[length - 1]).addClass("hide").removeClass("fadeout-up"); $(this.texts[0]).removeClass("hide fadein-up"); $(this.texts[length - 1]).addClass("hide").removeClass("fadeout-up"); } }; var curBlocks = { blocks: $videos.slice(), index: 0, swapBlocks: function swapBlocks() { var shd = this.blocks.shift(); var count = $videos.length; if (count > this.index + 4) { this.blocks.push($videos[this.index + 5]); } else { this.blocks.push(shd); } this.index === count ? this.index = 0 : this.index++; initScene(); } }; var block = { width: 32, heigth: 31, b2scale: 30 / 32, b3scale: 28 / 32, upHeigth: 1, b2caclH: 0, b3caclH: 0, interact: false }; var initScene = function initScene() { block.b2caclH = block.heigth * (1 - block.b2scale) * (1 / block.b2scale) / 2 + block.upHeigth * (1 / block.b2scale); block.b3caclH = block.heigth * (1 - block.b3scale) * (1 / block.b3scale) / 2 + block.upHeigth * 2 * (1 / block.b3scale); curBlocks.blocks[0].style.transform = transforms.translate3D(0, 0, 0, "rem"); curBlocks.blocks[1].style.transform = transforms.scale(block.b2scale, block.b2scale) + transforms.translate3D(0, block.b2caclH, 0, "rem"); curBlocks.blocks[2].style.transform = transforms.scale(block.b3scale, block.b3scale) + transforms.translate3D(0, block.b3caclH, 0, "rem"); curBlocks.blocks[3].style.transform = transforms.scale(block.b3scale, block.b3scale); curBlocks.blocks[0].style.opacity = 1; curBlocks.blocks[1].style.opacity = 0.1; curBlocks.blocks[2].style.opacity = 0.03; curBlocks.blocks[3].style.opacity = 0; curBlocks.blocks[0].className = "slide slide1 index4"; curBlocks.blocks[1].className = "slide index3"; curBlocks.blocks[2].className = "slide index2"; curBlocks.blocks[3].className = "slide index1"; bindDrag(); }; initScene(); var drag = { degree: 2.7, upHeight: 1.5, maxDrag: 75, b2scale: 0.98, b3scale: 0.95, dx: 0, frameBusy: false, helloSafari: 2.9 // need to add this coz of strange behavior }; var dragBlock = function dragBlock() { var maxStep = drag.maxDrag; var curStep = drag.dx; if (curStep > maxStep) curStep = maxStep; if (curStep < -maxStep) curStep = -maxStep; var progress = curStep / maxStep; var curDeg = drag.degree * progress; var curUpLen = drag.upHeight * Math.abs(curStep) / maxStep; var curScaleBlock2 = drag.b2scale + (1 - drag.b2scale) * (maxStep - curStep) / maxStep; var curScaleBlock3 = drag.b3scale + (1 - drag.b3scale) * (maxStep - curStep) / maxStep; curBlocks.blocks[0].style.transform = transforms.perspective(220, "rem") + transforms.rotate(curDeg) + transforms.rotate3d(1, 1, 0, curDeg * 3) + transforms.translate3D(0, -curUpLen, 0, "rem"); curBlocks.blocks[1].style.transform = transforms.scale(block.b2scale * curScaleBlock2, block.b2scale * curScaleBlock2) + transforms.translate3D(0, block.b2caclH - curUpLen / 4, 0, "rem") + transforms.rotate(curDeg / 3) + transforms.rotate3d(1, 1, 0, curDeg * drag.helloSafari); curBlocks.blocks[2].style.transform = transforms.scale(block.b3scale * curScaleBlock3, block.b3scale * curScaleBlock3) + transforms.translate3D(0, block.b3caclH + curUpLen / 1.5, 0, "rem") + transforms.rotate(-curDeg) + transforms.rotate3d(1, 1, 0, curDeg * drag.helloSafari); curBlocks.blocks[0].style.opacity = 1; curBlocks.blocks[1].style.opacity = fromTo(0.1, 0.7, progress); curBlocks.blocks[2].style.opacity = fromTo(0.03, 0.07, progress); curBlocks.blocks[3].style.opacity = 0; drag.frameBusy = false; }; var throwing = { animating: false, curStep: 0, maxStep: 15 }; var throwBlock = function throwBlock() { if (++throwing.curStep > throwing.maxStep) { $(document).off("mousedown touchstart"); throwing.curStep = 0; drag.dx = 0; curBlocks.blocks[0].children[0].pause(); curBlocks.swapBlocks(); return; } var progress = easing.inCubic(throwing.curStep, 0, 1, throwing.maxStep); var delta = easing.inCubic(throwing.curStep, 0, 1, throwing.maxStep) * 40; curBlocks.blocks[0].style.transform = transforms.rotate(drag.degree + delta / 2) + transforms.rotate3d(1, 1, 0, drag.degree * 3) + transforms.translate3D(delta, -drag.upHeight - delta / 1.2, 0, "rem"); var b2Scale = fromTo(block.b2scale * drag.b2scale, 1, progress); var b2TransY = fromTo(block.b2caclH - drag.upHeight / 4, 0, progress); var b2Rot = fromTo(drag.degree / 3, 0, progress); curBlocks.blocks[1].style.transform = transforms.scale(b2Scale, b2Scale) + transforms.translate3D(0, b2TransY, 0, "rem") + transforms.rotate(b2Rot) + transforms.rotate3d(1, 1, 0, drag.degree * drag.helloSafari); var b3Scale = fromTo(block.b3scale * drag.b3scale, block.b2scale, progress); var b3TransY = fromTo(block.b3caclH + drag.upHeight / 1.5, block.b2caclH, progress); var b3Rot = fromTo(-drag.degree, 0, progress); curBlocks.blocks[2].style.transform = transforms.scale(b3Scale, b3Scale) + transforms.translate3D(0, b3TransY, 0, "rem") + transforms.rotate(b3Rot) + transforms.rotate3d(1, 1, 0, drag.degree * drag.helloSafari); curBlocks.blocks[3].style.transform = transforms.scale(block.b3scale, block.b3scale) + transforms.translate3D(0, fromTo(0, block.b3caclH, progress), 0, "rem"); curBlocks.blocks[0].style.opacity = fromTo(1, 0.5, progress); curBlocks.blocks[1].style.opacity = fromTo(0.7, 1, progress); curBlocks.blocks[2].style.opacity = fromTo(0.07, 0.1, progress); curBlocks.blocks[3].style.opacity = fromTo(0, 0.03, progress); requestAnimationFrame(throwBlock); }; function bindDrag() { $(document).on("mousedown touchstart", ".slide1", function (e) { var startX = e.pageX || e.originalEvent.touches[0].pageX; var startY = e.pageY || e.originalEvent.touches[0].pageY; block.interact = true; $(document).on("mousemove touchmove", function (e) { var curX = e.pageX || e.originalEvent.touches[0].pageX; var curY = e.pageY || e.originalEvent.touches[0].pageY; if (curX - startX <= 0) curX = startX; if (curY - startY >= 0) curY = startY; drag.dx = Math.sqrt(Math.pow(curX - startX, 2) + Math.pow(curY - startY, 2)); if (!drag.dx) return; if (drag.frameBusy) return; drag.frameBusy = true; requestAnimationFrame(dragBlock); }); $(document).on("mouseup touchend", function (e) { $(document).off("mousemove touchmove mouseup touchend"); if (Math.abs(drag.dx) < drag.maxDrag) { drag.dx = 0; requestAnimationFrame(dragBlock); } else { descriptions.animateDescription(); setTimeout(descriptions.swapDescription.bind(descriptions), descriptions.timeout); curBlocks.blocks[1].children[0].play(); requestAnimationFrame(throwBlock); } }); }); }; (function prevAnimation() { var initDel = 500; var frames = drag.maxDrag; var spd = 15; var _loop = function _loop(i) { setTimeout(function () { if (!block.interact) { drag.dx = i; if (drag.frameBusy) return; requestAnimationFrame(dragBlock); } }, initDel + spd * i); }; for (var i = 1; i < frames; i++) { _loop(i); } var _loop2 = function _loop2(i) { setTimeout(function () { if (!block.interact) { drag.dx = i; if (drag.frameBusy) return; requestAnimationFrame(dragBlock); } }, initDel + spd * (frames * 2 + 1 - i)); }; for (var i = frames; i >= 0; i--) { _loop2(i); } })();
});
Swipeable Video Cards - Script Codes
Swipeable Video Cards - Script Codes
Home Page Home
Developer Anton Mudrenok
Username mudrenok
Uploaded September 28, 2022
Rating 4.5
Size 11,052 Kb
Views 22,264
Do you need developer help for Swipeable Video Cards?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Mudrenok (mudrenok) Script Codes
Name
Radial Menu Animation
Gomoku JS
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!