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);
}
}
Related
Hey i have a problem with my html page
I use recaptcha on my website but after recaptcha load i have a problem with backround
Before recaptcha :
After recaptcha :
I don t know why but after captcha load the background don t take all page
For my background i use
CSS
* {
margin: 0;
padding: 0;
}
#dark-bg {
width: 50%;
height: 100vh;
background: linear-gradient(90deg, rgba(51,0,102,1) 15%, rgba(67,26,156,1) 90%);
float: left;
}
#wave {
position: absolute;
content: "";
bottom: 0;
width: 50.06%;
height: 100vh;
transform: rotate(180deg);
background: url(https://i.imgur.com/Ds3Raj2.png);
background-size: contain;
background-repeat: no-repeat;
}
body {
background-image: linear-gradient(90deg, rgba(51,0,102,1) 54%, rgba(67,26,156,1) 90%) !important;
}
And html
<div id="dark-bg"></div>
<div id='wave'>
<p></p>
</div>
How i can resolve that?
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.
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>
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>
//Here is my HTML
What i need here is that on complete load of the progress bar it should redirect to another page.
any ways for that?!!!!
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="container">
<h2 class="text-center">Loading</h2>
<div class="progress">
<div class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
help me out!!
And i don't have any java script here.
i would be more happy if i can do it without java script.
so please help me out with it.
UPDATE
found that java script animation end may help out.
Simply use this trick highlighted by David Walsh. He did it for transitionend, but we can swap it out for animationend instead.
His trick is to loop through the list of all vendor-prefixed and native animationend events, and check if the browser supports any of them. He then attaches the recognized animationend handler to the element of interest.
When the animationend event is fired, we simply redirect to the URL of interest using window.location.replace(), as mentioned before.
I have modified it so it would work for your scenario:
$(function() {
// Check with animationend event is supported by browser
function whichAnimationEvent(){
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation':'animationend',
'OAnimation':'oAnimationEnd',
'MozAnimation':'animationend',
'WebkitAnimation':'webkitAnimationEnd'
}
for(t in animations){
if( el.style[t] !== undefined ){
return animations[t];
}
}
}
// Listen for animation
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
// Alert (to demonstrate the code works)
alert('Animation complete! This is the callback, no library needed!');
// Redirect script
window.location.replace('/path/to/url');
});
});
See fiddle here: http://jsfiddle.net/teddyrised/9w7pntmt/3/
ok., i found the solution completely.
if anyone have any issue with this please report.
function whichAnimationEvent() {
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation': 'animationend',
'OAnimation': 'oAnimationEnd',
'MozAnimation': 'animationend',
'WebkitAnimation': 'webkitAnimationEnd'
};
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
function oload() {
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
window.location.replace("http://alokraj68.in");
});
}
// Listen for animation
html,
body {
height: 100%;
}
body {
background-color: #f5f7f9;
color: #6c6c6c;
font: 300 1em/1.5em"Helvetica Neue", sans-serif;
margin: 0;
position: relative;
}
h1 {
font-size: 2.25em;
font-weight: 100;
line-height: 1.2em;
margin: 0 0 1.5em;
}
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<html>
<head>
<meta charset="UTF-8">
<title>alokraj68.in--Loading!!</title>
<link rel="stylesheet" href="css/loading.css">
<script src="js/script.js"></script>
</head>
<body onload="oload()">
<div class="container">
<h1 class="text-center">alokraj68.in</h1>
<h2 class="text-center">Loading</h2>
<div class="progress">
<div id="pb" class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
</body>
</html>
Try this coding.
if anyone finds any issues, please tell me.