Folded Video

Developer
Daniel Gooß
Size
3,913 Kb
Views
12,144
  1. Folded Video Previews
  2. Folded Video HTML Codes
  3. Folded Video CSS Codes

How do I make an folded video?

NOTE: Please watch in latest Canary with flag "Enable experimental Web Platform features" enabled.. What is a folded video? How do you make a folded video? This script and codes were developed by Daniel Gooß on 10 November 2022, Thursday.

Folded Video Previews
IQ Test

Folded Video - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Folded Video</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--<p class="note">NOTE: Please watch in latest Canary with flag <strong>"Enable experimental Web Platform features"</strong> enabled.</p>-->
<p class="note">NOTE: Due to changes in the Google Chrome road map, the support for CSS Regions in Canary was removed, which makes this Pen unfunctional, sorry. I will update it as soon as Regions will return.</p>
<video class="source" src="https://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4" controls autoplay loop width="854" height="480"></video>
<div class="wrapper"> <ul id="fold"> <li id="region1" class="page"> <div class="region"></div> <div class="cover"> <div class="frontcover"> <h1><img src="http://upload.wikimedia.org/wikipedia/de/e/ea/Big_Buck_Bunny.svg" alt="" /></h1> <h2>In CSS Regions</h2> </div> </div> </li> <li id="region2" class="page"> <div class="region"></div> </li> <li id="region3" class="page"> <div class="region"></div> <div class="cover"></div> </li> </ul>
</div>
</body>
</html>

Folded Video - Script Codes CSS Codes

@-webkit-keyframes fold-first { 0% { -webkit-transform: rotateX(-180deg); } 50% { box-shadow: 0 10px 20px rgba(0, 0, 0, 0); } 100% { box-shadow: -5px -10px 20px rgba(0, 0, 0, 0.25); -webkit-transform: rotateX(-10deg); }
}
@-webkit-keyframes fold-last { 0% { -webkit-transform: rotateX(180deg); } 50% { box-shadow: 0 10px 20px rgba(0, 0, 0, 0); } 100% { box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.25); -webkit-transform: rotateX(10deg); }
}
html,
body { overflow: auto; height: 100%; background: linear-gradient(0deg, #0083B7 0%, #00A8E6 100%); color: #333; font-family: Arial, sans-serif;
}
.wrapper { margin: 100px auto; width: 854px; height: 480px;
}
.source { z-index: 3; -webkit-transform: rotateZ(90deg); -webkit-transform-origin: 28.1% 50%; -webkit-flow-into: source;
}
#fold { display: inline-block; margin: 0; padding: 0; width: 854px; width: 480px; height: 854px; -webkit-transform: rotateZ(-90deg); -webkit-transform-origin: 50% 28.1%; -webkit-perspective: 1400px;
}
#fold .page { position: relative; display: block; width: 480px; height: 284px; list-style-type: none; -webkit-transform-style: preserve-3d;
}
#fold .cover,
#fold .region { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden;
}
#fold .region { background-color: #000; -webkit-flow-from: source;
}
#fold .cover { background-color: #fff; -webkit-transform: rotateX(180deg);
}
#fold .frontcover { display: inline-block; width: 284px; height: 480px; -webkit-transform: rotateZ(90deg) translateY(-480px); -webkit-transform-origin: 0% 0%;
}
#fold .frontcover h1,
#fold .frontcover h2 { display: block; margin: 100px auto; width: 80%; text-align: center;
}
#fold .frontcover img { max-width: 100%;
}
#fold #region1 { z-index: 2; transition: -webkit-transform 2s; -webkit-transform: rotateX(-180deg); -webkit-transform-origin: 50% 100%; -webkit-animation: fold-first 2s 2s both;
}
#fold #region1 .region { -webkit-filter: brightness(0.95);
}
#fold #region2 { z-index: 0; box-shadow: -5px 0 20px rgba(0, 0, 0, 0.25); -webkit-transform: translateZ(0);
}
#fold #region3 { z-index: 1; -webkit-transform-origin: 50% 0%; -webkit-animation: fold-last 2s 4s both;
}
#fold #region3 .region { -webkit-filter: brightness(1.07);
}
.note { padding: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); background-color: #fff; text-align: center;
}
Folded Video - Script Codes
Folded Video - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 3
Size 3,913 Kb
Views 12,144
Do you need developer help for Folded Video?

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!

Daniel Gooß (daniel_gooss) Script Codes
Name
Web Component Switches
WebGL Container
IPhone Ui
Navigation concept
Revolver Slideshow
IPhone Ui - Content only
CSS Blur Effect
CSS Paperfold Effect
Base-Style
CSSConf EU
Create amazing SEO 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!