I'm working on a little animation for toggling my website between dark- and light mode. It's a pretty complicated animation, so I'm guessing the solution will be complicated as well.
I basically toggle between classes, but this prevents me from being able to reverse the animation when toggling the button. Been looking for simple solutions around the web, but didn't find any that explains how to reverse the animation with multiple CSS keyframes.
Here's the CSS part of the code which is basically repeated 8 times:
.line {
width: 1rem;
height: 2rem;
background-color: black;
position: absolute;
display: block;
transform: translateY(5rem);
border-radius: 0.5em;
}
.is-dark {
animation: is-dark 2s forwards;
}
#keyframes is-dark {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(-1rem);
}
}
JS
let line = document.querySelector(".line");
let btn = document.querySelector(".btn");
btn.addEventListener("click", toggleDarkMode);
function toggleDarkMode() {
line.classList.toggle("is-dark");
}
Here's the complete version of this button: https://jsfiddle.net/a6euokxy/4/
Thanks in advance,
Luk Ramon
I have some the solution for you issue. I improved js file, did add into classes with animation alternate infinite paused; properties. In html added classes with animation.
working example with LocalStorage
let theme = 'light';
// Get all container elements
const lines = document.querySelector('.container').querySelectorAll('div');
let btn = document.querySelector('.btn');
btn.addEventListener('click', toggleDarkMode);
function toggleDarkMode() {
if (theme === 'light') {
lines.forEach(line => {
// Remove unnecessary DOM elements
if (!line.hasAttribute('class')) return;
// Set pause after play 2s animation
setTimeout(() => {
line.removeAttribute('style');
}, 2000);
// Start play
line.setAttribute('style', 'animation-play-state: running');
});
theme = 'dark';
return;
}
if (theme === 'dark') {
lines.forEach(line => {
if (!line.hasAttribute('class')) return;
setTimeout(() => {
line.removeAttribute('style');
}, 2000);
line.setAttribute('style', 'animation-play-state: running');
});
theme = 'light';
return;
}
}
* {
padding: 0;
margin: 0;
}
.button {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.button .btn {
background: none;
border: 0.2rem solid black;
font-size: 1rem;
padding: 1rem;
border-radius: 2rem;
font-weight: bold;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#circle {
width: 4rem;
height: 4rem;
border: 1rem solid black;
border-radius: 50%;
position: absolute;
}
#lines {
display: flex;
justify-content: center;
align-items: center;
}
#lines1 {
transform: rotate(45deg);
transform-origin: center;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.line,
.line1,
.line2,
.line3,
.line4,
.line5,
.line6,
.line7 {
width: 1rem;
height: 2rem;
background-color: black;
position: absolute;
display: block;
border-radius: 0.5em;
}
.line {
transform: translateY(5rem);
}
.is-dark {
animation: is-dark 2s alternate infinite paused;
}
#keyframes is-dark {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(-1rem);
}
}
.line1 {
transform: translateY(-5rem);
}
.is-dark1 {
animation: is-dark1 2s alternate infinite paused;
}
#keyframes is-dark1 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateY(-5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateY(-5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
}
.line2 {
transform: translateX(5rem) rotate(90deg);
}
.is-dark2 {
animation: is-dark2 2s alternate infinite paused;
}
#keyframes is-dark2 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line3 {
transform: translateX(-5rem) rotate(90deg);
}
.is-dark3 {
animation: is-dark3 2s alternate infinite paused;
}
#keyframes is-dark3 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line4 {
transform: translateY(5rem);
}
.is-dark4 {
animation: is-dark4 2s alternate infinite paused;
}
#keyframes is-dark4 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(1rem);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(1rem);
opacity: 0;
}
}
.line5 {
transform: translateY(-5rem);
}
.is-dark5 {
animation: is-dark5 2s alternate infinite paused;
}
#keyframes is-dark5 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateY(-5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateY(-5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
}
.line6 {
transform: translateX(5rem) rotate(90deg);
}
.is-dark6 {
animation: is-dark6 2s alternate infinite paused;
}
#keyframes is-dark6 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line7 {
transform: translateX(-5rem) rotate(90deg);
}
.is-dark7 {
animation: is-dark7 2s alternate infinite paused;
}
#keyframes is-dark7 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
<div class="button">
<button class="btn">Dark Mode</button>
</div>
<div class="container">
<div id="circle"></div>
<div id="lines">
<div class="line is-dark"></div>
<div class="line1 is-dark1"></div>
<div class="line2 is-dark2"></div>
<div class="line3 is-dark3"></div>
</div>
<div id="lines1">
<div class="line4 is-dark4"></div>
<div class="line5 is-dark5"></div>
<div class="line6 is-dark6"></div>
<div class="line7 is-dark7"></div>
</div>
</div>
Related
I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried changing overflow-y: hidden, but it doesn't seem to work.
Here is the HTML for the menu:
<div id="menu">
<div class="logotext">
ONWORD
</div>
<input type="checkbox" id="myInput">
<label for="myInput">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<aside>
<div class="aside-section aside-left">
<div class="aside-content">
<p> Languages of the land</p>
</div>
</div>
<div class="aside-section aside-right">
<ul class="aside-list">
<li>Start Learning</li>
<li>Language Map</li>
<li>History</li>
<li>Stories</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
Here is the CSS:
.logotext a {
font-family: "Raleway", sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
left: 1%;
z-index: 99999;
color: white;
position: absolute;
padding-left: 19px;
padding-right: 19px;
padding-top: 22px;
transition: 0.5s;
}
.logotext a:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.aside-section {
top: 0;
bottom: 0;
position: absolute;
z-index: 99998;
overflow: hidden;
}
.aside-left {
display: none;
width: 40%;
left: 0;
background-color: white;
background-image: url(../img/menu1.jpeg);
background-position: center;
background-size: cover;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-right {
width: 100%;
right: 0;
background-color: #000000;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 160px;
text-align: left;
padding-left: 50px;
z-index: 99998;
}
.aside-content {
margin-top: 150px;
padding: 0 40px;
position: relative;
color: #000000;
text-align: center;
z-index: 99998;
}
.aside-list li {
margin-bottom: 20px;
z-index: 99998;
padding-bottom: 7px;
}
.aside-anchor::after {
content: "";
position: absolute;
bottom: 0;
background-color: #000000;
left: 0;
right: 0;
height: 2px;
border-radius: 3px;
}
.aside-anchor::before {
border-radius: 3px;
content: "";
position: absolute;
bottom: 0;
background-color: #f5eded;
left: 0;
height: 1px;
z-index: 1;
width: 50%;
-webkit-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.aside-anchor:hover:before {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
background-color: #dd8800;
}
.aside-anchor {
padding-bottom: 5px;
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ aside .aside-left {
transform: translateY(0%);
}
input[type="checkbox"]:checked ~ aside .aside-right {
transform: translateX(0%);
}
input[type="checkbox"]:checked ~ label .bar {
background-color: #fff;
}
input[type="checkbox"]:checked ~ label .top {
-webkit-transform: translateY(0px) rotateZ(45deg);
-moz-transform: translateY(0px) rotateZ(45deg);
-ms-transform: translateY(0px) rotateZ(45deg);
-o-transform: translateY(0px) rotateZ(45deg);
transform: translateY(0px) rotateZ(45deg);
}
input[type="checkbox"]:checked ~ label .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
input[type="checkbox"]:checked ~ label .middle {
width: 0;
}
.middle {
margin: 0 auto;
}
label {
top: 10px;
display: inline-block;
padding: 7px 10px;
background-color: transparent;
cursor: pointer;
margin: 10px;
position: absolute;
z-index: 99999;
text-align: right;
right: 1%;
transition: 0.5s;
}
label:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.bar {
display: block;
background-color: #ffffff;
width: 30px;
height: 3px;
border-radius: 5px;
margin: 5px auto;
transition: background-color 0.4s ease-in, transform 0.4s ease-in,
width 0.4s ease-in;
z-index: 99999;
}
.aside-section h1 {
margin: 0;
position: relative;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 35px;
font-family: 'BritishShorthair';
}
.aside-section p {
font-size: 90px;
text-align: center;
line-height: 130px;
font-family: 'BritishShorthair';
margin-top: 0px;
color: white;
}
#media (min-width: 992px) {
h1 {
font-size: 40px;
}
.aside-left {
display: block;
}
.aside-right {
width: 60%;
}
}
When you said you set overflow-y: hidden. Did you do this on the body?
I made a button in a moving div and put an image for background. I also put an animation for div to make it move. However, the button didn't react. I make another button at the button(which for testing and it don't move), it react. Can anyone please help me to solve this problem?
Here are the codes:
Html
<h1>Animated Aquarium</h1>
<div id="Aquarium">
<div id="box1">
<button type="button" id="button1" onclick="jelly fish()">
<img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png"id="jellyfish">
</button>
</div>
<button type="button" id="button1" onclick="jellyfish()">test</button>
</div>
Style
body {
background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
height: 100vh;
}
#Aquarium {
width: 700px;
height: 500px;
border: 10px solid #000;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg");
}
#box1{
animation: jellyfishswim 24s infinite;
position: absolute;
}
#button1{
background-color: inherit;
border:0px;
}
#jellyfish{
width: 100px;
height: 100px;
}
#keyframes jellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(-1);
}
20% {
margin-left: 280px;
margin-bottom:200px;
transform: scaleX(-1);
}
30% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(-1);
}
40% {
margin-left: 560px;
margin-top: 400px;
transform: scaleX(-1);
}
50% {
margin-left: 600px;
margin-top: 420px;
transform: scaleX(1);}
60% {
margin-left: 500px;
margin-bottom: 340px;
transform: scaleX(1);
}
70% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(1);
}
80% {
margin-left: 280px;
margin-bottom: 200px;
transform: scaleX(1);
}
90% {
margin-left: 120px;
margin-bottom: 150px;
transform: scaleX(1);
}
}
#keyframes giantjellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(-1);
}
20% {
margin-left: 140px;
margin-bottom:100px;
transform: scaleX(-1);
}
30% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(-1);
}
40% {
margin-left: 280px;
margin-top: 200px;
transform: scaleX(-1);
}
50% {
margin-left: 300px;
margin-top: 210px;
transform: scaleX(1);
}
60% {
margin-left: 250px;
margin-bottom: 170px;
transform: scaleX(1);
}
70% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(1);
}
80% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(1);
}
90% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(1);
}
}
Script
function jellyfish() {
document.getElementById("jellyfish").style.width = "300px";
document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
alert("You distory the aquarium");
}
Change
<button type="button" id="button1" onclick="jelly fish()">
to
<button type="button" id="button1" onclick="jellyfish()">
function jellyfish() {
document.getElementById("jellyfish").style.width = "300px";
document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
alert("You distory the aquarium");
}
body {
background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
height: 100vh;
}
#Aquarium {
width: 700px;
height: 500px;
border: 10px solid #000;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg");
}
#box1 {
animation: jellyfishswim 24s infinite;
position: absolute;
}
#button1 {
background-color: inherit;
border: 0px;
}
#jellyfish {
width: 100px;
height: 100px;
}
#keyframes jellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(-1);
}
20% {
margin-left: 280px;
margin-bottom: 200px;
transform: scaleX(-1);
}
30% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(-1);
}
40% {
margin-left: 560px;
margin-top: 400px;
transform: scaleX(-1);
}
50% {
margin-left: 600px;
margin-top: 420px;
transform: scaleX(1);
}
60% {
margin-left: 500px;
margin-bottom: 340px;
transform: scaleX(1);
}
70% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(1);
}
80% {
margin-left: 280px;
margin-bottom: 200px;
transform: scaleX(1);
}
90% {
margin-left: 120px;
margin-bottom: 150px;
transform: scaleX(1);
}
}
#keyframes giantjellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(-1);
}
20% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(-1);
}
30% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(-1);
}
40% {
margin-left: 280px;
margin-top: 200px;
transform: scaleX(-1);
}
50% {
margin-left: 300px;
margin-top: 210px;
transform: scaleX(1);
}
60% {
margin-left: 250px;
margin-bottom: 170px;
transform: scaleX(1);
}
70% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(1);
}
80% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(1);
}
90% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(1);
}
}
<div id="aquarium">
<div id="box1">
<button type="button" id="button1" onclick="jellyfish()">
<img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png" id="jellyfish">
</button>
</div>
</div>
I am having trouble getting bootpag (or any pagination, including easyPaginate, simplePagination, and pagerJS) to correctly work with my json list that creates divs for me. I've read some other topics that say you have to tell it to hide your divs and call an update then generate the list, but I am stuck.
I am new to js, and I have tried so many things but none work. Any ideas? My code is below.
var data = [
{ title:'title1', alias:'coll1', description:'description1', },
{ title:'title2', alias:'coll2', description:'description2', },
{ title:'title3', alias:'coll3', description:'description3', },
{ title:'title4', alias:'coll4', description:'description4', },
]
data.sort(function(a, b){
var titleA=a.title.toLowerCase(), titleB=b.title.toLowerCase();
if (titleA < titleB) //sort string ascending
return -1;
if (titleA > titleB)
return 1;
return 0; //default return value (no sorting)
});
var collectionData= '';
for ( var key in data ) {
collectionData += '<div class="hvrbox">';
collectionData += '<div class="hvrbox-title"><h5>' + data[key].title + '</h5></div>';
collectionData += '<img src="http://placekitten.com/g/200/200" class="hvrbox-layer_bottom">';
collectionData += '<div class="hvrbox-layer_top hvrbox-layer_slideup"><div class="hvrbox-text"><a href="#">';
collectionData += data[key].description + '</div><i class="fa fa-angle-double-right"></i>';
collectionData += '</a>';
collectionData += '</div></div>';
}
$('#collectionWrapper').append(collectionData);
$(document).ready(function() {
$('#pagination').bootpag({
total: 4,
page: 1,
maxVisible:1,
}).on('page', function(event, num){
$('#collectionWrapper').html("Page" + num); // some ajax content loading...
});
});
/*container for collections list*/
#collectionWrapper {
grid-area: collectionWrapper;
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline;
overflow: hidden;
height: auto;
width: 100%;
}
.hvrbox-title {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
top: 0;
min-width: 100%;
height: auto;
min-height: 12%;
padding-top: 1.5%;
padding-left: 1.5%;
padding-right: 1.5%;
text-align: center;
color: white;
}
.hvrbox i {
position: absolute;
bottom:2%;
right:3%;
font-size: 3em;
color:#E6AA3C;
}
.hvrbox img {
width: 100%;
}
.hvrbox-text a {
text-decoration: none;
color: #ffffff;
font-weight: 400;
padding: 5px;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 75%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="collectionWrapper">
</div>
<div id="pagination"></div>
Why in THIS CODE if you press the "I" button on the bottom right the first time works, but the second it shows just the pink background?
(function(){
'use strict';
var $mainButton = $(".main-button"),
$closeButton = $(".close-button"),
$buttonWrapper = $(".button-wrapper"),
$ripple = $(".ripple"),
$layer = $(".layered-content");
$mainButton.on("click", function(){
$ripple.addClass("rippling");
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
});
$closeButton.on("click", function(){
$buttonWrapper.removeClass("clicked");
$ripple.removeClass("rippling");
$layer.removeClass("active");
});
})();
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
html {
height: 100%;
}
body {
background: url("http://species-in-pieces.com/img/bg/grad-bg.png") no-repeat center center/cover #F9D8AD;
height: 100%;
}
button:focus {
outline: none;
}
button:hover {
opacity: .8;
}
.fa {
font-size: 20px;
}
.fa-info {
color: white;
}
#container {
width: 330px;
height: 508px;
max-width: 330px;
background: white;
position: relative;
top: 50%;
left: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.25);
transform: translate3d(-50%, -50%, 0);
}
h2 {
padding: 20px;
color: white;
background: #3E4FB2;
font-weight: 300;
text-align: center;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
.detail {
color: #777;
padding: 20px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.img-wrapper {
padding: 0;
position: relative;
}
.img-wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(62, 79, 178, .25);
width: 100%;
}
.img-wrapper img {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
margin: 0;
display: block;
position: relative;
}
.button-wrapper {
width: 50px;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
right: 20px;
bottom: 20px;
}
button {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
z-index: 9;
position: relative;
}
.main-button {
background: #ff2670;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.ripple {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 50%;
z-index: -9;
background: transparent;
border: 1px solid #ff2670;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transition: .3s all ease;
transition: .3s all ease;
opacity: 1;
}
.rippling {
-webkit-animation: .3s rippling 1;
animation: .3s rippling 1;
-moz-animation: .3s rippling 1;
}
#-webkit-keyframes rippling {
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#-moz-keyframes rippling {
25% {
-moz-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#keyframes rippling {
25% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.layer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: #ff2670;
border-radius: 50%;
z-index: -99;
pointer-events: none;
}
.button-wrapper.clicked {
-webkit-transform: rotate(90deg) translateY(-96px);
-ms-transform: rotate(90deg) translateY(-96px);
transform: rotate(90deg) translateY(-96px);
right: 0;
bottom: 0;
-webkit-transition: .3s all ease .6s;
transition: .3s all ease .6s;
}
.button-wrapper.clicked .main-button {
opacity: 0;
-webkit-transition: .3s all ease .3s;
transition: .3s all ease .3s;
}
.button-wrapper.clicked .layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
-webkit-transition: 2.25s all ease .9s;
transition: 2.25s all ease .9s;
}
.layered-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
}
.layered-content.active {
opacity: 1;
}
.close-button {
background: white;
position: absolute;
right: 20px;
top: 20px;
color: #ff2670;
}
.layered-content.active .close-button {
-webkit-animation: .5s bounceIn;
animation: .5s bounceIn;
}
.layered-content .content img {
width: 80px;
-webkit-shape-outside: 80px;
shape-outside: 80px;
border-radius: 50%;
display: block;
margin: 0 auto 15px;
padding: 10px;
box-sizing: border-box;
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
-webkit-transition: .3s all ease;
transition: .3s all ease;
}
.content p {
color: white;
font-weight: 300;
text-align: center;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.content p a {
font-size: 12px;
background: white;
padding: 2.5px 5px;
color: #ff2670;;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-left: 1.5px;
}
.content img,
.content p {
opacity: 0;
position: relative;
top: -7.5px;
}
.layered-content.active .content img {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease .5s;
transition: .5s all ease .5s;
}
.layered-content.active .content p {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease 1s;
transition: .5s all ease 1s;
}
.copyright {
position: fixed;
right: 15px;
bottom: 15px;
font-family: "Roboto";
}
.copyright span {
line-height: 36px;
color: rgba(255, 255, 255, 0.75);
margin-right: 10px;
font-weight: 300;
}
.copyright span a {
font-weight: 400;
text-decoration: none;
color: #ea4c89;
}
.copyright .balapa {
width: 30px;
height: 30px;
display: block;
background: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/111167/profile/profile-80_3.jpg");
background-size: cover;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.75);
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="container">
<h2>Material Overlay Animation</h2>
<div class="img-wrapper">
<img src="https://d13yacurqjgara.cloudfront.net/users/2733/screenshots/741958/dribbble-foxes.jpg" alt="Just Background">
</div>
<p class="detail">Click the Button to see the "Material Animation". Works great on modern browser.</p>
<div class="button-wrapper">
<div class="layer"></div>
<button class="main-button fa fa-info">
<div class="ripple"></div>
</button>
</div>
<div class="layered-content">
<button class="close-button fa fa-times"></button>
<div class="content">
<img src="https://d13yacurqjgara.cloudfront.net/users/332135/avatars/normal/52d614ee44e3e21d2b73894c465773d7.png" alt="Balapa">
<p>Crafted by balapa.</p>
<p>See also my other pen</p>
</div>
</div>
</main>
<div class="copyright"><span>Material Overlay Animation by</span></div>
You have to clear the queue using clearQueue() function.
Change your code to this
...
$buttonWrapper.addClass("clicked").clearQueue().delay(1500).queue(function(){
$layer.addClass("active");
});
});
...
Or you can even do it like this which is a way suggested in jQuery documentation.
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
jQuery.dequeue( this );
});
});
Important part directly from jQuery documentation,
Note that when adding a function with jQuery.queue(), we should ensure
that jQuery.dequeue() is eventually called so that the next function
in line executes.
Instead of this:
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
Use this:
$buttonWrapper.addClass("clicked");
setTimeout(function(){$layer.addClass("active")},1500);
And it will work.
Can you guys tell me how to make the hallo text to centre inside the circle?
The circle is not currently working the way it should in IE8 and Firefox.
Does anyone have any ideas / suggestions that could fix this?
I have provided a fiddle
Here is my code below (It is all in my Fiddle above)
CSS
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
HTML
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
hallo
</div>
Any help would be great!
To centre your text, use text-align:center for horizontal alignment, and set line-height:300px (with 300px being equal to the element's height) for vertical alignment.
Check this fiddle, I've placed a wrapper div
HTML
<div class="wrapper">
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
<div class="text">hallo<div>
</div>
CSS
body {
margin: 50px;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.text {
position: absolute;
top:0px;
width: 300px;
height: 300px;
margin: 0 auto;
z-index:10;
text-align:center;
line-height:300px;
}
.spinner {
position: absolute;
width: 300px;
height: 300px;
background: #aaa;
}
.spinner:after {
position: absolute;
content: "";
width: 80%;
height: 80%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 3s;
}
/* No need to edit below this line */
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}