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>
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>
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>