I don't know how to implement code for pulsating text with delay. I have a background image and over it, I have 2 different texts that appear at different times. 1st text is ok, but with the second one, I have a problem where I don't know how to make it pulsate with delayed appearance.
Code:
<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
/*https://dynamicwallpaper.club/landing-vids/1.png*/
height: 100%;
/* Center and scale */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*still to use for wellcome*/
#test {
margin-top: 25px;
font-size: 8rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#test2 {
margin-top: 150px;
font-size: 2rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-delay: 5s;
}/* This was missing*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<a href="skills.php">
<div class="bg tekst_slika">
<div id="test" class="centered">WELLCOME</div>
<div id="test2" class="centered">>> Press here to start <<</div>
</div>
</a>
</body>
</html>
Thank you all for your help in advance.
Here is a Fiddle that I think gives you the solution your after: https://jsfiddle.net/v1pm2y8f/3/
You had several syntax errors that needed to be fixed but the main differences where setting the opacity to 0 on startup and the use of animation-fill-mode: forwards;
to preserve the animation values once fadein had completed.
HTML
<div class="bg tekst_slika">
<div id="test" class="centered">WELCOME</div>
<div id="test2" class="centered">>> Press here to start <<</div>
</div>
CSS
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
/*https://dynamicwallpaper.club/landing-vids/1.png*/
height: 100%;
/* Center and scale */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
#test,
#test2 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*still to use for wellcome*/
#test {
margin-top: 25px;
font-size: 8rem;
opacity: 0;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-fill-mode: forwards;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#test2 {
margin-top: 150px;
font-size: 2rem;
opacity: 0;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Related
i am trying to animate 2 images:
1.from bottom left to top right.
other from bottom right to top left.
image 1 is moving while the other is not...
1 image is moving (the image from bottom left to top right), the other is still not moving
when i run the code of still image in saprate html filr it runs fine...
<style>
html
{
height:100%
}
body
{
height: 100%;
width:100%;
margin: 0;
background-repeat: no-repeat;
/* background-attachment: fixed;*/
background-image: radial-gradient(black,white);
}
div.move_to_right
{
width: auto;
height: auto;
position: absolute;
left:200px;
/*background-color: black;*/
/* background-image: url('/f16.png');*/
}
.move_to_right{
position: absolute;
left:200px;
}
#move_to_right
{
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count:infinite;
}
.ptag
{
color:white;
}
/* Safari 4.0 - 8.0 */
/* Standard syntax */
#keyframes example {
0%{
opacity: 0.5;
transform: translate(-200px,150px);
}
100%{
opacity: 1;
transform: translate(0px,0px);
}
div.move_to_left
{
width: auto;
height: auto;
position: absolute;
left:200px;
/*background-color: black;*/
/* background-image: url('/f16.png');*/
}
.move_to_left{
position: absolute;
right:200px;
}
#move_to_left
{
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count:infinite;
}
.ptag
{
color:white;
}
/* Safari 4.0 - 8.0 */
/* Standard syntax */
#keyframes example {
0%{
opacity: 0.5;
transform: translate(200px,150px);
}
100%{
opacity: 1;
transform: translate(0px,0px);
}
</style>
<html><body>
<div class="move_to_right">
<!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
<img id="move_to_right" src="f16.png" style="width:150px; height:150px;">
</div>
<div class="move_to_left">
<!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
<img id="move_to_left" src="f162.png" style="width:150px; height:150px;">
</div>
</body></html>
Some issues:
you didn't close the #keyframes opening curly brace
both your keyframes had the same name examples
html {
height: 100%
}
body {
height: 100%;
width: 100%;
margin: 0;
background-repeat: no-repeat;
background-image: radial-gradient(black, white);
}
div.move_to_right {
width: auto;
height: auto;
position: absolute;
left: 200px;
}
.move_to_right {
position: absolute;
left: 200px;
}
#move_to_right {
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: move_to_right;
-webkit-animation-duration: 10s;
animation-name: move_to_right;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes move_to_right {
0% {
opacity: 0.5;
transform: translate(-200px, 150px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
div.move_to_left {
width: auto;
height: auto;
position: absolute;
left: 200px;
}
.move_to_left {
position: absolute;
right: 200px;
}
#move_to_left {
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: move_to_left;
-webkit-animation-duration: 10s;
animation-name: move_to_left;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes move_to_left {
0% {
opacity: 0.5;
transform: translate(200px, 150px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
<div class="move_to_right">
<img id="move_to_right" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>
<div class="move_to_left">
<img id="move_to_left" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>
Building a quick website. Ideally, I want it to look similar to this:
http://imgur.com/a/NVVEv
Where, the hawaii background image is faded in at the start (and stays faded with an opacity of 0.2) & the rectangle in the middle fades in with the title and buttons but displays fully after the background image.
They'd be two seperate images (background #1 and rectangle #2) - how would I'd be best to do this with HTML/CSS? I have the background image working but the rectangle doesn't fade in and show. I'd like to have the buttons also link to pages (unsure how to do this)
Also having trouble finding the best way to resize my page to fit with the browser? I know it's alt tags but I can't remember the exact code needed.
I'm a noob and having trouble finding sufficient code to fulfil my request.
Cheers
CODE BELOW:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="background.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src = "bkgd.jpg" alt=""/>
<img src="backdrop.png" width="1920" height="1080" alt=""/>
</body>
</html>
CSS:
#charset "UTF-8";
/* CSS Document */
html, body {
height: 100%;
margin: 0;
padding: 0;
background-size: auto;
}
img {
opacity: 0.5;
background-repeat: no-repeat;
background-position: center;
margin-right: auto;
margin-left: auto;
background-attachment: fixed;
/*Fade In Animation*/
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
}
Try this. I have added sample images. The first image is set as body background and the fading image is set as a div background.
To place the fading image in the middle of the page, use
display: flex;
justify-content: center;
align-items: center;
To make the background image fit to screen width, use
width: 100vw;
height: 100vh;
/* Body Margin*/
body {
margin: 0;
}
/* Background Div*/
.background {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
/* Background Div: after*/
.background:after {
position: absolute;
width: 100vw;
height: 100vh;
content: '';
background-image: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
-webkit-animation: fadein 10s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 10s;
/* Firefox < 16 */
-ms-animation: fadein 10s;
/* Internet Explorer */
-o-animation: fadein 10s;
/* Opera < 12.1 */
animation: fadein 10s;
/*Fade In Animation*/
}
/* Fade in animations */
#keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
opacity: 0.2;
}
to {
opacity: 1;
}
/* Foregraound div */
.foreground {
margin-top: 20px;
position: relative;
width: 400px;
height: 100px;
background-color: #eaeaea;
padding: 20px;
border: 1px solid #555;
border-radius: 10px;
/*Fade In Animation*/
-webkit-animation: fadein 10s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 10s;
/* Firefox < 16 */
-ms-animation: fadein 10s;
/* Internet Explorer */
-o-animation: fadein 10s;
/* Opera < 12.1 */
animation: fadein 10s;
z-index: 1;
}
/* Name Tag */
.name-tag {
font-family: 'avenir-light';
text-align: center;
font-size: 24px;
text-transform: uppercase;
}
/* Socail Media List*/
.social-media-list {
list-style: none;
display: flex;
justify-content: space-around;
padding: 0;
}
/* Socail Media Item*/
.social-media-link img {
height: 50px;
width: 50px;
transition: all 0.5s ease;
}
.social-media-link img:hover {
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari */
transform: scale(1.2);
/* Standard syntax */
}
<section class="background">
<div class="foreground">
<div class="name-tag">lorem ipsum
</div>
<ul class="social-media-list">
<li class="social-media-link">
<img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png">
</li>
<li class="social-media-link">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png">
</li>
<li class="social-media-link">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png">
</li>
<li class="social-media-link">
<img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png">
</li>
</ul>
</div>
</section>
I have the following animation (fiddle):
<style style="text/css">
#AdvertBox {
height: 55px;
overflow: hidden;
position: relative;
background:black;
color: white;
border: 1.75px solid yellow;
font-size: 35px;
font-style: italic;
border-radius: 1px;
width:45vw;
}
.scroll-left p
{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 55px;
text-align: center;
/* Starting position */
transform:translateX(100%);
/* Apply animation to this element */
animation: scroll-left 10s linear infinite;
}
#keyframes scroll-left {
0% {
transform: translateX(100%);
}
25% {
opacity: 1;
transform: translateX(0%);
}
39% {
opacity: 0;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(0%);
}
}
.popIn p
{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 55px;
text-align: center;
/* Starting position */
transform:translateY(-100%);
/* Apply animation to this element */
animation: popIn 10s linear infinite;
}
#keyframes popIn {
/* Move it left */
0% {
transform: translateY(-100%);
}
/* Stop It */
30% {
transform: translateY(-100%);
}
/* fade out */
42% {
transform: translateX(0%);
}
/* fade out */
70% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div id="AdvertBox" >
<div class="scroll-left">
<p style="position: absolute; z-index: 1 ">
First Message
</p>
</div>
<div class="popIn">
<p style="position: absolute; z-index: 2 ">
Second, longer message to drop down
</p>
</div>
</div>
It should have one item slide in from the right, fade out, then one item drop down on it. It looks fine in chrome and firefox, and the first item that slides left works in ie, but the second item, dropping down, doesn't do anything.
i have updated your fiddle please have a look again, it works on IE 11, but you may need to tweak the animation.
basically instead of translateX and translateY, i used translate(x,y);
it worked on IE 11
ok i forked that old one and i created my own fiddle. so your popIn animation has been changed to the following.
#keyframes popIn {
/* Move it left */
0% {
transform: translate(0%,-100%);
}
/* fade out */
50% {
transform: translate(0%,0%);
}
/* fade out */
75% {
transform: translate(0%,0%);
}
100% {
transform: translate(-100%,0%);
}
}
https://jsfiddle.net/qvx4b311/
Two questions:
I found a pretty cool font animation on Codepen, but lost the link for it. I have been looking for it online for the past hour and with no luck!
But anyways, there is a issue with this code. Firefox won't give me the results I want. I have tried adding -moz- to most of the code, but the same background image appears like in the picture I have below.
Is this just not possible with Firefox?
My second question is: I wanted the font to change text with a kind of fade in effect when you hover over a button. I managed that but the animation on the hover text does not move. I am guessing this is because there are two animations attached to the div; is there a way around this?
How can I fix these issues? Thanks for your time.
.font{
position:fixed;
width: 100%;
left: 5%;
top: 5%;
}
.font:before{
position:absolute;
content:"TEST";
top: -10px;
font: 700 5em/1 "Orbitron", sans-serif;
letter-spacing: 0;
padding:.25em 0.325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba (255,255,255,.5);
background: url(https://media.24ways.org/2008/02/pattern-howto01.gif) repeat-y;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation: aitf 10s linear infinite;
-moz-transform: translate3d(0,0,0);
-moz-backface-visibility: hidden;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 10s linear infinite;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
#keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#-moz-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.icon {
position: relative;
width: 50px;
height: 50px;
top: 150px;
border-radius: 50%;
border: solid 5px black;
cursor: pointer;
font-size: 30px;
text-align: center;
vertical-align: middle;
line-height: 50px;
margin: 0 0.8%;
background: #730A0C;
}
.icon:hover ~ .font:before{
content:"TEST2";
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
background-position: center;
}
/*Fade Inn Animation*/
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*Fade Inn Animation*/
<div class="icon"> </div>
<div class="font"> </div>
The text-fill-color property is not available in Firefox until Firefox 48 comes out in August of 2016. The only browers that support this property right now are Chrome, Safari, and Opera using the -webkit- prefix.
The fadeout animation is not working. I think you can't put two Ids on one div.
How do you get the fadeout to work?
here is the jsFiddle
html
appear
<div id="pop" id="pop_close">
disappear
</div>
CSS
body {
padding: 10em;
}
#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
}
#pop:target {
opacity: 1;
z-index: 1;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}
#pop_close:target {
opacity: 0;
z-index: -1;
-webkit-animation: fadeOut 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeOut 1s; /* Firefox < 16 */
-ms-animation: fadeOut 1s; /* Internet Explorer */
-o-animation: fadeOut 1s; /* Opera < 12.1 */
animation: fadeOut 1s;
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Firefox < 16 */
#-moz-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Internet Explorer */
#-ms-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
here is a working fiddle http://jsfiddle.net/oogley_boogley/wqju9jh6/19/
the css:
#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s; /* key style here, look into -webkit and -moz etc as well */
}
Exactly, you cannot have multiple ID on the same page,
therefore you need to modify the ID to make :target a specific popup:
div[id^=popUp] // means: target DIV element who's ID "starts with".
than in the HTML you simply make the ID unique by adding a number.
div[id^=popUp]{
height: 5em;
width: 5em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s;
}
div[id^=popUp]:target {
opacity: 1;
z-index: 1;
}
appear
<div id="popUp1">
disappear
</div>
appear
<div id="popUp2">
disappear
</div>