changing the width of h1 - javascript

I have this code below that allows the text to fade in nicely. However, as you can see when I run it below, it doesn't show the entire text specified in the h1. So i am a little confused on how to fix this, because looking at the css, it is not specifying where the width of the div or h1 actually is.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>
does anybody have any ideas how to possibly fix this?

This has nothing to do with the width of the h1, but with your CSS animations: You are defining fade-ins for 10 spans, but you have 12 of them, so the 11th and 12th remain invisible - see below, where I added selectors for them to the rule for the 10th child span:
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10),
.container h1 span:nth-child(11),
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>

You did not include enough :nth-child elements in your animation. I changed the last one you had, I believe was 10, to the proper number -> 12.
I figured this out by inspecting the browser inspector and looking at how many span tags were being created by your JS function. I then went back and replaced the last span CSS animation from 10 to 12 and worked backward down the line changing each one down the line...
I also added the proper amount of animations and animation duration for 5, 6 and 7 respectively though you may want to play around with those on your end.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.3s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: .7s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(6) {
animation-delay: .9s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(7) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(11) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(10) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>

Related

can I attach an anchor tag on a span text using javascript

How can I open up a link when I click on the span items. This is what I have done
https://codepen.io/errors101/pen/LYNezVv?editors=1100
I don't want to put anchor tag inside every span element instead I want to use onClick to edit the html to insert a link only when someone clicks on it.
How can I do this ?
nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link {
text-decoration: none;
color: #000;
position: relative;
font-size: 2rem;
font-weight: 600;
letter-spacing: 4px;
}
.link:after {
content: "";
/* display:block; */
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #2987FF;
transition: width .18s cubic-bezier(0.45, 0.05, 0.55, 0.95)
}
.link:hover:after {
width: 100%;
left: 0;
}
#-webkit-keyframes colours1 {
0% {
color: #00f;
}
50% {
color: #0f0;
}
75% {
color: #000;
}
100% {
color: #f00;
}
}
#-webkit-keyframes colours2 {
0% {
color: red;
}
50% {
color: green;
}
75% {
color: black;
}
100% {
color: blue;
}
}
#-webkit-keyframes colours3 {
0% {
color: purple;
}
50% {
color: yellow;
}
75% {
color: violet;
}
100% {
color: black;
}
}
#-webkit-keyframes colours4 {
0% {
color: orange;
}
50% {
color: black;
}
75% {
color: blue;
}
100% {
color: purple;
}
}
#a {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours1;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(3, end);
}
#b {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours2;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
#c {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours3;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
#d {
-webkit-animation-direction: normal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours4;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
em {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 4rem;
font-style: none;
font-weight: 600;
cursor: pointer;
}
<!-- <nav>
<a class="link" href="#">Portfolio</a>
</nav> -->
<em>
<spam id= "a">P</spam>
<spam id= "b">o</spam>
<spam id= "c">r</spam>
<spam id= "d">t</spam>
<spam id= "b">f</spam>
<spam id= "c">o</spam>
<spam id= "d">l</spam>
<spam id= "c">i</spam>
<spam id= "a">o</spam>
</em>
Something like this?
Note I had to change your ID to CLASS since you cannot reuse an ID
const linksObj = {
a: "https://google.com",
b: "https://msdn.com",
c: "",
d: "",
e: "",
f: "",
g: "",
h: "",
i: ""
}
document.querySelector("#links").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.tagName === "SPAN") {
location = linksObj[tgt.id]
}
})
nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link {
text-decoration: none;
color: #000;
position: relative;
font-size: 2rem;
font-weight: 600;
letter-spacing: 4px;
}
.link:after {
content: "";
/* display:block; */
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #2987FF;
transition: width .18s cubic-bezier(0.45, 0.05, 0.55, 0.95)
}
.link:hover:after {
width: 100%;
left: 0;
}
#-webkit-keyframes colours1 {
0% {
color: #00f;
}
50% {
color: #0f0;
}
75% {
color: #000;
}
100% {
color: #f00;
}
}
#-webkit-keyframes colours2 {
0% {
color: red;
}
50% {
color: green;
}
75% {
color: black;
}
100% {
color: blue;
}
}
#-webkit-keyframes colours3 {
0% {
color: purple;
}
50% {
color: yellow;
}
75% {
color: violet;
}
100% {
color: black;
}
}
#-webkit-keyframes colours4 {
0% {
color: orange;
}
50% {
color: black;
}
75% {
color: blue;
}
100% {
color: purple;
}
}
.a {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours1;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(3, end);
}
.b {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours2;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.c {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours3;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.d {
-webkit-animation-direction: normal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours4;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
em {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 4rem;
font-style: none;
font-weight: 600;
cursor: pointer;
}
<em id="links">
<span id="a" class="a">P</span>
<span id="b" class="b">o</span>
<span id="c" class="c">r</span>
<span id="d" class="d">t</span>
<span id="e" class="e">f</span>
<span id="f" class="f">o</span>
<span id="g" class="d">l</span>
<span id="h" class="c">i</span>
<span id="i" class="a">o</span>
</em>
Clicking on portfolio to go to ONE link
const linksObj = {
portfolio: "https://google.com/search?q=portfolio",
about: "https://google.com/search?q=about",
contact: "https://google.com/search?q=about"
}
document.getElementById("container").addEventListener("click", function(e) {
let tgt = e.target;
if (tgt.parentNode.classList.contains("link")) tgt = tgt.parentNode; // allow one level up
if (tgt.classList.contains("link")) location = linksObj[tgt.id];
})
nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link {
text-decoration: none;
color: #000;
position: relative;
font-size: 2rem;
font-weight: 600;
letter-spacing: 4px;
}
.link:after {
content: "";
/* display:block; */
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #2987FF;
transition: width .18s cubic-bezier(0.45, 0.05, 0.55, 0.95)
}
.link:hover:after {
width: 100%;
left: 0;
}
#-webkit-keyframes colours1 {
0% {
color: #00f;
}
50% {
color: #0f0;
}
75% {
color: #000;
}
100% {
color: #f00;
}
}
#-webkit-keyframes colours2 {
0% {
color: red;
}
50% {
color: green;
}
75% {
color: black;
}
100% {
color: blue;
}
}
#-webkit-keyframes colours3 {
0% {
color: purple;
}
50% {
color: yellow;
}
75% {
color: violet;
}
100% {
color: black;
}
}
#-webkit-keyframes colours4 {
0% {
color: orange;
}
50% {
color: black;
}
75% {
color: blue;
}
100% {
color: purple;
}
}
.a {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours1;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(3, end);
}
.b {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours2;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.c {
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours3;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
.d {
-webkit-animation-direction: normal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours4;
/* -webkit-animation-timing-function: ease; */
-webkit-animation-timing-function: steps(2, end);
}
em {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 4rem;
font-style: none;
font-weight: 600;
cursor: pointer;
}
<div id="container">
<em class="link" id="portfolio">
<span class="a">P</span>
<span class="b">o</span>
<span class="c">r</span>
<span class="d">t</span>
<span class="e">f</span>
<span class="f">o</span>
<span class="d">l</span>
<span class="c">i</span>
<span class="a">o</span>
</em>
<span id="about" class="link">About</span>
<p id="contact" class="link">contact</p>
</div>

how to make wave animation?

I want to make a wave. There is sample animation that i made. so i want to change this animation like this. there is number of rectangles. Expanding both sides of the rectangle
What i want to do is this time rectangle is expanding both sides(Up & down sides) but i want to expand only on side(up side) like music player.
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50%{
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>
Just set the transform-origin of the span to bottom center(default is center center).
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
transform-origin: bottom center;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50% {
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

How to stop loading animation after 2 seconds?

I want to make a loading screen and a fading up page like here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5. The problem is that I don't know how to end the loading loop and make that fading.
Codes
<body>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</body>
body {
background-color: #636e72;
}sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: 50%;
left: 50%;
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
#keyframes sk-chase {
100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}
You need the JavaScript that tells the browser when to hide the loader and show the content. See snippet below
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.querySelector("#loader").style.display = "none";
document.querySelector("#myDiv").style.display = "block";
document.querySelector("body").style.backgroundColor = "white";
}
body {
background-color: #636e72;
}
.sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: calc(50% - 20px);
left: calc(50% - 20px);
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3) {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2):before {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6):before {
animation-delay: -0.6s;
}
#keyframes sk-chase {
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot {
80%,
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
}
100%,
0% {
transform: scale(1.0);
}
}
<body onload="myFunction()">
<div id="loader" class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
</body>
animation: sk-chase 2.5s infinite linear both;
Word infinite is your problem. Use a number of reps instead infinite. In your case is 1.

CSS3 Keyframe Animation issue with "timelines"

In the following example I have 3 divs they need to be animated using CSS3 Keyframe Animation with the following rules (when I mention hidden/show in the text below actually use opacity 0.1/1 in the CSS):
A) When the page load
ladyDefault is shown
ladyCorrect is hidden
ladyWrong is hidden
B) When User click btnCorrect
ladyDefault is hidden
ladyCorrect is shown
ladyWrong is hidden
C) When User click btnWrong
ladyDefault is hidden
ladyCorrect is hidden
ladyWrong is shown
Currently:
Sequence case A) and B) work fine.
Sequence case A) and C) work fine.
But I am not able to fix the following cases:
Sequence case A) and B) and C) does not work(ladyWrong is not shown).
Sequence case A) and C) and B) does not work (ladyCorrect is not shown).
I would like to know how to fix it possibly using only CSS 3.
Test the following example using only Google Chrome.
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.add('showLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.add('showLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
#keyframes hideLadyDefault {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyDefault {
animation-name: hideLadyDefault;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes showLadyCorrect {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: showLadyCorrect;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyCorrect {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyCorrect {
animation-name: hideLadyCorrect;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both
animation-delay: 0;
}
/*
--------------------------- lady wrong
*/
#keyframes showLadyWrong {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyWrong {
animation-name: showLadyWrong;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyWrong {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyWrong {
animation-name: hideLadyWrong;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-delay: 0;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
Original Answer:
You need to remove the previous classes also before adding the new ones. When you don't remove the other class before adding a new one, each of them try to set an animation on the same element and as is always the case with CSS, the selector (class) which is defined later in the CSS wins.
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.remove('showLadyWrong');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.remove('hideLadyCorrect');
ladyCorrect.classList.add('showLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.remove('showLadyCorrect');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.remove('hideLadyWrong');
ladyWrong.classList.add('showLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
#keyframes hideLadyDefault {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyDefault {
animation-name: hideLadyDefault;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes showLadyCorrect {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: showLadyCorrect;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyCorrect {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyCorrect {
animation-name: hideLadyCorrect;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both animation-delay: 0;
}
/*
--------------------------- lady wrong
*/
#keyframes showLadyWrong {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyWrong {
animation-name: showLadyWrong;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyWrong {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyWrong {
animation-name: hideLadyWrong;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-delay: 0;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
Solution with only one keyframe rule:
You can also achieve the same effect with a single #keyframes rule instead of using multiple. All that would be needed is to set the animation-direction as reverse for the hide. But the old class must still be removed because once an animation is set on the element, the UA remembers its execution as mentioned in this answer of mine.
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.remove('showLadyWrong');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.remove('hideLadyCorrect');
ladyCorrect.classList.add('showLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.remove('showLadyCorrect');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.remove('hideLadyWrong');
ladyWrong.classList.add('showLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
.hideLadyDefault {
animation-name: show;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: reverse;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes show {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: show;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
.hideLadyCorrect {
animation-direction: reverse;
}
/*
--------------------------- lady wrong
*/
.showLadyWrong {
animation-name: show;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
.hideLadyWrong {
animation-direction: reverse;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
Solution with transition: (might be better fit)
The better option would be to use transition if you could instead of animation. Here you could just set the opacity via inline style attributes and let the transition property handle the rest. Unlike the animations, transitions can execute the reverse state by default. (This is the best bet if it only a simple change of opacity from 0.1 to 1, if it is a complex multi-step change the transitions are out of scope.)
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.style["opacity"] = "0.1";
ladyWrong.style["opacity"] = "0.1";
ladyCorrect.style["opacity"] = "1";
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.style["opacity"] = "0.1";
ladyCorrect.style["opacity"] = "0.1";
ladyWrong.style["opacity"] = "1";
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
transition: all 1s ease;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
transition: all 1s ease;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
transition: all 1s ease;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
You are adding all classes correctly, but you are not removing the added classes later, thats the issue. Change your listeners to
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.add('showLadyCorrect');
ladyCorrect.classList.remove('hideLadyCorrect'); //added
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.add('showLadyWrong');
ladyWrong.classList.remove('hideLadyWrong'); //added
});
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.add('showLadyCorrect');
ladyCorrect.classList.remove('hideLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.add('showLadyWrong');
ladyWrong.classList.remove('hideLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
#keyframes hideLadyDefault {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyDefault {
animation-name: hideLadyDefault;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes showLadyCorrect {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: showLadyCorrect;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyCorrect {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyCorrect {
animation-name: hideLadyCorrect;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both
animation-delay: 0;
}
/*
--------------------------- lady wrong
*/
#keyframes showLadyWrong {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyWrong {
animation-name: showLadyWrong;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyWrong {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyWrong {
animation-name: hideLadyWrong;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-delay: 0;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>

Links to animated background image landing page

I have a landing page with 8 background images using a javascript to animate it fading in/out and I'd like to add links to each of the images when they appear. Is this possible?
If so, what do I need to change into the code, I tried by adding (a) at the (ul) but didn't work.
Thank you,
Max
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-cssanimations-iepp-cssclasses-testprop-testallprops-domprefixes-load
*/
;window.Modernizr=function(a,b,c){function A(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return z(d,b)}function z(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function v(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)},o.cssanimations=function(){return A("animationName")};for(var B in o)u(o,B)&&(s=B.toLowerCase(),e[s]=o[B](),r.push((e[s]?"":"no-")+s));v(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{\}]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\n")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._domPrefixes=n,e.testProp=function(a){return z([a])},e.testAllProps=A,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+r.join(" "):"");return e}(this,this.document),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCallback;if(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent;
}
.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;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s 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;
-webkit-animation: titleAnimation 42s linear infinite 0s;
-moz-animation: titleAnimation 42s linear infinite 0s;
-o-animation: titleAnimation 42s linear infinite 0s;
-ms-animation: titleAnimation 42s linear infinite 0s;
animation: titleAnimation 42s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/7.jpg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/8.jpg);
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) div {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-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
}
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 {
font-size: 140px
}
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 {
font-size: 80px
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oikos Creative Lab / Communication Design</title>
<meta name="description" content="Oikos é un’agenzia di comunicazione e design che offre soluzioni strategiche cross media.">
<link rel="stylesheet" type="text/css" href="CSS3FullscreenSlideshow/css/demo.css" />
<link rel="stylesheet" type="text/css" href="CSS3FullscreenSlideshow/css/style1.css" />
<style type="text/css">
#dati {
float: left;
margin-left: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: left;
font-size: small;
height: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
width: 40%;
}
#book {
float: left;
margin-left: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: left;
font-size: small;
height: 0x;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
width: 175px;
}
#footer {
float: right;
margin-right: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: right;
font-size: small;
height: 20px;
width: 250px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
}
.contenitore {
background-color: #000000;
height: 60px;
width: 100%;
position: absolute;
bottom: 0;
z-index: 9999;
opacity: 0.5;
}
.contenitore #footer a {
color: #808080;
text-decoration: none;
}
.contenitore #footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
</style>
<script type="text/javascript" src="CSS3FullscreenSlideshow/js/modernizr.custom.86080.js"></script>
</head>
<body>
<ul class="cb-slideshow">
<li><span>Image 01</span>
</li>
<li><span>Image 02</span>
</li>
<li><span>Image 03</span>
</li>
<li><span>Image 04</span>
</li>
<li><span>Image 05</span>
</li>
<li><span>Image 06</span>
</li>
<li><span>Image 07</span>
</li>
<li><span>Image 08</span>
</li>
</ul>
<div class="clr"></div>
<div class="contenitore">
<div id="dati">oikos creative lab s.r.l. / via volturno 16 20900 monza mb it
<br>t.+39 0392301644 / info#oikoscreativelab.com
</div>
<div id="book">download our porfolio
<img src="CSS3FullscreenSlideshow/images/acro_ico.png" width="30" height="34" alt="" />
</div>
<div id="footer">c.f. p.iva 09201110963 / r.i. MB-1903327
<br>capitale sociale: € 10.000,00 i.v.</div>
</div>
</body>
</html>

Categories