This may seem like such a noob question, but I'm quite new with HTML and CSS.
Anyways, my problem is that on my computer, the website I'm working on looks totally fine zoomed in at 100%, normal. When I zoom out, the image on my "loading screen" moves around the screen and same when I zoom in.
Also, on other computers, the image is to the left of the text "Loading..." and some computers have it to the right of the text. Also on mobile, the background and text are way at the top of the screen while the image is in the middle of the screen on a white background.
The website page can be seen here at http://santatracking.net/loading.html
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<META HTTP-EQUIV="Refresh" CONTENT="1.5;URL=homevillage.html">-->
<script src="script.js"></script>
<link rel="stylesheet" href="loadingstyle.css">
<link rel="preload" href="styles.css">
<link rel="icon" type="favicon/png" href="http://santatracking.net/wp-content/uploads/2016/01/cropped-Team-yantsu-logo-transparent.png">
<title>SantaTrackingLive</title>
</head>
<body>
<div id="wrapper">
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
<div id="loading">
<img class="image" src="loadingimg.png" alt="" width="200" height="200">
</div>
</div>
</body>
</html>
Here is my CSS code
#font-face {
font-family: mo;
src: url(museo.ttf);
}
body {
font-family: mo;
background-image: url("bg.png");background-repeat: repeat;
background-size: cover;
}
.text {
position: absolute;
width: 300px;
height: 70px;
font-size: 30px;
margin: 426px 0 0 460px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
#loading {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -90px 0 0 -100px;
-webkit-animation:spin 1.25s linear infinite;
-moz-animation:spin 1.25s linear infinite;
animation:spin 1.25s linear infinite;
outline: 1px solid transparent; -->
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#wrapper {
height: auto;
width: 1200px;
margin: 0 auto;
}
#keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.text span {
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
If any one could help me out on this, that'd be great. Sorry again for the possible noob sounding question haha
Thanks again
You need to use JavaScript for that because your browser does not know the resolution of your screen, for eg your computer is 1080 during full size but when you resize to smaller width and moves to next line. You have to use window.width to get width of your window and use DOM to manipulate HTML
Related
i have a html page with gradient transition background,
the background colors change automatically after 5 seconds and hense creating a animation. I am using css & key frames for this.
I am converting this html page to a AMP page.
This transition works in plain html pages, but shows the first color only when started in am.
how can i get it working?
working Code-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<body style="background-color:#2c3333;"></body>
</body>
</html>
Style.css-
.user {
display: inline-block;
width: 170px;
height: 170px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
body {
font-size: 1em;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
}
.head-div {
text-align: center;
color: #000000;
/* padding:0%;
padding-top:7%;
padding-bottom:300%; */
}
img {
pointer-events: none;
display: inline-block;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
object-fit: cover;
}
.link-div {
padding: 10%;
padding-top: 1%;
padding-bottom: 1%;
color: #2c3333;
}
.alink {
text-align: center;
margin-top: 1px;
padding: 20px 0;
max-width: 590px;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
color: #2c3333;
text-decoration: none;
}
.alink:hover {
color: #ffffff;
background-color: #54bab9;
border: 2px solid;
border-color: #ffffff;
}
.copyright {
text-align: center;
color: #ffffff;
}
.getlink {
font-size: 17px;
text-align: center;
color: #ffffff;
}
.footer {
position: fixed;
bottom: 25px;
left: 0;
right: 0;
text-align: center;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
SO after some Research and experimenting with AMP, finally i came with an answer to my own problem,
Posting this here so that if any one gets the same problem, Gets a solution.
So the problem was that i was having a AMP webpage and i wanted to get the background Gradient animation working like it is working in the index.html file,
i was not, but i have solution.
it was no working because we were trying to manipulate body of html using css,. which works in html, but not in css.
The solution is to create a div in body tag and some changes in amp-style.
.divanim is the div here
Here is the working AMP page-
index.amp.html-
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashutosh_7i</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.divanim {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100%;
}
#keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div class="divanim">
//body with gradient
</div>
</body>
</html>
amp animation on their website is very confusing , alteast for me, but i got the solution anyways.😉
I'm a novice and in the process of creating a site in HTML and CSS. My problem is that I put an animation scrolling an image to infinity behind a transparent text (not completely transparent) but I would also like to have the possibility of making this text rainbow. These two animations work perfectly independently but once I put them in the same code, the background image remains static, the text is no longer centered but on the left, and the rainbow text works well. So I would like some help to get everything working properly at the same time.
The HTML :
body {
margin: 0;
font-family: arial;
padding: 0;
background-color: black;
}
.text-container h1{
font-size: 120px;
color: rgba(255,255,255,.1);
background-image: url("Images/istockphoto-922764830-612x612.jpg");
background-size: 300px;
background-repeat: repeat-x;
-webkit-background-clip: text;
animation: animate1 20s linear infinite;
animation: animate2 6s linear 0s infinite;
}
#keyframes animate1 {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes animate2 {
from {
color: rgba(102,102,255,.1);
}
10% {
color: rgba(0,153,255,.1);
}
50% {
color: rgba(0,255,0,.1);
}
75% {
color: rgba(255,51,153,.1);
}
100% {
color: rgba(102,102,255,.1);
}
.text-container {
margin-top: 0%;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="text-container">
<h1>test</h1>
</div>
</body>
</html>
Yes, it's impossible, you are overriding the animation property.
You can try one of two things:
Use the color animation on the text-container
Combine the animations into one
Like Konrad says, you could combine animations, I made this snippet with your code:
.text-container h1{
font-size: 120px;
color: rgba(255,255,255,.1);
background-image: url("http://placekitten.com/400/400");
background-size: 300px;
background-repeat: repeat-x;
-webkit-background-clip: text;
animation: animate1 20s linear infinite;
}
#keyframes animate1{
from {
color: rgba(102,102,255,.1);
background-position: 0 0;
}
10% {
color: rgba(0,153,255,.1);
}
25%{
background-position: 100% 0;
}
50% {
color: rgba(0,255,0,.1);
background-position: 0 0;
}
75% {
color: rgba(255,51,153,.1);
background-position: 100% 0;
}
100% {
color: rgba(102,102,255,.1);
background-position: 0 0;
}
}
.text-container {
margin-top: 0%;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="text-container">
<h1>test</h1>
</div>
</body>
</html>
Hello everyone.
I have started making a small app in Electron, and want to make a loading screen.
But every time I add the animation to the container div, it gives its background color weird color banding.
Here's an image of it.
Basically the top is a color I do not even use anywhere, while the bottom is the actual color I want.
Here's an image with the animation disabled.
What I tried:
Ran the website in Edge, did produce the color banding.
Ran the website in the snippet, did not produce the color banding.
Tried setting the background color in the animation itself, did not fix the problem.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&family=Roboto&display=swap');
:root {
--main1: #282b30;
--main2: #1e2124;
--main3: #16181a;
--titleFont: 'Nunito', sans-serif;
--textFont: 'Roboto', sans-serif;
--textColor: #ffffff;
}
* {
font-family: var(--textFont);
color: white;
}
html {
height: 100%;
}
body {
overflow: hidden;
}
.transitionContainer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--main2);
color: var(--textColor);
font-size: 500%;
animation-name: hideTransition;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-delay: 1.25s;
animation-fill-mode: both;
opacity: 1;
}
#keyframes hideTransition {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
}
#keyframes showTransition {
from {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
to {
transform: scale(1);
opacity: 1;
z-index: 0;
}
}
.logoText {
position: absolute;
top: 50%;
left: 50%;
margin-left: -49.258px;
margin-top: -96px;
}
.loadingBarBack {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25px;
background-color: var(--main3);
}
.loadingBarFront {
width: 0%;
height: 100%;
background-color: limegreen;
animation: loading 1s;
animation-fill-mode: forwards;
}
#keyframes loading {
from {
width: 0%;
}
to {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="./index.js" defer></script>
</head>
<body>
<div class="transitionContainer">
<h1 class="logoText">R</h1>
<div class="loadingBarBack">
<div class="loadingBarFront"></div>
</div>
</div>
</body>
</html>
Thanks for any help in advance!
Figured it out!
Apparently animation-fill-mode: both; caused some of the div to go transparent before the animation even played.
Setting it to animation-fill-mode: forwards; fixed it.
I was trying to make an animation as an exercise to learn. When I hover over the circle, I want to apply an animation to it and also for the text in the .hide element to appear. But when I hover the circle and then move the mouse over the text, the animations stop.
Is there a way to keep both animation going even if I hover the text in the .hide element? I've tried to create an :hover subclass for the .hide class with animations, tried to add the animation to the .hide class, and tried both together, but I can't figure it out.
Also, that little black line that pops up at the beginning of the hover is annoying, if anyone know how to get rid of it.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
There are a few changes you need, I've explained each one after the example, but in summary:
The main reason you are having issues is because you are acting on the hover over the circle-icon only - this means when you move the mouse off it (even if it is to the associated text) the hover effect ends. Therefore you need to act on hovering over the whole link, not just the circle.
Working Example:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
Changes to make it work:
1. Add a class to the link so we can apply CSS to it and not all a elements in your container, e.g.
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
2. Add the animation to the circle when the whole link is hovered. We do this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, e.g.:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
3. Display the hide class when the whole link is hovered - this means that even if you move the mouse off the circle and onto the text, it is still part of the same link so the effect does not end. So we change the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
4. Hide the blue line on hover - The blue line you see is the default styling for links in the browser. We can turn this
off using text-decoration:none;, e.g.
a.icontextlink { text-decoration:none;}
5. Fix the rotation animation FYI, you don't mention it in your question but the spin animation is not working. This is because you are using e.g. rotate: 0deg;. The correct way is transform: rotate(0deg);:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Ok so:
For the "little black line" - it's the text-decorator property of the a tag.
For the animation - the problem was that when you don't hover on the home button (since you move the cursor or whatsoever), the :hover does not apply and you back to display:none, but then the button moves to the cursor and you again hovering it (and so on till the end of times). So I just set that when you hover on the text, the display is inline-block.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.hide:hover {
display: inline-block;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
background-color: gray;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover+.hide {
display: inline-block;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 80px;
font-size: 100%;
}
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
To remove the black line I did:
*{
text-decoration: none;
}
at the top of the css document
also i made the text showing up animation smoother:
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
25% {
font-size: 0%;
}
27% {
font-size: 20%;
}
100% {
width: 100px;
font-size: 100%;
}
}
I want to infinite Scroll Background image animate. How can I set it just go upwards continuously, not come back down? still, it gives a jerk.
How it is possible? Please help anyone know it.
I have a link:
http://herinshah.com/wp/fortiflex/5-2/
CSS:
.et_pb_section.landing-page .et_pb_column_3_5 {
background-color: #f6eb00;
margin-right: 1%;
padding: 0 10px;
height: 100vh;
background-image: url(images/ragazzi-logo.png);
background-position: 0 0;
background-size: cover;
-webkit-animation: upward 15s linear infinite;
animation: upward 15s linear infinite;
border-right: 4px solid #000;
display: block;
background-repeat: repeat-y;
}
#-webkit-keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
#keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
You need to wrap a div inside a div. Here is the working fiddle for the same
HTML
<div class="main">
<div class="holder"></div>
</div>
CSS
*{
margin:0;
padding:0
}
.main {
height: 100vh;
overflow: hidden;
}
.holder {
height: 200vh;
-webkit-animation: upwards 2.5s linear infinite;
animation: upward 2.5s linear infinite;
background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png) center yellow;
background-size: 100% 50%;
}
#-webkit-keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
I felt so compelled to answer this because I've done something similar :before (pun intended) and your skipping animation was giving me cancer.
You're gonna need to mess around with the pseudo :after element and get the height right. This should get you started.
Also your image isn't cropped perfectly right, so fix that and you'll be good to go.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body onload="onloaded()">
<div class="foo_section">
<div class="foo_container">
<img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
</div>
</div>
</body>
</html>
.foo_section {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
}
.foo_container {
width: 100%;
position: relative;
animation: infiniteScrollBg 10s infinite linear;
}
.foo_container:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #f6eb00;
background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
background-size: 100% 20%;
}
.foo_image {
width: 100%;
}
#-webkit-keyframes infiniteScrollBg {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(-200%);
}
}
Codepen
I see you're using Elegant Themes too. <3 Divi builder
I suggest you to have two div tags with the same background. Then, animate the same div and play with positioning of the divs and animate to make it look continuously scrolling up.
.container{
width:600px;
height:400px;
background-color:yellow;
margin:0 auto;
position:relative;
overflow:hidden;
}
.bg{
width:100%;
height:400px;
background-repeat:no-repeat;
background-size:contain;
position:absolute;
bottom:0;
}
.bg.bg1{
transform: translate(0,0);
animation: upward 3s linear infinite;
}
.bg.bg2{
transform: translate(0,100%);
animation: upward2 3s linear infinite;
}
#keyframes upward {
to {
transform: translate(0,-100%);
}
from {
transform: translate(0, 0);
}
}
#keyframes upward2 {
to {
transform: translate(0,0);
}
from {
transform: translate(0,100%);
}
}
Here's how I would do it. my codepen.