I'm working on a Knob Component that uses a Spritesheet. I need it to be responsive, relative to the screen size.
Using CSS Sprites I'm able to get the desired behaviour at maximum Sprite size.
The problem comes when the element is scaled down. Then I get a random UP or DOWN single pixel offset on the background-position that gives like a rumbling impression.
Here you have an example Snippet to see this behaviour live:
<html>
<head>
<style type="text/css">
.container{
float:left;
height: 10%;
width: 20%;
}
.sprite{
background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;
max-width: 100%;
background-size: 100%;
background-position: 0 0; background-size: 100%;
animation: play 10s steps(127) infinite;
}
#keyframes play {
100% { background-position: 0 100%; background-size:100%; }
}
</style>
</head>
<body>
<div class="container">
<img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
</div>
</body>
</html>
Note that I based my responsive beahaviour on this site: http://responsive-css.spritegen.com/
Additionally, here you have a JSFiddle
I've also tried other approaches like working in absolute pixel units, and then resizing using functions like:
zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
And the same problem happens when the Scaling factor is not an exact divisor:
For example:
0.5, 0.75, 0.2 WORKS
0.3, 0.7, 0.8 OFFSET PROBLEM
From your question, I understood that you want to make this responsive and here is my answer:
try putting that in the iframe in the following code.
* {
padding: 0px;
border: 0px;
margin: 0px;
}
html {
width: 100vw;
height: 100vh;
}
body {
width: 100vw;
background-color: rgb(19, 19, 19);
}
div#mainContainer {
margin: calc(50vh - 50vw) 0px;
width: 100vw;
height: 100vw;
background-color: rgb(180, 180, 180);
z-index: 1;
}
iframe {
width: 100%;
height: 100%;
}
#media only screen and (orientation: landscape) {
div#mainContainer {
margin: 0px calc(50vw - 50vh);
width: 100vh;
height: 100vh;
}
}
<body>
<div id="mainContainer">
<iframe src="./iframe.html">
</iframe>
</div>
</body>
And this is iframe.html
* {
overflow: hidden;
}
.container{
float:left;
height: 100%;
width: 100%;
}
.sprite{
background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;
width: 100%;
height: 100%;
background-size: 100%;
background-position: 0 0; background-size: 100%;
animation: play 10s steps(127) infinite;
}
#keyframes play {
100% { background-position: 0 100%; background-size:100%; }
}
<html>
<head></head>
<body>
<div class="container">
<img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
</div>
</body>
</html>
Related
I'm creating a scene with a bunch of scrolling layers (foreground, midground, background etc...) but annoyingly I get a flicker on Safari (14.0.3) when the animation restarts. This doesn't occur on Chrome or Firefox.
I've created a minimum reproducible example here:
https://brendon.github.io/safari_flicker/index.html
Here's the code:
.animation {
position: relative;
height: 395px;
background-image: linear-gradient(#1b9dd9, #00b6ed 44%, #ffe56c 75%);
}
.animation .scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
}
.animation .scrollingAnimation:before {
content: "";
position: absolute;
height: 100%;
width: 200%;
}
.animation .foreground:before {
/* Dimensions: */
/* width: 1696px; */
/* height: 74px; */
min-width: 6784px;
background-image: url("https://brendon.github.io/safari_flicker/foreground.png");
background-position: left bottom -11px;
background-repeat: repeat-x;
background-size: auto 74px;
transform: translateX(-1696px);
animation: foreground 10s linear infinite;
}
#keyframes foreground {
0% {
transform: translateX(-1696px);
}
to {
transform: translateX(-3392px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="animation">
<div class="foreground scrollingAnimation"></div>
</div>
</body>
</html>
Here is a video of the issue:
https://github.com/brendon/safari_flicker/raw/main/flicker_video.mp4
I've tried many things to get rid of the issue. It seems to sometimes go away depending on the window width, but I'm looking for a solid solution :D
The issue also exists on iOS Safari.
I should mention that I don't want to animate the background-position property as this causes performance problems and isn't accelerated by the GPU.
Have you thought about using 2 elments with the same image and animation, and offsetting - using delay - the first elements animation by -duration / 2 ?
The idea being that at all times there's one of them on screen and any render delay shouldn't be visible.
See below, I'm animating two pseudo elements.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.animation, .foreground {
height: 100%;
width: 100%;
background: black;
}
.foreground:before, .foreground:after {
height: 100%;
width: 200%;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 50vmin;
}
.foreground {
position: relative;
overflow-x: hidden;
}
.foreground:before {
content: 'A';
background: red;
animation: 10s linear -5s infinite foreground;
}
.foreground:after {
content: 'B';
background: blue;
animation: 10s linear 0s infinite foreground;
}
#keyframes foreground {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
<div class="animation">
<div class="foreground scrollingAnimation"></div>
</div>
I ended up using GSAP fromTo() to manage the transition work instead of relying on the CSS animation:
<div class="foreground scrollingAnimation"><div></div></div>
gsap.fromTo(
'.foreground > div',
{ xPercent: -25 },
{ xPercent: -50, duration: 10, repeat: -1, ease: 'none' }
)
.scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
> div {
position: absolute;
height: 100%;
}
}
.foreground {
> div {
width: calc(1696px * 4);
background: {
image: url("https://brendon.github.io/safari_flicker/foreground.png");
position: left bottom;
repeat: repeat-x;
size: auto 74px;
}
}
}
It breaks down on very wide screens, but really, if you're rocking a 6000px wide window, good luck to you sir.
The way GSAP animates is that it changes the translateX value via javascript during a requestAnimationFrame (I think) so it's nice and smooth, and the flicker problem doesn't exist in this context.
So i have been developing a loading screen website for a gaming community in a game called MVG and for some reason i have an issue with the site where after the first fade out of the image it flashes and it then does this for every image im unable to see what the problems is i would really like some help since otherwise the website is finished for me thanks in advance.
here is my first draft of the website https://mynamejack.hxane.com/MVGCWloadingscreen/
just click inspect elements and you should be able to view all the code but i will post it below anyway
<html>
<head>
<title>MVG loading screen</title>
<link href="assets/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="outer">
<div class="details">
<img alt="MVG" src="assets/images/logo/mvg-logo.png" style="opacity: 100%;">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 580px;
}
</style>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: arial;
overflow: hidden;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 60s ease-in-out infinite;
background-size: cover;
}
.outer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5)
}
.details {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#keyframes animate { /* When you want to change the image put the image name in replacethis.jpg and make sure its a jpg also make sure the % adds up to 100% otherwise it spazes out
If the slideshow brakes please let me know on discord MyNameJack#6969 or if you know css you can fix it */
0%, 100% {
background-image: url(images/slideshow/replacethis.jpg);
}
11% {
background-image: url(images/slideshow/replacethis.jpg);
}
22% {
background-image: url(images/slideshow/replacethis.jpg);
}
33% {
background-image: url(images/slideshow/replacethis.jpg);
}
44% {
background-image: url(images/slideshow/replacethis.jpg);
}
55% {
background-image: url(images/slideshow/replacethis.jpg);
}
66% {
background-image: url(images/slideshow/replacethis.jpg);
}
77% {
background-image: url(images/slideshow/replacethis.jpg);
}
88% {
background-image: url(images/slideshow/replacethis.jpg);
}
99% {
background-image: url(images/slideshow/replacethis.jpg);
}
100% {
background-image: url(images/slideshow/replacethis.jpg);
}
}
new to HTML and CSS. Could anyone teach me how to animate my picture from my current point to, another location? For example, moving from "top: 280px: left 600px;" to "top:180px; left 500px;"
Need someone to guide me along, thanks.
Below is my current code:
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
<img id="robot" src="https://img.favpng.com/20/7/18/clip-art-robot-free-content-image-vector-graphics-png-favpng-pJhfbKDrGy0yuQsKVTrjEu7br.jpg">
Here is a simplified example of an transition between to positions.
The key is to add the transition rule to your element (#robot), where you set the property you want to animate, the duration of the animation, easing function etc. See documentation for more examples.
Note that if you use the all keyword in the mentioned rule for shorthand convenience, it is adviced to specify which property you want to animate in the additional transition-property rule. This is for performance reasons.
In my example I'm using :hover to trigger the animation, but it might as well be when the page loads or when a certain class is added to your element by some JavaScript.
Hope it helps!
.box {
width: 500px;
height: 150px;
position: relative;
padding: 10px;
border: 5px solid green;
}
.cat {
position: absolute;
top: 50px;
left: 50px;
transition: all 1s ease-in;
transition-property: top, left;
}
.box:hover .cat {
top: 10px;
left: 300px;
}
<div class="box">
Hover me!
<img class="cat" src="https://placekitten.com/100/100" alt="A cat">
</div>
Yes, you can do it by simple using css.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
/* Standard syntax */
#keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
</style>
<body>
<img id="robot" src="https://www.w3schools.com/images/compatible_chrome.gif">
<?php ?>
</body>
</html>
I'm trying to create an animated picture which contains a lot of layers.
In order to have images with right proportions on different screens I use cover css property value(I've tried it for both object-fit for images and background-size for background images). That's why my images on wide screen are croped by the browser.
The problem is that my layers are transformed(mostly rotated and moved) during the animation so there are moments when it is seen the cropped image.
Please see my example below.
How it can be prevented? Or it there some other technique?
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 1000px;
height: 450px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
width: calc(100% + 20px);
}
.layer img {
height: 100%;
width: 100%;
object-fit: cover;
}
.gulls {
animation: gulls ease-in-out 13s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fsky.png?alt=media&token=25033588-d58c-4616-94e9-4974ec4157a4" alt="">
</div>
<div class="layer gulls">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fgulls5.png?alt=media" />
</div>
</div>
Currently I have this: https://jsfiddle.net/koljada/c08qdw1m/
first of all i have to say that your birds image is a lot bigger then the birds therself (many padding around) as i see the whole image is 2048/1934...
anyway, when you use
object fit:cover he crop;
the image for save the proportion. you can using
object-fit:scale-down;
for save the proportion by scale down the image until he come inside the parent space. i add a quick exemple about how it works down here:
hope it is what you search for..
Images can be cropped with a container div with overflow: hidden; position: relative, So you can position the image inside with position: absolute. The top and left css attribute of the image has to be set a negative value.
The image exact values can be found by using sine and cosine functions.
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 200px;
height: 100px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 20px);
}
.layer img {
height: 150%;
width: 150%;
}
.gulls {
animation: gulls ease-in-out 3s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer gulls">
<img src="http://via.placeholder.com/350x150/000000" />
</div>
</div>
You can use overflow: hidden; position: relative to crop your images after using container div, and using position: absolute at the images to place the image.
I'm just started to web programming, cuz many cooooool pages on awwwards.com - definitely caught my mind.
anyway, the first page what i aim for make is the pinterest (www.pinterest.com); slowly moving background with blur effect, floating modal and bottom fixed footer.
with some kinda O'Reilly books, the blur, modal and footer are no more problem. but i couldn't made the background even with them yet.
so, how can i make horizontally infinite flowing background with only CSS??? (without JS)
*conditions
the page is responsive, background-image's height should fit to screen
width follow the height's size, as original image's ratio.
and here's my code.
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
overflow: hidden;
}
#animatedBackground {
position: absolute;
height: 100%;
width: 100%;
background: url("http://placehold.it/1600x800");
background-repeat: repeat;
background-position: 0 0;
background-size: auto 100%;
border: 1px solid red;
animation: animatedBackground 5s linear infinite;
}
#keyframes animatedBackground {
from {
left: -50%;
}
to {
left: 50%;
}
}
</style>
</head>
<body>
<div id="animatedBackground">animatedBackground</div>
</body>
thx.
This should fit your slowly moving+infinite flowing+responsively fit to height background criteria.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#animatedBackground {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
background-repeat: repeat;
background-position: 0 0;
background-size: auto 100%;
/*adjust s value for speed*/
animation: animatedBackground 500s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0;
}
/*use negative width if you want it to flow right to left else and positive for left to right*/
to {
background-position: -10000px 0;
}
}
<div id="animatedBackground">
</div>
You can use background-attachment:scroll and use keyframes to perform the animation. See my approach here:
CSS
html,body
{
background:url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
background-repeat:repeat;
background-attachment: scroll;
position:absolute;
left:0;
top:0;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow
{
0% {top:0;}
100% {top:-200%;}
}
See here: jsfiddle
Try This.
<html>
<head>
<style type="text/css">
#animatedBackground {
position: absolute;
height: 100%;
width: 100%;
background: url("http://placehold.it/1600x800");
animation:5s scroll infinite linear;
border: 1px solid red;
}
#keyframes scroll{
100%{
background-position:-3000px 0px;
}
}
</style>
</head>
<body>
<div id="animatedBackground" style="text-align:center;">animatedBackground</div>
</body>
</html>