I've looked at other similar questions, but I can't find a solution.
I have an assignment where I need to make a mini game. I want to make a looping background with CSS, using an image with 1600px width and 500px height. My screen (div) has 800px width and 500px height. I tried so many things, but it keeps 'glitching'. So instead of being smooth, it jumps back.
This is the HTML:
<section class="center">
<div class="background disco"></div>
<div class="player"><img src="images/player-03.png"></div>
<div class="bier"><img src="images/bier.png"></div>
<div class="water"><img src="images/water.png"></div>
<p class="biertjes"></p>
<p class="watertjes"></p>
<p class="promille"></p>
<p class="gameover">Watje! Water maakt je nuchter!</p>
<p class="gameoverscore"></p>
<p class="winscreen">Proficiat! Door alle alcohol heb je een blackout!</p>
<p class="winscore"></p>
<div class="startscreen">
<h1>Welkom! Zo moet je spelen:</h1>
<p>↑ = stijgen<br>
↓ = dalen<br>
← = vertragen<br>
→ = versnellen</p>
<p class="start">SPEEL!!</p>
<div class="el"></div>
<div class="dance"></div>
<div class="dance2"></div>
</div>
</section>
This is my CSS:
.center {
width:800px;
height:500px;
position:absolute;
z-index: 0;
left:50%;
top:50%;
margin:-250px 0 0 -400px;
text-align:center;
border: 3px solid #ff23be;
overflow: hidden;
background: black;
}
.background {
width:800px;
height:500px;
position:absolute;
background-repeat: no-repeat;
}
.disco {
width: 2400px;
height: 500px;
z-index: 0;
background-image: url(/images/loop.jpg);
background-size: contain;
top: 0px;
animation-name: disco;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes disco {
from {transform: translateX(0px); }
to {transform: translateX(-1200px);}
}
Can anyone help? I really can't find anything!
Related
I'm trying to achieve the following scrolling effect from the Rocket.Chat homepage.
See effect here
Site: https://rocket.chat/
The issue is that I can't seem to make the image move like they have in the site. Does somebody have any idea why? Or can pass an example?
My component.html
<section class="community py-5">
<div class="container">
<div class="content d-flex">
<div class="content-info">
<div class="mb-5">
<h3>Lorem ipsum text</h3>
</div>
<div class="text-wrapper">
<div class="text">
Some information to be said
</div>
</div>
<div class="btn-wrapper mt-5">
<a href="#" class="btn-contract-us">
<div>
<strong>Join Us</strong>
</div>
</a>
</div>
</div>
<div class="content-image">
<img
[src]="codeImg"
alt=""
draggable="false"
/>
</div>
</div>
</div>
</section>
My component.scss
.community {
position: relative;
.content-info {
padding: 110px 140px 64px;
flex: 1;
background-color: #f7f8fa;
// background-img
background-position: -40px 0;
background-size: 730px;
background-repeat: no-repeat;
div.text {
margin: 0;
font-size: 1.6rem;
line-height: 3.2rem;
}
.btn-contract-us {
background-color: #f5455c;
}
}
.content-image {
overflow: hidden;
width: 30%;
max-height: 524px;
max-width: 430px;
background-color: #1f2329;
background-image: linear-gradient(180deg, #1f2329 60%, #000);
img {
transform: translate3d(0px, -45.9095%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);;
transform-style: preserve-3d;
will-change: transform;
}
}
}
You can use a css-keyframe-animation of the background-image for that:
.component{
display: flex;
align-items: center;
justify-content: space-between;
}
.image{
width:300px;
height:200px;
background-image: url('https://placekitten.com/300/400');
animation: scrollImage;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes scrollImage{
from{
background-position: center 0%
}
to{
background-position: center 100%
}
}
<div class="component">
<div class="content">
<h1>Look, Ma!</h1>
<p>I animated a kitten instead of sourcecode.</p>
</div>
<div class="image"></div>
</div>
Usage:
animation-duration - sets the duration of one iteration of your animation
animation-iteration-count: infinite - lets your animation run endlessly
animation-direction: alternate - lets your animation loop back and forth over and over again
I have The following animated background, currently displayed on the entire screen, I need you to only visualize in a block (<div class="c"> </ div>)
body {
margin:0;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
.c {margin:0 auto;}
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
I always see on the whole screen, some suggestion to be able to see the animation only in a block (div)
Add the following css:
.c { height: 80px; }
.bg { height: 80px; }
Note: Change the sizes according to your taste.(height)
example:
body {
margin:0;
}
.c {
height: 80px;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
height: 80px;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
Change '.bg' position to relative. Add a "container" div as the parent. The "container" should have the relative position. The footer is going to have the "absolute" position.
Take a look
body {
margin:0;
height: 100%;
position: relative;
}
.footer{
position:relative;
bottom:0;
height:50px;
background-color: #f7f7f7;
width: 100%;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:absolute;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
.c {margin:0 auto;}
<div class="container">
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
</div>
I don't understand why rotateX and rotateY animation in 2D transform will move so weird like demo
who can explain it, thanks
the demo code is
pug html
.ar
.ar2
css
body { background: black;}
#keyframes wing3{
0%{transform: rotateX(50deg)}
50%{transform: rotateX(70deg)}
100%{transform: rotateX(50deg)}
}
#keyframes wing4{
0%{transform: rotateY(50deg)}
50%{transform: rotateY(70deg)}
100%{transform: rotateY(50deg)}
}
.ar {
width: 40px; height: 5px; background: #fff;
animation: wing3 1.2s infinite;
}
.ar2 {
width: 40px; height: 5px; background: #fff;
animation: wing4 1.2s infinite;
}
It's not werid but logical. You are rotating on the X/Y axis so from our perspective your don't see any rotation but only a size changing.
Here is a classic rotation done the on Z axis:
.b {
width:100px;
height:10px;
background:red;
margin:50px;
animation:change 5s infinite linear;
}
#keyframes change{
to {
transform:rotate(90deg);
}
}
<div class="b">
</div>
Our element is rotating at the center going from 0 to 90deg. Now imagine your are looking to this rotation from the bottom. You will simply see a reduced width.
Here is the different frames:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 10px;;
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<div class="b" style="transform:rotate(40deg)">
</div>
<div class="b" style="transform:rotate(60deg)">
</div>
<div class="b" style="transform:rotate(80deg)">
</div>
<div class="b" style="transform:rotate(90deg)">
</div>
Now let's look at this from the bottom:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 5px;
}
.a {
width:100px;
height:10px;
display:inline-block;
background:blue;
margin:50px 10px;
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<div class="b" style="transform:rotate(40deg)">
</div>
<div class="b" style="transform:rotate(60deg)">
</div>
<div class="b" style="transform:rotate(80deg)">
</div>
<div class="b" style="transform:rotate(90deg)">
</div>
<br>
<div class="a">
</div>
<div class="a" style="transform:rotateY(40deg)">
</div>
<div class="a" style="transform:rotateY(60deg)">
</div>
<div class="a" style="transform:rotateY(80deg)">
</div>
<div class="a" style="transform:rotateY(90deg)">
</div>
So the blue part is our perception of the Z rotation if we look at it from another direction which is equivalent to an Y rotation. And you also have the same effect using a scale transformation since this one will do the same thing from our perception:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 5px;
animation:rotate 4s infinite linear;
}
.a {
width:100px;
height:10px;
display:inline-block;
background:blue;
margin:50px 10px;
animation:scale 5s infinite linear;
}
#keyframes rotate{
to {
transform:rotateY(90deg);
}
}
#keyframes scale{
to {
transform:scaleX(0);
}
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<br>
<div class="a">
</div>
In order to see this differently, you can add some perspective and you will make the rotation more close to what we see in a real world:
.b {
width:100px;
height:10px;
display:inline-block;
background:red;
margin:50px 5px;
animation:rotate-1 4s infinite linear;
}
.a {
width:100px;
height:10px;
display:inline-block;
background:blue;
margin:50px 10px;
animation:rotate-2 5s infinite linear;
}
#keyframes rotate-1{
to {
transform:perspective(45px) rotateY(180deg);
}
}
#keyframes rotate-2{
to {
transform:perspective(45px) rotateX(180deg);
}
}
body {
margin:0;
font-size:0;
}
<div class="b">
</div>
<br>
<div class="a">
</div>
we are developing an cordova Ionic application. For front end we are using html css.
I want to position images to make http://s6.postimg.org/3jnxu7sr5/Home.png
I am done with http://s6.postimg.org/92qhbfpsh/homw_Screen.png
But the remaining i am not able to bring the top image over the center button to achieve the target. I have uploaded my code here https://jsfiddle.net/sweety1112/p36jxhcd/3/embedded/result/ but fiddle has changed much of UI.
If some one could help that would be of much greatful.
<div class="container">
<div class="top">
<h2 class="mid">Scan</h2>
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'>
</div>
<div class="row">
<img class="applyRotationLeft" src='http://s6.postimg.org/cnhaxjo0h/alphaeon_home_history.png'>
<img class="centerButton" src='http://s6.postimg.org/szrcna2c1/start_btn.png'>
<img class="applyRotationRight" src='http://s6.postimg.org/3orp3w029/home_config.png'>
</div>
<div class="bottom">
<img src='http://s6.postimg.org/6gayuhykx/home_history.png'>
</div>
Regards,
Shraddha
Well if you're going to be rotating the images, there's no need to have five seperate images, it's just more requests and more data usage, since you really need only two images.
If you use
transform-origin: x% x%;
and set it right at the center of the center button somehow, you only need to rotate each of the red things in increments of 90 degrees. I was able to do just that.
HTML:
<div class="container">
<div class="centerButton">
<img src='http://s6.postimg.org/szrcna2c1/start_btn.png'/>
<p>Text</p>
</div>
<div class="top rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
<div class="left rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
<div class="right rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
<div class="bottom rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
</div>
and the CSS:
.rotate div{
position: absolute;
padding:0;
margin:0;
width:100%;
height:100%;
left:0;
right:0;
top:0;
bottom:0;
transition: transform 0.5s linear;
}
.centerButton img, .centerButton p{
position:absolute;
width:100%;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
margin:auto;
}
.centerButton p{
height:10%;
text-align:center;
}
.centerButton{
width:50%;
height:50%;
margin:auto;
position:absolute;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
}
.rotate img{
width:100%;
position:relative;
}
.rotate{
transition: transform 0.5s linear;
position:absolute;
width:72%;
-webkit-transform-origin: 70% 105%;
transform-origin: 70% 105%;
}
.container .bottom, .bottom p{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.container .left, .right div p{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.container .right, .left div p{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.container{
width:250px;
height:250px;
display:block;
position:relative;
}
.rotate div p{
position:absolute;
margin:0;
padding:0;
}
.rotate div p{
top:20%;
left:20%;
}
Here's the fiddle and another I think is a little bit cooler.
NOTE: I only used -webkit- prefix in my fiddle, so you may need to change that in your browser
EDIT: Edited to add what OP asked for in comments
Place the entire image inside one div container. Give each of the five pieces their own id="". Use # to call each id in your css file, put position:relative in all five and use top right bottom & left with px values to maneuver all the pieces into place.
I have a 3d cube rotation, that happens on hover. Everything works fine except one thing. When you roll over and the cube rotates showing a new side with text....the text is backwards, not sure why this is happening. I have a JS fiddle set up, and any help I can get on this would be great.
http://jsfiddle.net/c3ewZ/6/
html:
This is back
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
css
body {
margin:0px;
padding:0px;
}
.box-scene {
-webkit-perspective: 700;
height: 180px;
float:left;
z-index: 999;
padding:0px !important;
}
.box-scene:hover .box {
-webkit-transform: rotateY(90deg);
}
.box {
width: 100%;
height: 100%;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.4s ease-out;
-webkit-transform-origin: 90px 90px -90px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: 2;
background: #d9d9d9;
}
.side {
background: #9dcc78;
-webkit-transform: rotateY(90deg);
z-index: 1;
left: 0px;
}
JS
var resizer = function () {
var width = parseInt($(".box-scene").css("width"));
$(".box").css("-webkit-transform-origin", "center center -" + width / 2 + "px");
};
resizer();
$(window).resize(function () {
resizer();
});
Rotating the panel the other way will fix the mirror imaging of the text.
.box-scene:hover .box {
-webkit-transform: rotateY(-90deg);
}