I'm doing intro "Merry Christmas" video and I want to use HTML.
https://cleoni.pl/
Chrome - didn't work
Firerfox - it works/didn't work
Opera - it works
Microsoft Edge - it works
#home-bg-video {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: #000000;
background-size: cover;
}
<video id="home-bg-video" poster="../video/CHoinka_AR_001_cam_002.jpg" autoplay>
<source src="../video/2019_choinka_dzwonki_77.mp4" type="video/mp4">
<source src="../video/2019_choinka_dzwonki_77.webm" type="video/webm">
</video>
Is this the effect you are looking for?
#home-bg-video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: #000000;
background-size: cover;
animation: mymove 2s;
-webkit-animation: mymove 2s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
from {
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
}
to {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
}
/* Standard syntax */
#keyframes mymove {
from {
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
}
to {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
}
<video id="home-bg-video" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>
Related
I have a page that have responsive video in it, it works great in laptop or any wide screen, but i face a problem of white space above nad below the video in vertical screen like mobiles, i used following ccs code:
.background-video {
position: fixed;
z-index: -10;
top: 0;
right: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(50%, 0);
-moz-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
-o-transform: translate(50%, 0);
transform: translate(50%, 0);
background: url(../video/video.jpg) no-repeat;
background-size: cover;
}
.section-video {
position: relative;
background-size: cover;
background-position: 50% 50%;
height: 100vh;
z-index: 0;
}
.section-video .bgvid {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
}
here is live preview:
http://shiftmkt.sa/tec/
Try this.
Let me know if you need any changes.
body{
margin: 0;
padding: 0;
}
.section-video .bgvid {
width: 100%;
height: 100%;
}
<div class="section-video">
<video autoplay="" poster="video/video.jpg" class="bgvid" loop="">
<source src="http://shiftmkt.sa/tec/video/video.webm" type="video/webm">
<source src="http://shiftmkt.sa/tec/video/video.mp4" type="video/mp4">
<source src="http://shiftmkt.sa/tec/video/video.ogv" type="video/ogv">
</video>
</div>
Alright, so I have two problems, the first problem is that I want the animation to rotate over the X-axes, but it looks weird, because it's not spinning inside each other, Fiddle
Then my other problem is, when I add something like scale(1.5) to the transform animation, it just seems to ignore the rotation, it just won't work anymore.
HTML
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>
CSS
.animate{
animation: rotate 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
The height of the .coin element is being calculated as 0, so that's where the transform-origin is. If you make the coin fill its parent, then it looks good. You can work around the scaling problem by applying scale to the wrapper instead of the coin.
.animate{
animation: rotate 5s;
}
.coin-wrapper {
animation: scale 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
#-webkit-keyframes scale {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>
When I run this animation on Safari, there is a unwanted offset between wrapper and target, which should be at the center of wrapper. This code work well on others browsers including IE.
A strange thing is that the position of the target in developer tool is correct, but it just rendered with offset.
Here is the screenshot.
Is there any hack to take over this problem?
My safari version: 10.1.1
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: flip 2s;
animation: flip 2s;
}
#-webkit-keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
Thanks for any help!
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: relative;
margin: 0 auto;
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: -30px;
right: 0;
-webkit-animation: flip 2s;
animation: flip 2s;
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(60px,0) rotateX(0deg);
transform: translate(60px,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(0px,0) rotateX(360deg);
transform: translate(0px,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
u can try this code..
i need book page turn Animation Effect loading screen . i created for one turn i need continuous turn how to make book like loading.
I want to implement this page turn book effect.
for loading screen.
need to add new turn page after turn one page
.cssload-thecube {
width: 96px;
height: 69px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: #000;
}
.cssload {
width: 73px;
height: 73px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: rgb(43,160,199);
}
.cssload-thecube .cssload-cube {
position: relative;
}
.cssload-thecube .cssload-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
content: "";
position: absolute;
top: -36px;
left: 15px;
width: 100%;
height: 100%;
background-color: rgb(43,160,199);
animation: cssload-fold-thecube 2.76s infinite linear both;
-o-animation: cssload-fold-thecube 2.76s infinite linear both;
-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
transform: scale(1.1) rotateZ(90deg);
-o-transform: scale(1.1) rotateZ(90deg);
-ms-transform: scale(1.1) rotateZ(90deg);
-webkit-transform: scale(1.1) rotateZ(90deg);
-moz-transform: scale(1.1) rotateZ(90deg);
}
#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}
<div class="cssload-thecube">
<div class="cssload-cube cssload-c2"></div>
</div>
#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}
I am running into an issue in my mobile media query - anything under a 640px viewport. I have a circle that comes together and forms a full circle (see snippet), but for some reason in my media query, the circle doesn't quite line up, and I am unsure why as I am using the same math that makes it work in a desktop version.
Here is what it looks like within the 640 media query:
So how this works is I give .circle the same height and width. So let's say 200px for both height and width.
Then the class of .spinner, I divide the height and width of the .circle by two. So I would have 125px for height and width.
Then I set the border size, so lets use 5px. What I do is add that border size to the height and width numbers of .spinner and use that figure, which would be 130px to everything else ranging from .top, .bottom, q2, mask, etc.
That is how I get this to work and my math in my media query is not wrong. Does anyone see why this isn't lining up?
.blue {
background-color: blue;
width: 100%;
height: 600px;
}
.circle {
z-index: 99;
width: 500px;
height: 500px;
position: absolute;
background: inherit;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 250px;
height: 250px;
position: absolute;
border: 5px solid #b5f2ff;
z-index: 10;
}
.top {
top: 255px;
left: 255px;
border-radius: 0 0 255px 0;
border-left: none;
border-top: none;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.bottom {
border-radius: 255px 0 0 0;
border-bottom: none;
border-right: none;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.topright,
.bottomleft {
-webkit-animation: rotate90 4s linear forwards;
animation: rotate90 4s linear forwards;
}
.topleft,
.bottomright {
-webkit-animation: rotate180 4s linear forwards;
animation: rotate180 4s linear forwards;
}
.mask {
width: 255px;
height: 255px;
position: absolute;
opacity: 1;
background: inherit;
z-index: 15;
-webkit-animation: mask 4s linear forwards;
animation: mask 4s linear forwards;
}
.q2 {
top: 0;
left: 0;
}
.q4 {
top: 255px;
left: 255px;
}
#-webkit-keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#circle-text {
display: none;
position: absolute;
color: #FFF;
font-size: 2.3em;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}
#media screen and (max-width:640px) {
.circle {
z-index: 100;
width: 250px;
height: 250px;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 125px;
height: 125px;
z-index: 10;
}
.top {
top: 130px;
left: 130px;
border-radius: 0 0 130px 0;
}
.bottom {
border-radius: 130px 0 0 0;
}
.mask {
width: 130px;
height: 130px;
}
.q4 {
top: 130px;
left: 130px;
}
}
<div class="blue">
<div class="circle">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
</div>
You have an inconsistent use of box-sizing:border-box in your CSS. It's being used in media queries, so that it doesn't apply to all screen sizes. And it would mess up your calculations.