I have three bars set to slide in from the right and settle at the left. The animation itself is fine. The problem is that before the animation begins the three bars are positioned in the middle of the screen before disappearing and then commencing the animation.
When the page is refreshed I do not want these bars to be visible until they begin their slide-in. How can I do this?
<body>
<header>
<h1>xxxx xxxxxxx</h1>
<nav>
<ul>
<li>About Me</li>
<li id="contact_nav">Contact</li>
<li id="gallery_nav">Gallery</li>
</ul>
</nav>
<div class="container">
<div id="bar1" class="bar1"><p>Bespoke furniture ...</p></div><br>
<div id="bar2" class="bar2"><p>... and interesting items ...</p></div><br>
<div id="bar3" class="bar3"><p>... brought to life!</p></div><br>
</div>
</header>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#font-face {
font-family: 'Avenida Std';
src: url('AvenidaStd.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-image: linear-gradient(to right, #24243E, #302B63, #0F0C29);
}
h1, h2, h3, h4 {
font-family: 'Avenida Std';
}
header h1 {
font-size: 12vw;
color: grey;
position: absolute;
padding-left: 20px;
padding-top: 55px;
text-shadow: 0.10em 0.08em 5px black;
transform: rotate(-10deg);
}
nav {
position: relative;
}
nav ul {
align-content: right;
}
nav ul li {
font-family: 'Avenida Std';
font-size: 5rem;
margin-left: 85%;
padding-top: 20px;
list-style-type: none;
justify-content: right;
}
nav ul li a {
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: yellow;
text-shadow: 0 0 40px yellow;
}
nav #contact_nav {
padding-top: 0.5rem;
}
nav #gallery_nav {
padding-top: 0.5rem;
padding-bottom: 0;
z-index: 100;
}
#bar1 {
width: 50vw;
height: 3rem;
background: black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#bar2 {
width: 50vw;
height: 3rem;
background: black;
}
#bar3 {
width: 50vw;
height: 3rem;
background: black;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.container {
position: relative;
}
.container p {
color: white;
font-family: sans-serif;
font-size: 2.5rem;
position: relative;
padding-left: 5px;
}
/* Bars Animation CSS */
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
}
#keyframes move1 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 80%;
}
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
}
#keyframes move2 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 65%;
}
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
z-index: 999;
}
#keyframes move3 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 52%;
}
}
Just add default value for transform like this:
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
transform: translateX(100vw); // added
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
transform: translateX(100vw); // added
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
transform: translateX(100vw); //added
z-index: 999;
}
Related
I am trying to make it so when I open the page, test will show up as red and the testing will show up as white. There is a delay that I am using for when the page opens that I want to keep (if you run the program you will see).
Css
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
HTML
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
Do you mean like this? See changes under /* added CSS */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: grey;
}
html {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
/* added CSS */
.red {
animation: text_reveal_red ease forwards;
animation-delay: 1s;
animation-iteration-count: 1;
}
#keyframes text_reveal_red {
100% {
color: crimson;
}
}
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
the keyframes i created in my scss should be animating my height to make it a 2s animation but it has not done that instead the height is just transforming instantly but the width in the same keyframe is being animated.
#import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght#500&family=Roboto&display=swap");
* {
font-family: "Maven Pro", sans-serif;
color: white;
animation-delay: 1s;
}
body {
width: 100%;
height: 100vh;
margin: 0%;
background-color: green;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
position: absolute;
bottom: 5%;
}
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s 2s;
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
.swipe .side {
width: 180px;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
animation-name: imageSize;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}
.swipe .side img {
width: 80%;
}
.swipe .center {
position: relative;
animation-name: centerExpand;
animation-fill-mode: forwards;
animation-duration: 0.3s;
width: 74px;
height: 100%;
background-color: #38003c;
display: flex;
justify-content: center;
align-items: center;
}
.swipe .center .popup.firstHalf {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 135px;
height: 35px;
background-color: white;
color: #38003c;
text-align: center;
font-family: "roboto";
font-size: 22px;
line-height: 35px;
font-weight: 500;
animation-name: firstHalf;
animation-delay: 2s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 110px;
height: 76px;
background-color: #38003c;
color: #38003c;
display: flex;
align-items: center;
justify-content: center;
animation-name: firstHalf;
animation-delay: 4.8s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports img {
width: 61px;
}
.swipe .center .textContainer {
font-weight: 400;
opacity: 0;
margin: 0% 2% 0% 2%;
height: 100%;
width: 100%;
}
.swipe .center .textContainer.left {
text-align: right;
animation-delay: 1.15s;
animation-name: leftText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center .textContainer.right {
animation-name: rightText;
animation-delay: 1.15s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center img {
width: 44px;
}
#keyframes swipeWidthHeight {
0% {
height: 179px;
width: 434px;
}
100% {
height: 77px;
width: 1064px;
}
}
#keyframes centerExpand {
90% {
justify-content: space-between;
}
100% {
width: 1020px;
justify-content: space-between;
}
}
#keyframes rightText {
0% {
opacity: 1;
}
100% {
padding-left: 10%;
opacity: 1;
}
}
#keyframes leftText {
0% {
opacity: 1;
}
100% {
padding-right: 10%;
opacity: 1;
}
}
#keyframes imageSize {
100% {
height: 77px;
width: 77px;
}
}
#keyframes firstHalf {
0% {
opacity: 1;
bottom: 0%;
z-index: -1;
}
10% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
90% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
99% {
z-index: -1;
opacity: 1;
bottom: 0%;
}
100% {
z-index: -1;
opacity: 0;
bottom: 0%;
}
}
#keyframes close {
100% {
width: 1064px;
height: 77px;
bottom: -20%;
}
}
<body>
<div class="swipe">
<div class="left side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
<div class="center">
<div class="firstHalf popup">First Half</div>
<div class="eaSports popup">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218003415080/ea-sports-logo.png" alt="">
</div>
<div class="textContainer left">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218208907274/premier-league-icon.png" alt="">
<div class="textContainer right">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
</div>
<div class="right side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
</div>
</body>
In the codepen the class "swipe" and key frame of 'swipeWidthHeight'is the element thats is having issues with the height not animating.
here is a codepen below if the whole project for a better understanding
https://codepen.io/charlieschuyler/pen/zYBZzZv
Comma Missing:
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s, 2s; /* missing comma */
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:
HTML:
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
CSS:
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
position: relative; z-index:1;
transition: all 250ms ease;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
margin-right: 0;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
0% { margin-top: 0; }
15% { margin-top: 0; transform: rotateX(-50deg); }
30% { margin-top: 0; transform: rotateX(50deg); }
45% { margin-top: 0; transform: rotateX(-30deg); }
60% { margin-top: 0; transform: rotateX(30deg); }
75% { margin-top: 0; transform: rotateX(-30deg); }
100% { margin-top: 0; transform: rotateX(0deg);}
}
https://jsfiddle.net/9dwk8vzg/
Original link:http://dabblet.com/gist/5559193
But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
width: 100%;
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
width: 100%;
background: #00aced;
padding: 15px;
display: block;
position:absolute;
color: #fff;
text-decoration: none;
z-index:1;
transition: all 250ms ease;
right: -30px;
top: 0;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
right: 100%;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
15% { width: 95%; }
30% { width: 105%; }
45% { width: 97%; }
60% { width: 103%; }
75% { width: 97%; }
100% { width: 100%; }
}
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
</div>
I am trying to make a floating nav bar which would have approximately 10 button. On some screens they fit in all well on some they go out. I am trying to figure out if their is a way to do is other than media queries.
body{
font-family: 'Roboto';
text-align: center;
background: #f1f1f1;
}
h3{
color: #555;
}
#presentation{
width: 480px;
height: 120px;
padding: 20px;
margin: auto;
background: #FFF;
margin-top: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
transition: all 0.3s;
border-radius: 3px;
}
#presentation:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transition: all 0.3s;
transform: translateZ(10px);
}
#floating-button{
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus{
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
animation: plus-out 0.3s;
transition: all 0.3s;
}
#container-floating{
position: fixed;
width: 70px;
height: 70px;
bottom: 30px;
right: 30px;
z-index: 50px;
}
#container-floating:hover{
height: 400px;
width: 90px;
padding: 30px;
}
#container-floating:hover .plus{
animation: plus-in 0.15s linear;
animation-fill-mode: forwards;
}
.edit{
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
display: block;
right: 0;
padding: 0;
opacity: 0;
margin: auto;
line-height: 65px;
transform: rotateZ(-70deg);
transition: all 0.3s;
animation: edit-out 0.3s;
}
#container-floating:hover .edit{
animation: edit-in 0.2s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
#keyframes edit-in{
from {opacity: 0; transform: rotateZ(-70deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
#keyframes edit-out{
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0; transform: rotateZ(-70deg);}
}
#keyframes plus-in{
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0; transform: rotateZ(180deg);}
}
#keyframes plus-out{
from {opacity: 0; transform: rotateZ(180deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
.nds{
width: 40px;
height: 40px;
border-radius: 50%;
position: fixed;
z-index: 300;
transform: scale(0);
cursor: pointer;
}
.nd1{
background: #d3a411;
right: 40px;
bottom: 120px;
animation-delay: 0.2s;
animation: bounce-out-nds 0.3s linear;
animation-fill-mode: forwards;
}
.nd3{
background: #3c80f6;
right: 40px;
bottom: 180px;
animation-delay: 0.15s;
animation: bounce-out-nds 0.15s linear;
animation-fill-mode: forwards;
}
.nd4{
background: #ba68c8;
right: 40px;
bottom: 240px;
animation-delay: 0.1s;
animation: bounce-out-nds 0.1s linear;
animation-fill-mode: forwards;
}
.nd5{
background-image: url('https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27');
background-size: 100%;
right: 40px;
bottom: 300px;
animation-delay: 0.08s;
animation: bounce-out-nds 0.1s linear;
animation-fill-mode: forwards;
}
#keyframes bounce-nds{
from {opacity: 0;}
to {opacity: 1; transform: scale(1);}
}
#keyframes bounce-out-nds{
from {opacity: 1; transform: scale(1);}
to {opacity: 0; transform: scale(0);}
}
#container-floating:hover .nds{
animation: bounce-nds 0.1s linear;
animation-fill-mode: forwards;
}
#container-floating:hover .nd3{
animation-delay: 0.08s;
}
#container-floating:hover .nd4{
animation-delay: 0.15s;
}
#container-floating:hover .nd5{
animation-delay: 0.2s;
}
.letter{
font-size: 23px;
font-family: 'Roboto';
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0;
top: 0;
bottom: 0;
text-align: center;
line-height: 40px;
}
.reminder{
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
line-height: 40px;
}
.profile{
border-radius: 50%;
width: 40px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 20px;
}
<div id="container-floating">
<div class="nd4 nds" data-toggle="tooltip" data-placement="left" data-original-title="contract#gmail.com"><img class="reminder">
<p class="letter">C</p>
</div>
<div class="nd3 nds" data-toggle="tooltip" data-placement="left" data-original-title="Reminder"><img class="reminder" src="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_reminders_speeddial_white_24dp.png" /></div>
<div class="nd1 nds" data-toggle="tooltip" data-placement="left" data-original-title="Edoardo#live.it"><img class="reminder">
<p class="letter">E</p>
</div>
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create" onclick="newmail()">
<p class="plus">+</p>
<img class="edit" src="http://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/bt_compose2_1x.png">
</div>
</div>
Use #media screen for more information
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have some HTML and CSS code for a webpage I am building. I finally figured out how to do the slideshow, but now I have this annoying white bar at the top of my home page (above the slideshow) that I can't get rid of.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>R. J. Farah Engineering</title>
<link rel="stylesheet" type="text/css" href="rjfe.css">
</head>
<body>
<div class="box fade-in logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
<div class="menu_box fade-in menu">
<div id="menu">
<ul>
<li>home</li>
<li>about</li>
<li>work</li>
<li>contact us</li>
</ul>
</div>
</div>
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3></h3>
</div>
</li>
</body>
</html>
And my CSS:
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.box {
width: 270px;
height: 128px;
position: absolute; bottom: 0px; right: 0px;
margin: 10px;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.logo {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box {
width: 270/2px;
height: 128/4px;
position: absolute; top: 0px; left: 0px;
margin: 10px;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.menu {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
/*Menus*/
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style: none;
z-index: 0;
}
#menu li
{
list-style-type: none;
z-index: 0;
}
#menu a
{
display: block;
width: 5em;
color: black;
background-color: transparent;
text-decoration: none;
text-align: center;
z-index: 0;
}
#menu a:hover
{
background-color: #6666AA;
z-index: 0;
}
#menu li
{
list-style-type: none;
float: left;
margin-right: 0.5em;
z-index: 0;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h4 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 100px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../rjfe3/img1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../rjfe3/img2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../rjfe3/img3.jpg);
animation-delay: 12s;
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
figure#slideshow {
width: 80%;
margin: 0 auto;
position: relative;
}
figure#slideshow img {
position: absolute;
left: 0; top: 0;
width: 100%;
height: auto;
opacity: 0;
}
figure#slideshow img:first-child {
position: relative;
}
I have tried adjusting the position of the slideshow on the page because frankly that is all I can think to do...I have no idea what might be causing this.
This still isn't up, but here is a screenshot of the white bar in action!:
https://plus.google.com/u/0/+JosephFarahthefinalfrontier/posts/Vub3imwq1oq?pid=6193420991011414498&oid=105312277509825242261
Sorry it looks horrid--I don't have actual pictures yet, just filler, no real logo.
Thanks in advance!!
Your ul containing the slideshow still has the default top margin. Removing it should solve it.
.cb-slideshow
margin-top:0;
}
All you need to do is remove the comma when listing more than one class in css and thats it.
This is where your problem lies change this
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
to:
.cb-slideshow .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
your problem is solved.
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.box {
width: 270px;
height: 128px;
position: absolute; bottom: 0px; right: 0px;
float: top;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.logo {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box {
width: 270/2px;
height: 128/4px;
position: absolute; top: 0px; left: 0px;
float: left;
float: top;
border: 1px solid transparent;
background: transparent;
}
.fade-in.menu {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box .fade-in .menu #menu ul li{
background-color: transparent;
}
/*Menus*/
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style: none;
z-index: 0;
background: transparent;
}
#menu li
{
list-style-type: none;
z-index: 0;
}
#menu a
{
display: block;
width: 5em;
color: black;
text-decoration: none;
text-align: center;
z-index: 0;
}
#menu a:hover
{
background-color: #6666AA;
z-index: 0;
}
#menu li
{
list-style-type: none;
float: left;
margin-right: 0.5em;
z-index: 0;
}
.cb-slideshow .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/annoying_white_bar.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h4 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 100px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(./annoying_white_bar.png)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 12s;
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
figure#slideshow {
width: 80%;
margin: 0 auto;
position: relative;
}
figure#slideshow img {
position: absolute;
left: 0; top: 0;
width: 100%;
height: auto;
opacity: 0;
}
figure#slideshow img:first-child {
position: relative;
}
You have
<div class="box fade-in logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
But it should look like
<div class="box-fade-in-logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
The class and id should always be one work or multiple words with dashes or underscores. Try this. Hopefully it works