Overflow hidden not including border-radius in Safari... sometimes - javascript

I have a button with a ripple animation on click.
In Safari the border-radius of the button isn't included with overflow: hidden:
So, I went to make a snippet demonstrating the issue to post here and, for the snippet, it worked:
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
}
.dk__btn > span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>
Anyone have any idea why?
To clarify, it works in all other browsers I've tested.

You need to add webkit mask for safari it work fine. Need to add following css to .dk_btn
-webkit-mask-image: radial-gradient(white, black);
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
-webkit-mask-image: radial-gradient(white, black);
}
.dk__btn>span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>

Related

How to make content delay using CSS and Jquery

I am attempting to create a page where the content on the screen appears 3 seconds after the page loads. By the other posts I have seen on this website, I attempted the scripting below, though with no success (Everything appears at the same time).
First is the section I am attempting to delay, then is the whole pages script. Any guidance is very much appreciated. (I am hoping I am wording everything correctly this time so I don't get another -1)
Section to delay:
<div class="content">
<div id="fade">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</div>
</section>
<style>#fade p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
}
</style>
<script>
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
</script>
And here is the entire page
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" marginwidth="0" marginheight="0">
<section class="showcase">
<div class="video-container">
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<div id="fade">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</div>
</section>
<style>#fade p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
}
</style>
<script>
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #3a4052;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
color: var(--primary-color);
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
}
.showcase {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center
center/cover;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
}
.content {
z-index: 2;
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: #fff;
border-radius: 5px;
border: solid #fff 1px;
margin-top: 25px;
opacity: 0.7;
}
.btn:hover {
transform: scale(0.98);
}
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
</style>
</body>
</html>
Here is what I ended up changing it all to, to make it work. Hopefully this will help others that are looking to do this.
.content {
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #3a4052;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
color: var(--primary-color);
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
}
.showcase {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center center/cover;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
}
.content {
z-index: 2;
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: #fff;
border-radius: 5px;
border: solid #fff 1px;
margin-top: 25px;
opacity: 0.7;
}
.btn:hover {
transform: scale(0.98);
}
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
<section class="showcase">
<div class="video-container">
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</section>

Javascript Animated Skill Bar On Scroll

I'd like to activate all of this animations whenever I scroll to a certain section, in this case the second one.So basically it starts with the section one and whenever i reach the second one i want all of this to be activated. I've tried many things, but couldn't really figure out a way to solve this. Thanks in advance.
.skills {
padding: 4.8rem;
border-bottom: solid 1px #ececec;
max-width: 1440px;
max-height: auto;
}
.skills-bar {
width: 90%;
display: flex;
flex-direction: column;
gap: 3.2rem;
margin-top: 2.8rem;
border-radius: 1rem;
padding: 3rem 3.5rem;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
font-family: "Montserrat", Sans-serif;
}
.skills-bar .bar {
margin: 2rem 0;
}
.skills-bar .bar:first-child {
margin-top: 4.8rem;
}
.skills-bar .bar .info {
margin-bottom: 5px;
}
.skills-bar .bar .info span {
font-size: 2rem;
font-weight: 500;
opacity: 0;
animation: showText 0.5s 1.5s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skills-bar .bar .progress-line {
position: relative;
height: 1rem;
width: 100%;
background: #ececec;
border-radius: 1rem;
transform: scaleX(0);
transform-origin: left;
box-shadow: inset 0xp 1px 1px rgba(0, 0, 0, 0.05),
0xp 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line span {
height: 100%;
width: 80%;
background: #9013fe;
position: absolute;
border-radius: 1rem;
transform: scaleX(0);
transform-origin: left;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.progress-line.html span {
width: 90%;
}
.progress-line.css span {
width: 85%;
}
.progress-line.js span {
width: 70%;
}
.progress-line.react span {
width: 20%;
}
.bar .progress-line span::before {
position: absolute;
content: "";
right: 0;
top: -12px;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.bar .progress-line span::after {
position: absolute;
right: 0;
top: -28px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
background: #000;
padding: 1px 8px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line.html span::after {
content: "90%";
}
.progress-line.css span::after {
content: "85%";
}
.progress-line.js span::after {
content: "70%";
}
.progress-line.react span::after {
content: "20%";
}
.skills-header {
font-family: "Montserrat", Sans-serif;
}
.skills-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 2.4rem;
margin-top: 9.2rem;
max-width: 100%;
}
.skills-heading-secondary {
color: #000;
font-weight: 600;
font-size: 1.8rem;
}
.skills-text {
color: #495057;
font-size: 1.4rem;
line-height: 1.5;
}
<section class="section skills bar--hidden" id="section--2">
<h2 class="skills-header heading-tertiary">Sklills</h2>
<div class="skills-bar">
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line bar--hidden html"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line css"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>JAVASCRIPT</span>
</div>
<div class="progress-line js"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>REACT</span>
</div>
<div class="progress-line react"><span></span></div>
</div>
</div>
</section>

Function won't work when clicking it, nothing happens

Yet again another problem sorry. I can't figure out why once I click on the browse our products section, it should then animate and reveal some images but currently, it is not doing anything of the sort. but, it's not erring in web storm. I am really struggling to identify where the problem is occurring.
var $menuWrap = $('#menu-wrap'),
$body = $('body'),
$menuTitle = $('#menu-title'),
$close = $('#close'),
$menuCards = $('.menu-card'),
$menuInner = $('#menu-inner'),
$menuLink = $('#menu-link');
setCardHeight();
$(window).resize(setCardHeight);
$menuLink.on('click', function(e) {
e.preventDefault();
showOverlay();
});
$close.on('click', function(e) {
e.preventDefault();
hideOverlay();
});
function showOverlay() {
$body.addClass('menu-on');
$menuWrap.addClass('display').addClass('visible');
setTimeout(function() {
$menuTitle.addClass('on');
$close.addClass('on');
}, 200);
$menuCards.each(function(i) {
var $card = $(this);
setTimeout(function() {
$card.addClass('on');
}, 200 + 50 * i);
});
}
function hideOverlay() {
$body.removeClass('menu-on');
$menuCards.removeClass('on');
$menuTitle.removeClass('on');
$close.removeClass('on');
setTimeout(function() {
$menuWrap.removeClass('display').removeClass('visible');
}, 350);
}
function setCardHeight() {
var windowWidth = $(window).width();
var topVal;
if (windowWidth >= 1300) {
topVal = ($(window).height() - 700) / 2;
} else {
topVal = ($(window).height() - 200 - (windowWidth / 1300 * 513)) / 2;
}
if (topVal < 10) {
topVal = 10;
}
$menuInner.css('top', topVal);
}
html {
height: 100%;
box-sizing: border-box;
font-size: 10px;
line-height: 1.5;
color: #333;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
margin: 0;
font-family: "Gotham Rounded", "Proxima Nova",sans-serif;
font-weight: 400;
color:#fff;
letter-spacing: .1em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
#logo {
position: absolute;
top:50px;
left: 50px;
z-index: 2100;
font-weight: 700;
font-size: 18px;
margin: 0;
letter-spacing: .125em;
transform: translateY(0);
transition: all .4s;
transition-delay: .1s;
}
.menu-on #logo {
opacity: 0;
transform: translateY(-20px);
}
#menu-link {
position: absolute;
left: 50px;
top: 50%;
margin-top: -25px;
z-index: 2100;
color: #fff;
text-decoration: none;
transform: translateY(0);
transition: all .35s;
}
#menu-link:hover {
color: #ffe22d;
}
.menu-on #menu-link {
opacity: 0;
transform: translateY(-20px);
}
.menu-sub {
font-size: 14px;
line-height: 1.2;
display: block;
opacity: .6;
letter-spacing: .125em;
font-weight: 600;
}
.menu-main {
font-size: 40px;
line-height: 1.2;
display: block;
letter-spacing: .09em;
font-weight: 500;
}
#bk-wrap {
width: 120%;
height: 100%;
background: url(IMG_2978.jpg) no-repeat center center;
background-size: cover;
position: fixed;
left:-70px;
top:0;
z-index: 1;
transform: translateX(0) scale(1);
transition: all .5s;
}
#bk-no-blur, #bk-blur, #bk-shadow {
width: 100%;
height: 100%;
background-size: cover;
position: absolute;
left:0;
top:0;
z-index: 1;
}
#bk-shadow {
index: 1;
position: fixed;
}
#bk-blur {
background: url(IMG_2978.jpg) no-repeat center center;
background-size: cover;
opacity: 0;
z-index: 2;
transition: opacity .4s;
}
.menu-on #bk-wrap {
transform: translateX(200px) scale(1.3);
}
.menu-on #bk-blur {
opacity: 1;
}
#bk-shadow {
background: transparent;
box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, .75);
z-index: 100;
}
/*.menu-on #bk-shadow {
box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, 1);
}*/
#menu-wrap {
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
z-index: 2000;
display: none;
opacity: 0;
transition: all .3s;
}
#menu-wrap.display {
display: block;
}
#menu-wrap.visible {
opacity: 1;
}
#menu-inner {
max-width: 1300px;
margin: 0 auto;
position: relative;
padding: 0 70px;
}
#menu-title {
font-weight: 400;
font-size: 28px;
padding:30px 8px;
margin: 0;
opacity: 0;
transition: all .3s;
top:10px;
transform: translateY(0);
position: relative;
}
#menu-title.on {
opacity: 1;
transform: translateY(-10px);
}
#close {
font-weight: 400;
font-size: 26px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
width: 43px;
height: 43px;
text-align: center;
border-radius: 40px;
position: absolute;
left: 20px;
top:40px;
opacity: 0;
transform: translateY(0);
transition: all .3s;
line-height: 1;
padding: 7px 0 0 3px;
}
#close:hover {
background: rgba(255, 255, 255, .25);
}
#close.on {
opacity: 1;
transform: translateY(-10px);
}
#menu-cards {
background: transparent;
perspective: 1000px;
}
#menu-cards:before, #menu-cards:after {
display: table;
content: " ";
}
#menu-cards:after {
clear: both;
}
.menu-card {
width: 33.33%;
padding: 8px;
float: left;
position: relative;
opacity: 0;
transition: all .3s;
transform: scale(.975);
}
.menu-card.on {
opacity: 1;
transform: scale(1);
}
.menu-card:hover {
transform: scale(1.025);
cursor: pointer;
}
.menu-card img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.menu-card h3 {
font-weight: 500;
font-size: 17px;
letter-spacing: .1em;
margin: 0;
}
#media (max-width: 758px) {
#menu-inner {
padding: 0 20px;
}
.menu-on #bk-wrap {
transform: translateX(100px) scale(1.3);
}
#menu-title {
padding-left: 55px;
}
.menu-card {
padding: 4px;
}
.menu-card h3 {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<meta charset="UTF-8">
<title>Jacinto</title>
</head>
<body>
<div id="bk-wrap">
<div id="bk-no-blur"></div>
<div id="bk-blur"></div>
</div>
<div id="bk-shadow"></div>
<p id="logo">meili</p>
<a href="#" id="menu-link">
<span class="menu-sub">Browse our</span>
<span class="menu-main">Products</span>
</a>
<div id="menu-wrap">
<div id="menu-inner"></div>
<h1 id="menu-title">Products</h1>
x
<div id="menu-cards">
<div class="menu-card">
<img src="IMG_0437.jpg" alt="clothes">
<h3>Clothes</h3>
</div>
<div class="menu-card">
<img src="https://images.unsplash.com/photo-1523730205978-59fd1b2965e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=691&q=80" alt="accessories">
<h3>Accessories</h3>
</div>
<div class="menu-card">
<img src="https://images.unsplash.com/photo-1532040675891-5991e7e3d0cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="shoes">
<h3>Shoes</h3>
</div>
</div>
</div>
</body>
</html>

CSS & Javascript transform rotateY to back of element

here is what im trying to do:
1-zoom in and rotate it in center(done)
2-open card(done)
3-View back of the card, and then go to the front of the opened card again.
Any tips on how to do it? im confused, ive tried with z-index and rotate transformations, but no luck at all.
Is it correct until now? what do you suggest and how can i achieve rotating to the back of the whole card, then to the front?
thank you in advance
function pers(){
document.getElementById("wrap").style.transform = "rotateX(0deg) rotate(0deg)";
document.getElementById("wrap").style.width = "250px";
document.getElementById("wrap").style.height = "500px";
}
function openCard() {
var button = document.getElementById('button');
if(button.innerHTML == 'Open Card') {
button.innerHTML = 'Close Card';
} else {
button.innerHTML = 'Open Card';
}
var cards = document.querySelectorAll('.card');
for(var i = 0; i < cards.length; i++) {
cards[i].classList.toggle('open');
}
}
body {
margin: 0;
background-color: grey;
/*background: radial-gradient(circle at center, rgba(50,50,50,1) 0%,rgba(14,14,14,1) 35%) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
transform-style: preserve-3d;
}
img {
max-width: 100%;
}
*, *:after, *:before {
box-sizing: border-box;
}
h2 {
font-family: "Dancing Script", serif;
font-weight: normal;
font-size: 45px;
color: #009500;
text-align: center;
}
.wrap {
width: 125px;
height: 250px;
position: relative;
transform: rotateX(40deg) rotate(15deg);
transform-style: preserve-3d;
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
transition: all 3s linear;
}
.card {
height: 100%;
width: 100%;
background-color: #fff;
border-radius: 2px;
position: relative;
border: 4px solid black;
text-align: center;
}
.card--front {
transform: rotateY(-20deg);
display: flex;
align-items: center;
justify-content: center;
transition: all 3.5s cubic-bezier(0.4, 0, 1, 1);
transform-origin: center left;
position: absolute;
top: 0;
left: 0;
z-index: 2;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card--front.open {
transform: rotateY(-180deg);
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
}
.card--front.back {
z-index: 0;
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
.card--inner {
overflow: hidden;
padding: 15px;
}
.card--inner h2 {
font-size: 32px;
}
.card--inner img {
max-width: 60%;
margin-top: 1.5em;
}
.card--inner.open:before {
transform: translateX(-155%);
opacity: 0.1;
}
.card--inner:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
opacity: 1;
transition: all 1s ease-in-out;
}
button {
-webkit-appearance: none;
background: #E53935;
border: 5px solid #9f1815;
border-width: 0 0 5px;
padding: 10px 20px;
width: 150px;
text-align: center;
display: block;
transform: rotateX(30deg);
margin-top: 20px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
}
button:active {
border-bottom-width: 2px;
margin-top: 23px;
outline: none;
}
button:focus {
outline: none;
}
<div class="wrap" id="wrap">
<div class="card card--inner" style="background-color:white;">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:37.5%;background-color:#8eb9ff;position:absolute;left:3%;top:41%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:30%;height:10%;background-color:#8eb9ff;position:absolute;right:3%;top:84%;margin:0px 5px;"></h2>
</div>
<div id="cc" style="background-color:white;" class="card card--front back" onclick="openCard();">
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:51%;margin:0px 5px;z-index;1000;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:3%;margin:0px 5px;z-index;1000;"></h2>
</div>
<div class="card card--front" onclick="openCard();">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3.5%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20.5%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:80%;height:6%;background-color:#8eb9ff;position:absolute;left:9%;top:43%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:4%;top:53%;margin:0px 5px;"></h2>
</div>
</div>
<button type="button" onclick="pers();setTimeout(openCard, 2000);" id="button">Open Card</button>

CSS Animation not working on IE11

I have a mouse over / mouse out animation on a couple of divs that is running great in Firefox and Chrome. However in IE it just won't work. Does anyone has any ideas why as this was working before?
var actual = 1;
var over = 0;
var over2 = 0;
function scrollleft() {
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
if (actual == 2) {
$("#vidstrip").animate({
left: "0"
});
actual = 1;
return;
}
stopAllYT();
}
function scrollright() {
if (actual == 2) {
$("#vidstrip").animate({
left: "+0"
});
actual = 1;
return;
}
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
stopAllYT();
}
$("#vidstop").on({
'mouseenter': function() {
overme();
}
});
$("#vidstop").on({
'mouseleave': function() {
outme();
}
});
//ARROWS OUT
function outme() {
if (over == 1) {
$(".leftnav").removeClass("lnavchange");
$(".rightnav").removeClass("lnavchange2");
$(".leftnav").toggleClass("lnavout");
$(".rightnav").toggleClass("lnavout2");
over = 0;
//alert(over);
//alert(over);
}
//alert('MouseOut');
// handle mouse event here!
}
//ARROWS IN
function overme() {
if (over == 0) {
//remove old class
$(".leftnav").removeClass("lnavout");
$(".rightnav").removeClass("lnavout2");
//add class
$(".leftnav").toggleClass("lnavchange");
$(".rightnav").toggleClass("lnavchange2");
over = 1;
//alert(over);
}
}
#subheader {
font-family: verdana;
text-align: center;
font-size: 28px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
#subcopy {
font-family: verdana;
text-align: center;
font-size: 14px;
font-weight: normal;
color: #000;
text-transform: capitalize;
}
#titlei {
font-family: verdana;
text-align: center;
font-size: 46px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
hr.undertitle {
background: #bfbfbf;
width: 150px;
border: 0;
height: 2px;
margin: 0 auto;
}
#subcopy {
line-height: 21px;
font-size: 14px;
text-align: center;
font-family: verdana;
}
#subhead {
line-height: 21px;
font-weight: bold;
font-size: 22px;
text-align: center;
font-family: verdana;
}
#Stage {
text-align: center;
width: 1060px;
margin-left: auto;
margin-right: auto;
}
#slidercontainer {
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#vidspeephole {
width: 724px;
height: 407px;
overflow: hidden;
float: left;
margin-left: 4px;
}
#vidsholder {
width: 2896px;
height: 407px;
position: relative;
float: left;
}
.vids {
width: 724px;
height: 407px;
float: left;
overflow: hidden;
}
#rightpromos {
height: 407px;
width: 208px;
position: relative;
float: left;
margin-left: 8px;
}
#rightarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
margin-left: 3px;
cursor: pointer;
}
#leftarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
cursor: pointer;
}
.featuredpages {
width: 208px;
height: 133px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.paging {
top: 10px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
.pbutton {
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.paging a.active {
background: #999 !important;
}
.paging a:hover {
background: #000 !important;
}
#row1 {
position: relative;
width: 1060px;
overflow: hidden;
height: 440px;
}
#row2 {
position: relative;
width: 1060px;
overflow: hidden;
height: 60px;
}
promocopy1 {
height: 31px;
padding: 5px;
color: #fff;
background-color: rgba(52, 52, 52, 0.85);
position: relative;
top: -41px;
font-family: Verdana, Geneva, sans-serif;
}
#stack {
height: 114px;
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.edgeLoad-EDGE-1207420 {
visibility: hidden;
}
#mainvidcontainer {
width: 1060px;
height: 698px;
overflow: hidden;
position: relative;
}
#vidstrip {
height: 626px;
width: 2120px;
position: relative;
}
#vidstop {
height: 626px;
width: 1060px;
position: relative;
overflow: hidden;
z-index: 0;
}
.thevids {
position: relative;
width: 1060px;
float: left;
height: 596px;
}
.vidscopy {
width: 1060px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
background-color: #999;
height: 30px;
text-align: center;
vertical-align: middle;
padding-top: 4px;
}
#navis {
z-index: 9;
width: 1060px;
height: 30px;
position: relative;
}
.leftnav {
position: absolute;
top: 300px;
left: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.rightnav {
position: absolute;
top: 300px;
right: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.pagingtop {
top: 8px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 40px;
z-index: 2;
}
.pbuttontop {
margin-left: 50%;
margin-right: 50%;
text-align: center;
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.pagingtop a.active {
background: #999 !important;
}
.pagingtop a:hover {
background: #000 !important;
}
.lnavchange {
animation-name: example;
animation-duration: 0.3s;
animation-fill-mode: forwards;
-webkit-animation-name: example;
-webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
-ms-transform-origin: left: 100px;
}
#keyframes example {
0% {
left: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
left: 22px;
opacity: 1;
}
}
.lnavchange2 {
animation-name: example2;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example2 {
0% {
right: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
right: 22px;
opacity: 1;
}
}
.lnavout {
animation-name: example3;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example3 {
0% {
left: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
left: -80px;
opacity: 0;
}
}
.lnavout2 {
animation-name: example4;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example4 {
0% {
right: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
right: -80px;
opacity: 0;
}
}
<div id="mainvidcontainer">
<div id="vidstop">
<div class="leftnav" onclick="scrollleft()"></div>
<div class="rightnav" onclick="scrollright()"></div>
<div id="vidstrip">
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/kf03Z7iiIk?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy1</div>
</div>
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/8a05WugVHFs?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy 2</div>
</div>
</div>
</div>
<div id="navis">
<div class="pagingtop">
<a class="pbuttontop" id="b1" onclick="anitop1(1)"></a>
<a class="pbuttontop" id="b2" onclick="anitop1(2)" style="margin-left:10px;"></a>
</div>
</div>
</div>
Edit: all good now it was just the youtube video that was being overlayed in Internet Explorer.
Thank you
Nuno
Got it!
It was the youtube video that was in front of the nav arrows.
In order to fix this for IE I had to add the wmode property to the youtube url:
wmode=opaque
Thank you all!
Hope this helps other people!

Categories