I've been working on a website, and we wanted to an animated background. But the problem with this is that my Navbar disappears after the second picture is displayed.
This only happens on iOS devices, because my partner tried it with android and it worked how it is supposed to.
(tried it on both safari and google chrome.)
With header:
header disappears:
homepage:
<body>
<div class="bg-fade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
<div id="main-container">
<!-- header -->
<?php include('inc/header.php'); ?>
CSS BACKGROUND:
.bg-fade > figure {
top: 0px;
left: 0px;
color: transparent;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
position: fixed;
animation: imageAnimation 36s linear infinite 0s;
background-size: cover;
backface-visibility: hidden;
}
.bg-fade > figure:nth-child(1) {
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_01.jpg');
}
.bg-fade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_02.jpg');
}
.bg-fade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_03.jpg');
}
.bg-fade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_04.jpg');
}
.bg-fade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_05.jpg');
}
.bg-fade > figure:nth-child(6) {
animation-delay: 30s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_06.jpg');
}
/*keyframes .bg-fade*/
#-webkit-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;
}
}
#-moz-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;
}
}
#-o-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 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;
}
}
CSS NAV:
/*navigation*/
nav ul {
margin: 37px 0px 0px 0px;
padding: 0px;
list-style: none;
text-align: center;
z-index: 100;
opacity: 1;
}
nav li.left {
float: left;
color: #ffffff;
width: 125px;
margin: 0px -45px 0px 50px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.left:hover {
background-color: #ff3333;
}
nav li.left.active {
background-color: #E6332A;
}
nav li.left.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #E6332A;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 125px;
margin: 0px 0px 0px 150px;
display: inline-block;
padding: 15px 10px;
font-size: 14px;
position: relative;
background-color: #EF7D03;
}
nav li.right.navigation-msp:hover {
background-color: #F88017;
}
nav li.right.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #EF7D03;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.active.navigation-msp:hover {
background-color: #EF7D03;
}
.handle {
width: 100%;
color: white;
cursor: pointer;
padding: 15px 10px;
display: none;
text-align: left;
box-sizing: border-box;
background-color: #E6332A;
}
.handle:hover {
background-color: #FF3333;
}
#media screen and (max-width: 1000px) {
nav ul {
position: relative;
color: #ffffff;
margin-top: 37px;
margin-bottom: 0px;
padding: 0;
overflow: hidden;
text-align: center;
}
nav li.left {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
position: relative;
}
nav a {
color: inherit;
text-decoration: none;
}
nav ul li {
margin: 0px 10px 0px 10px;
display: inline-block;
padding: 15px 10px 15px 10px;
background-color: #E6332A;
}
nav ul li {
width: 100%;
margin: 0;
text-align: left;
box-sizing: border-box;
}
nav ul {
max-height: 0;
}
.showing {
max-height: 15em;
border-bottom: 1px solid black;
}
.handle {
display: block !important;
}
Related
I can't seem to get my open nav menu pane to display on top of the page content, mainly images. I've tried changing z-index but that only seems to make things worse.
Thanks for any help, this is for a school project (my first html/css class). I'm not sure if I need to also post the HTML here?
'''#import url('https://fonts.googleapis.com/css?family=Libre+Caslon+Text:400,700&display=swap');
body {
font-family: Libre Caslon Text;
background-color: #FFAB91;
}
.body-text {
padding-top: 20vh;
text-align: center;
position: relative;
}
.hamburger-icon {
position: absolute;
z-index: 1;
top: 5vh;
left: 5vw;
padding-bottom: 2vh;
}
.hamburger-icon span {
height: 5px;
width: 40px;
background-color: black;
display: block;
margin: 5px 0px 5px 0px;
transition: 0.7s ease-in-out;
transform: none;
}
#openmenu:checked~.menu-pane {
left: -5vw;
transform: translateX(-5vw);
}
#openmenu:checked~.body-text {
display: none;
}
#openmenu:checked~.hamburger-icon span:nth-of-type(2) {
transform: translate(0%, 175%) rotate(-45deg);
background-color: white;
}
#openmenu:checked~.hamburger-icon span:nth-of-type(3) {
transform: rotate(45deg);
background-color: white;
}
#openmenu:checked~.hamburger-icon span:nth-of-type(1) {
opacity: 0;
}
#openmenu:checked~.hamburger-icon span:nth-of-type(4) {
opacity: 0;
}
div.menu-pane {
background-color: #000;
position: absolute;
transform: translateX(-105vw);
transform-origin: (0, 0);
width: 100vw;
height: 100%;
transition: 0.6s ease-in-out;
}
.menu-pane p {
color: black;
font-size: 0.6em;
}
.menu-pane nav {
padding: 10%;
}
.menu-links li,
a,
span {
transition: 0.5s ease-in-out;
}
.menu-pane ul {
padding: 10%;
display: inline-block;
}
.menu-pane li {
padding-top: 20px;
padding-bottom: 20px;
margin-left: 10px;
font-size: 1em;
}
.menu-pane li:first-child {
font-size: 1.3em;
margin-left: -10px;
}
.menu-links li a {
color: white;
text-decoration: none;
}
.menu-links li:hover a {
color: #FFAB91;
}
.menu-links li:first-child:hover a {
color: black;
background-color: #FFAB91;
}
#eug-info {
background-color: #FFAB91;
border: 2px solid;
border-color: #FFAB91;
display: block;
opacity: 0;
}
.menu-links li:first-child:hover #eug-info {
opacity: 1;
}
.menu-links li:first-child:hover #spring-info {
opacity: 1;
}
#spring-info {
background-color: #FFAB91;
border: 2px solid;
border-color: #FFAB91;
display: block;
opacity: 0;
}
.menu-links li:first-child a {
padding: 5px;
}
input.hamburger-checkbox {
position: absolute;
z-index: 3;
top: 5vh;
left: 5vw;
width: 10vw;
opacity: 0;
height: 6vh;
}'''
Images showing through open menu pane
Please help, i have a template that uses hero slider. The slider works fine in desktop but not on mobile. I was told to tweak the style.css file to resolve it.
I have read some similar issues here but no solutions. Can anyone help with it?
The template owners said the solution is in the stle.css but couldnt respond further.
Kinda confused not to mess up the style.css file. Find the style.css code below for the hero slider:
Hero Area CSS
========================================*/
.home-slider {
overflow: hidden;
}
.hero-slider {
position: relative;
}
.hero-slider,
.hero-slider .single-slider{
height:680px;
}
.hero-slider .single-slider {
background-size: cover;
background-position: center;
position: relative;
}
.hero-slider .single-slider .slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.65;
}
.hero-slider .welcome-text {
margin: 146px 0 0;
}
.hero-slider .hero-text h4 {
color: #fff;
margin-bottom: 10px;
font-weight: 400;
display: inline-block;
background: #2E2751;
padding: 8px 20px;
font-size: 16px;
}
.hero-slider .hero-text h4:before {
content: "";
position: absolute;
left: 0;
bottom: -8px;
border-top: 8px solid #2E2751;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.hero-slider .hero-text h1 {
color: #2E2751;
font-size: 50px;
font-weight: bold;
line-height: 65px;
margin-bottom: 20px;
padding-bottom: 20px;
}
.hero-slider .hero-text h1::before {
content: "";
position: absolute;
left: 0;
width: 50px;
height: 6px;
background: #1775b3;
bottom: -3px;
}
.hero-slider .hero-text .p-text{
max-width:80%;
}
.hero-slider .hero-text p {
color: #666;
font-size: 15px;
}
.hero-slider .hero-text .button {
margin-top: 30px;
}
/* Text Center */
.hero-slider .hero-text.text-center h1::before {
left: 50%;
margin-left: -25px;
}
/* Text Left */
.hero-slider .hero-text.text-right h1::before {
left: auto;
right:0;
margin:0;
}
/* Slider Nav */
.hero-slider .owl-nav{
margin: 0;
width: 100%;
}
.hero-slider .owl-carousel .owl-nav div {
width: 50px;
height: 60px;
line-height: 60px;
background: #1775b3;
color: #fff;
position: absolute;
margin: 0;
padding: inherit;
font-size: 30px;
text-align: center;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
border-radius: 0px;
top: 50%;
margin-top: -30px;
}
.hero-slider .owl-carousel .owl-nav div:hover{
color:#fff;
background:#2E2751;
}
.hero-slider .owl-carousel .owl-nav .owl-prev{
left:-100px;
}
.hero-slider:hover .owl-carousel .owl-nav .owl-prev{
left:0px;
}
.hero-slider .owl-carousel .owl-nav .owl-next{
right:-100px;
}
.hero-slider:hover .owl-carousel .owl-nav .owl-next{
right:0px;
}
/* Hero Animations */
.hero-slider .owl-item.active .hero-text h4{
animation: fadeInUp 0.8s both 1s;
}
.hero-slider .owl-item.active .hero-text h1{
animation: fadeInRight 1s both 1.2s;
}
.hero-slider .owl-item.active .hero-text p{
animation: fadeInLeft 1.2s both 1.4s;
}
.hero-slider .owl-item.active .button{
animation: fadeInUp 1.4s both 1.6s;
}
/* Hero Agency */
.hero-agency .ageny-main {
padding-top: 158px;
}
.hero-agency .hero-text {
z-index: 555;
position: relative;
text-align: center;
}
.hero-agency .agency-inner {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 800px;
}
.hero-agency .agency-inner:before {
opacity: 0;
background: #fff;
}
.hero-agency .hero-text {
z-index: 555;
position: relative;
text-align: center;
}
.hero-agency .hero-text h1 {
font-size: 55px;
color: #2E2751;
font-weight: 700;
line-height: 65px;
}
.hero-agency .hero-text h1 span {
color: #1775b3;
}
.hero-agency .hero-text h4 {
font-weight: 500;
}
.hero-agency .video-head {
margin-top: 35px;
position: relative;
}
.hero-agency .video-head .video {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 100%;
background: #1775b3;
color: #fff;
display: inline-block;
font-size: 28px;
}
.hero-agency .video-head .video:hover{
background:#fff !important;
color:#1775b3;
-webkit-box-shadow:0px 0px 15px #00000029;
-moz-box-shadow:0px 0px 15px #00000029;
box-shadow:0px 0px 15px #00000029;
}
.hero-agency .video-play-main {
display: inline-block;
padding: 5px;
z-index: 3333;
position: relative;
}
.hero-agency .waves-block .waves {
position: absolute;
width: 150px;
height: 150px;
border: 2px solid #1775b38a;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
border-radius: 100%;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
left: 50%;
margin-left: -75px;
top: 50%;
margin-top: -75px;
}
.hero-agency .waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.hero-agency .waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.hero-agency .waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#-webkit-keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
/* Agency Feature */
.hero-agency .agency-feature {
display: block;
text-align: center;
margin-top: 40px;
}
.hero-agency .a-feature {
background: #fff;
padding: 45px 20px;
text-align: center;
z-index: 333;
position: relative;
width: 220px;
display: inline-block;
margin-right: 20px;
border-radius: 0;
box-shadow: -2px 4px 13px rgba(0, 0, 0, 0.12);
border-top: 2px solid #1775b3;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.hero-agency .a-feature:hover{
border-top-color:#1775b3;
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
transform:scale(1.05);
}
.hero-agency .a-feature:last-child{
margin:0;
}
.hero-agency .a-feature i {
display: inline-block;
border-radius: 100%;
font-size: 40px;
top: -30px;
background: #fff;
color: #1775b3;
left: 50%;
}
.hero-agency .a-feature h4 {
color: #2E2751;
font-size: 18px;
margin-top: 12px;
margin-bottom: 12px;
line-height: 22px;
}
.hero-agency .a-feature p {
line-height: 22px;
font-size: 14px;
}
/*======================================
End Hero Area CSS
========================================*/
To rephrase your question, you need to design the site to be mobile.
That involves adding new CSS rules that apply at lower screen sizes (or higher, it's your CSS).
If you apply CSS media queries like they do in this popular SO post, then you will be probably be able to solve your problem:
CSS media queries for screen sizes
can someone please help me. I'm facing an issue where my page doesn't scroll down and the paragraphs don't appear in the body but on the header of my page. I have removed all unnecessary overflow elements from the CSS but that did not do anything.
https://codepen.io/arvindr2002/pen/oNzzMQb.
Thank you.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Raleway', sans-serif;
background-color: black;
}
header {
background-image: url(../images/Game.jpg);
height: 100%;
width: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: right-side;
position: fixed;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
padding: 0 5%;
height: 45px;
background-color: #E94B3CFF;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav a:hover {
border-top: 2px red;
border-bottom: 4px solid white;
padding: 6px 0;
}
nav .nav-area {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .nav-area li {
list-style: none;
}
nav .nav-area a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
#media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .nav-area { /* transforing toggle-bar */
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .a {
font-size: 20px;
}
nav :checked ~ .nav-area {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
.welcome-text {
position: fixed;
width: 600px;
height: 300px;
margin: 25% 30%;
text-align: center;
}
.welcome-text h1 {
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 60px;
}
.welcome-text h1 span {
color: #E94B3CFF;
}
.glow{
position: relative;
display: inline-block;
padding: 20px 15px;
margin: 10px 1;
color: #E94B3CFF;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 4px;
overflow: hidden;
margin-right: 20px;
}
.glow:hover{
background: #E94B3CFF;
color: #050801;
box-shadow: 0 0 5px #E94B3CFF,
0 0 25px #E94B3CFF,
0 0 50px #E94B3CFF,
0 0 200px #E94B3CFF;
-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.glow span{
position: absolute;
display: block;
}
.glow span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#E94B3CFF);
animation: animate1 1s linear infinite;
}
#keyframes animate1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
.glow span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#E94B3CFF);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
#keyframes animate2{
0%{
top: -100%;
}
50%,100%{
top: 100%;
}
}
.glow span:nth-child(3){
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#E94B3CFF);
animation: animate3 1s linear infinite;
animation-delay: 0.50s;
}
#keyframes animate3{
0%{
right: -100%;
}
50%,100%{
right: 100%;
}
}
.glow span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#E94B3CFF);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
#keyframes animate4{
0%{
bottom: -100%;
}
50%,100%{
bottom: 100%;
}
}/*resposive*/
in this authentication page i want to do a background with 5 images rolling in 3 seconds, it works but also my auth form appears between every image and disappear when other image appear.
here the Fiddle with my html and css just to show you the code better, it doesn't work there because i have the images in my local path.
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="center">
<h1>Benvenuto!</h1>
<h3>Accedi con le tue credenziali</h3>
</div>
<form style="background-color: white">
<div class="group">
<input [(ngModel)]="user.email" name="email" type="email"><span class="highlight"></span><span
class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input [(ngModel)]="user.password" name="password" type="password"><span
class="highlight"></span><span
class="bar"></span>
<label>Password</label>
</div>
<button (click)="signin()" type="button" class="button buttonBlue">Accedi
<div class="ripples buttonRipples"><span class="ripplesCircle"></span>
</div>
</button>
</form>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
</body>
</html>
CSS:
.crossfade > figure {
animation: imageAnimation 15s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url('../../../img/login/bath-bathroom-candlelight-3188.jpg'); }
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url('../../../img/login/bath-blur-brush-275765.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url('../../../img/login/beauty-face-massage-56884.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url('../../../img/login/bed-bedroom-blanket-275845.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 12s;
background-image: url('../../../img/login/body-massage-relax-7700.jpg');
}
#keyframes
imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
* { box-sizing:border-box; }
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align:center;
margin-top: 4em;
}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }
.center{
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
}
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/*/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/*/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/*/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
#keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all 0.15s ease;
}
.button:focus { outline: 0; }
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: #357bd8; }
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */
#keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
footer { text-align: center; }
footer p {
color: #888;
font-size: 13px;
letter-spacing: .4px;
}
footer a {
color: #4a89dc;
text-decoration: none;
transition: all .2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
transition: all .2s ease;
}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }
<!-- slideshow bckg -->
* {
padding: 0;
margin: 0
}
one solution is to add a div section to your crossfade too!
You just need to add the div section in your css and give the div a chance to show and disappear
.crossfade > figure {
animation: imageAnimation 18s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > div {
animation: imageAnimation 15s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url('https://www.uncommongoods.com/images/items/26500/26530_1_1200px.jpg'); }
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url('https://img1.southernliving.timeinc.net/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/2018/01/main/duck.jpg?itok=CHWo5-3d&1515187196');
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url('https://images-eu.ssl-images-amazon.com/images/I/41sfz8dKX1L._SL500_AC_SS350_.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url('https://deltawaterfowl.org/wp-content/uploads/2017/04/mallard-web.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 12s;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg');
}
.crossfade > div:nth-child(6) {
animation-delay: 15s;
}
#keyframes
imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
* { box-sizing:border-box; }
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align:center;
margin-top: 4em;
}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }
.center{
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
}
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/*/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/*/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/*/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
#keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all 0.15s ease;
}
.button:focus { outline: 0; }
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: #357bd8; }
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */
#keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
footer { text-align: center; }
footer p {
color: #888;
font-size: 13px;
letter-spacing: .4px;
}
footer a {
color: #4a89dc;
text-decoration: none;
transition: all .2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
transition: all .2s ease;
}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }
<!-- slideshow bckg -->
* {
padding: 0;
margin: 0
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<div class="center">
<h1>Benvenuto!</h1>
<h3>Accedi con le tue credenziali</h3>
</div>
</div>
</body>
</html>
Have at it and goodluck :)
I've been working on an website, and we wanted to a animated background.
But the problem with this is that my Navbar disappears after the second picture is displayed.
This only happends on ios devices, because my partner tried it with android and it worked how it is supposed to.
(tried it on both safari and google chrome.)
With header: https://imgur.com/a/rLswc
header disappears: https://imgur.com/a/G2A5b
homepage:
<body>
<div class="bg-fade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
<div id="main-container">
<!-- header -->
<?php include('inc/header.php'); ?>
CSS - background:
.bg-fade > figure {
top: 0px;
left: 0px;
color: transparent;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
position: fixed;
animation: imageAnimation 36s linear infinite 0s;
background-size: cover;
backface-visibility: hidden;
}
.bg-fade > figure:nth-child(1) {
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_01.jpg');
}
.bg-fade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_02.jpg');
}
.bg-fade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_03.jpg');
}
.bg-fade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_04.jpg');
}
.bg-fade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_05.jpg');
}
.bg-fade > figure:nth-child(6) {
animation-delay: 30s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_06.jpg');
}
/*keyframes .bg-fade*/
#-webkit-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;
}
}
#-moz-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;
}
}
#-o-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 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;
}
}
CSS - nav:
/*navigation*/
nav ul {
margin: 37px 0px 0px 0px;
padding: 0px;
list-style: none;
text-align: center;
z-index: 100;
opacity: 1;
}
nav li.left {
float: left;
color: #ffffff;
width: 125px;
margin: 0px -45px 0px 50px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.left:hover {
background-color: #ff3333;
}
nav li.left.active {
background-color: #E6332A;
}
nav li.left.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #E6332A;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 125px;
margin: 0px 0px 0px 150px;
display: inline-block;
padding: 15px 10px;
font-size: 14px;
position: relative;
background-color: #EF7D03;
}
nav li.right.navigation-msp:hover {
background-color: #F88017;
}
nav li.right.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #EF7D03;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.active.navigation-msp:hover {
background-color: #EF7D03;
}
.handle {
width: 100%;
color: white;
cursor: pointer;
padding: 15px 10px;
display: none;
text-align: left;
box-sizing: border-box;
background-color: #E6332A;
}
.handle:hover {
background-color: #FF3333;
}
#media screen and (max-width: 1000px) {
nav ul {
position: relative;
color: #ffffff;
margin-top: 37px;
margin-bottom: 0px;
padding: 0;
overflow: hidden;
text-align: center;
}
nav li.left {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
position: relative;
}
nav a {
color: inherit;
text-decoration: none;
}
nav ul li {
margin: 0px 10px 0px 10px;
display: inline-block;
padding: 15px 10px 15px 10px;
background-color: #E6332A;
}
nav ul li {
width: 100%;
margin: 0;
text-align: left;
box-sizing: border-box;
}
nav ul {
max-height: 0;
}
.showing {
max-height: 15em;
border-bottom: 1px solid black;
}
.handle {
display: block !important;
}
}