I'm trying to do some page transitions for a project I'm working on, I have an animated overlay that comes onto the screen when the user is navigating the site using Barba but I'm having an issue.
I want a logo centered on the page that rolls in with the overlay but I need it to be positioned separately from the overlay since any transform on the overlay would affect the logo as well. (I want the logo to mask with the overlay element)
What I've tried :
Switching around the Element hierarchy/Z-index (I'm sure the problem lies somewhere in here)
Trying different transforms
Messing with Max Width (Had some success but I need the transform origin property)
Example -
let transitionOpen = false;
$('.transition-cta').on("click", function() {
if (transitionOpen === false) {
$('.transition-background').css("transform", "scaleX(1)");
$(this).css("color", "white");
transitionOpen = true;
} else {
$('.transition-background').css("transform", "scaleX(0)");
$(this).css("color", "black");
transitionOpen = false;
}
});
body {
background-color: lightblue;
}
.someContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-wrapper {
overflow: hidden;
}
.transition-background {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
transition: 0.7s ease-in-out;
background-color: #1f1f1f;
transform: scaleX(0);
z-index: 2;
}
.transition-center {
background-image: url('https://i.imgur.com/6um9G9h.png');
z-index: 2;
width: 150px;
height: 150px;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-cta {
text-decoration: underline;
cursor: pointer;
z-index: 3;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
<div class="transition-background"></div>
<!-- I want to clip this with the transition background -->
<div title="I only want this to show with the transition overlay" class="transition-center"></div>
</div>
<div class="transition-cta">Trigger Transition</div>
<div class="someContent">
<h1>Some Content</h1>
</div>
(The globe should roll in with the overlay)
This feels like an extremely simple problem but I'm really struggling to solve it. I can't tell if I'm burned out or this is actually as complicated as my brain is making it.
Thanks!
Use a clip-path animation instead and you can simplify your code by having the logo as background of the transition-wrapper
let transitionOpen = false;
$('.transition-cta').on("click", function() {
$('.transition-wrapper').toggleClass('show');
if (transitionOpen === false) {
$(this).css("color", "white");
transitionOpen = true;
} else {
$(this).css("color", "black");
transitionOpen = false;
}
});
body {
background-color: lightblue;
}
.someContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-wrapper {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
transition: 0.7s ease-in-out;
background: url('https://i.imgur.com/6um9G9h.png') center/150px 150px no-repeat;
background-color: #1f1f1f;
clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
z-index: 3;
}
.transition-wrapper.show {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.transition-cta {
text-decoration: underline;
cursor: pointer;
z-index: 3;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
</div>
<div class="transition-cta">Trigger Transition</div>
<div class="someContent">
<h1>Some Content</h1>
</div>
I would do something like:
$('.transition-cta').on("click", function() {
$('.transition-wrapper').toggleClass('opened');
$('.transition-content').animate({ width: 'toggle' }, 800);
});
body {
background: lightblue;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-content {
background-color: #1f1f1f;
display: none;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 100%;
}
.transition-cta {
position: relative;
text-decoration: underline;
z-index: 999;
}
.transition-wrapper.opened .transition-cta {
color: #fff;
}
.transition-content__inner {
width: 100vw;
}
.transition-content__inner img {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transition-wrapper">
<div class="transition-cta">Trigger Transition</div>
<div class="content">
<h1>Some Content</h1>
</div>
<div class="transition-content">
<div class="transition-content__inner">
<img src="https://i.imgur.com/6um9G9h.png"/>
</div>
</div>
</div>
Related
I have a loading element that I want to display on the click of a certain button. I have tried various methods including updating the visibility and display, as well as adding a "show" classList to the div onclick (current code). Nothing has worked so far and I am desperate. I would really appreciate any help. Thanks :)
document.getElementById('text-generate-button').onclick = () => {
parent.postMessage({
pluginMessage: {
type: 'placeholder-frame'
}
}, '*')
const loader = document.getElementById('loader');
loader.classList.add("show")
}
.loader {
opacity: 0;
background: #ffffff;
/* background: radial-gradient(#222, #000); */
bottom: 0;
left: 0;
right: 0;
top: 0;
/* z-index: 99999; */
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}
.loader.show {
background: #ffffff;
/* background: radial-gradient(#222, #000); */
bottom: 0;
left: 0;
right: 0;
top: 0;
/* z-index: 99999; */
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}
.loader-inner {
bottom: 0;
height: auto;
left: 0;
margin: auto;
position: relative;
right: 0;
top: 0;
width: 100px;
padding: 8px;
}
.loader-line-wrap {
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: #EB6A6F;
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: #F6BA48;
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: #B5D643;
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: #50CFD4;
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: #9665D4;
height: 34px;
width: 34px;
top: 35px;
}
#keyframes spin {
0%,
15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class="footer">
<div class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
I didn't dig deep whether there is a better way
but one thing you can do is in your HTML set
<div class="loader" id="loader>
and in your JS
loader.classList.toggle("loader")
here is running version : https://jsbin.com/boromarugo/edit?html,css,js,output
there should be cleaner way but you get the idea
Here is an example: https://codepen.io/jon424/pen/XWzGNLe
I have a button here that lets you toggle the visibility of an image. When the button is clicked, the image disappears from the bottom to the top. When you click the button again, the image reappears from the top to the bottom.
I would like the transition to move in the same direction each time. So, when the user sees the image and clicks on the button, the image disappears from the bottom to the top. When the user clicks the button again, the image reappears from the bottom to the top.
Is there a way to use transitions without this kind of “alternating” activity?
HTML
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 covering"></div>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
margin: 10px;
}
.child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.covering {
z-index: 1;
background: #fff;
transition: transform 1s ease-in-out;
transform: translateY(100%);
}
.covered {
transform: translateY(0%);
}
JS
const firstTarget = document.querySelector(".firstTarget");
const covering = document.querySelector(".covering");
document.querySelector('button').addEventListener('click', () => { document.querySelector('.covering').classList.toggle('covered');});
You can use keyframes for this, or listen to transitionend.
const btn = document.querySelector('button'),
cover = document.querySelector('.cover');
btn.addEventListener('click', ()=> {
if(cover.classList.contains('covered')){
cover.classList.add('remove_covered');
} else {
cover.classList.add('covered');
}
cover.ontransitionend = () => {
if(cover.classList.contains('remove_covered'))
cover.classList.remove('covered','remove_covered');
};
});
.child {
width: 300px;
height: 300px;
}
.parent {
position: relative;
width: 300px;
height: 300px;
}
.cover {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #fff;
transition: height 1s ease-in-out;
}
.covered {
height: 100%;
}
.remove_covered {
top: 0;
bottom: auto;
height: 0;
}
<button>Toggle</button>
<div class="parent">
<img class="child" src="https://picsum.photos/200/300">
<div class="cover"></div>
</div>
Is that what you want?
const targetClassList = document.querySelector(".image-item").classList;
document.querySelector("button").addEventListener("click", () => {
if (targetClassList.contains("open")) {
targetClassList.remove("open");
targetClassList.add("close");
} else {
targetClassList.add("open");
targetClassList.remove("close");
}
});
.parent {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
margin: 10px;
}
.child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.image-item {
z-index: 1;
background: #fff;
}
.close {
animation: closeAni 1s forwards;
}
.open {
animation: openAni 1s forwards;
}
#keyframes openAni {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
#keyframes closeAni {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
<button>Toggle</button>
<div class="parent">
<img class="child" src="https://picsum.photos/200/300">
<div class="child image-item"></div>
</div>
At the starting of 'zoomIn' animation the background: rgba(0, 0, 0, 0.5); comes along with it but what I am trying is to popup box to have zoomIn animation and the background: rgba(0, 0, 0, 0.5); should already be there.
And I am trying to implement smooth animation of 'backOutTop' after clicking Submit button in the popup box but:
1) The animation is not smooth, it happens very suddenly.
2) After the animation the popup box doesn't seem to hide even after I have set visibility: hidden;
If there's any other way to do that. Please do share. Thank You.
$(document).ready(() => {
setTimeout(() => {
$(".popUp").css('visibility', 'visible')
}, 500); //Automatically Pops up after 0.5 sec.
});
document.querySelector('.btn-name').addEventListener('click', () => {
document.querySelector('#popUpid').classList.remove('popUp');
document.querySelector('#popUpid').classList.add('popUpClose');
});
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
visibility: hidden;
animation: zoomIn;
animation-duration: 3s;
}
.popUpClose {
visibility: hidden;
animation: backOutUp;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
border: 3px solid black;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="popUp" id="popUpid">
<div class="popUpBox">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>
</body>
as per the question explanation, these are the little changes you need to do in your code.
$(document).ready(function() {
setTimeout(() => {
$(".popUp").css('visibility', 'visible')
}, 500); //Automatically Pops up after 0.5 sec.
$('.btn-name').click(function() {
$('#popUpid').addClass('popUpClose');
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
visibility: hidden;
animation: zoomIn;
animation-duration: 3s;
opacity: 1;
transition: opacity 1s;
}
.popUpClose {
opacity: 0;
animation: backOutUp;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
border: 3px solid black;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp" id="popUpid">
<div class="popUpBox">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>
for your still background and animation only on popUP.
$(document).ready(function() {
setTimeout(() => {
$(".popUpBox").addClass('show');
}, 500); //Automatically Pops up after 0.5 sec.
$('.btn-name').click(function() {
$('#popUpid').addClass('popUpClose');
setTimeout(() => {
$(".popUp").css('opacity','0');
}, 1800);
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
}
.popUpClose {
opacity: 0;
animation: backOutUpCustom;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0,0);
width: 200px;
height: 150px;
border: 3px solid black;
transition: all 3s;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.popUpBox.show {
transform: translate(-50%, -50%) scale(1,1);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
#keyframes backOutUpCustom {
0% {
-webkit-transform: scale(1);
transform: translate(-50%, -50%) scale(1,1);
opacity: 1
}
20% {
-webkit-transform: translate(-50%, 0) scale(0.7,0.7);
transform: translate(-50%, 0) scale(0.7,0.7);
opacity: .7
}
to {
-webkit-transform: translate(-50%, -700px) scale(0.7,0.7);
transform: translate(-50%, -700px) scale(0.7,0.7);
opacity: .7
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp">
<div class="popUpBox" id="popUpid">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>
here is my CodePen demo or you can run the snippet below.
In the original script, the front face of the cube is a slider, and when I hover my 'info-box' it shows the right side of it with some description (<p> an <a>).
The expected behavior is that as long as the user stays on the description, the element keeps having the .hover class given in the $('#info-box').hover() function
All was working fine until i tested it on chrome :(...
From what I understand, it seems to fires multiples mouseOver/mouseOut events when hovering and it messes and flicker everything up.
Should I use a setTimeout ?
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
backface-visibility:hidden;
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#
The problem was that I used backface-visibility: hidden on parent element. (see commented line in snippet)
Crazy but that solved my problem on Chrome browser, now everything works fine.
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
/*backface-visibility:hidden; <-- Causing the problem */
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#
here I am trying to move a div left to right with jquery. The js I have written is partially working. I can move the div as intended (left to right) in some pages in Chrome, Opera and Yandex browser, but it does not work at all in firefox, so I believe the implementation is not up to the par and there must be some more concrete and efficient ways of doing it. With the following code snippet, a div (a fb like pop-up) shows up followed by page load a few seconds later and the effect is sliding the div from left to right. There is a close button. Upon clicking the close button, the div shrinks back (now right to left effect). I have given full code with style for the ease of full understanding. Any insights you offer to me will be of great help. Thank you. (the js code is given at the end)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class = "modal-prompt modal-prompt-shown" id = "fb_like" style = "display: none; z-index: 10000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<style>
.modal-overlay {
/* overflow-y: scroll; */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.5);
/* dim the background */
cursor: pointer;
}
.modal-close-half-page {
background: none;
color: white;
font-weight: bold;
position: fixed;
right: 50px;
font-size: 14px;
}
.modal-prompt-half-page {
display: block;
height: 100%;
position: fixed;
width: 50%;
background-color: #1fc2ff;
top: 0;
left: 0;
z-index: 1000000;
}
.modal-prompt-half-page-arrow {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #1fc2ff;
position: absolute;
top: 50%;
right: -30px;
margin-top: -30px;
}
.modal-prompt-half-page-header {
font-weight: bold;
font-size: 57px;
padding: 0 40px;
text-align: right;
line-height: 58px;
color: white;
text-transform: inherit;
top: 50%;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-bottom: 0;
}
.social-prompt-button-facebook {
width: 101px;
height: 101px;
-moz-border-radius: 101px;
-webkit-border-radius: 101px;
border-radius: 101px;
background-color: white;
position: absolute;
left: 110%;
top: 50%;
margin-top: -51px;
}
.social-prompt-button-facebook .fb-like {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -24px;
}
.modal-prompt-half-page {
left: calc(-40% - 30px);
transition: left 0.4s ease;
width: 40%;
min-width: 450px;
}
.modal-overlay {
opacity: 0;
transition: opacity 0.4s ease;
top: 0;
}
.social-prompt-button-facebook {
overflow: hidden;
position: fixed;
top: 0;
bottom: 0;
left: calc(40% + 60px);
margin: auto 0;
width: 101px;
height: 101px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
transition: height 0.4s ease, width 0.4s ease, transform 0.4s ease;
}
.modal-copy-container{
font-size: 5vw;
line-height: 5vw;
margin-top: 0;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.modal-prompt-shown .modal-overlay {
opacity: 1;
}
.modal-prompt-shown .social-prompt-button-facebook {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#media (max-width: 1125px) {
.modal-prompt-half-page {
width: 450px;
left: -480px;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.social-prompt-button-facebook {
left: 510px;
}
.modal-copy-container {
font-size: 800 normal 3.125rem / 3.125rem WorkSans, sans-serif;
/* line-height: 56px; */
}
}
</style>
<div class = "modal-overlay"></div>
<div class = "modal-prompt-half-page">
<div class = "modal-close modal-close-half-page" onclick = "closeFB();">Close</div>
<h6 class = "modal-prompt-half-page-header modal-copy-container">If you liked reading this story, then Like our page!</h6>
<div class = "modal-prompt-half-page-arrow"></div>
<div class = "modal-prompt-half-page-cont clearfix">
<div class = "social-prompt-button-facebook">
<div class = "fb-like fb_iframe_widget" data-href = "#" data-layout = "button" data-action = "like" data-show-faces = "false" data-callback-id = "genmodalfb" data-keen-tracking-name = "newUserModalV1" data-keen-social-channel = "facebook" data-keen-custom = "Halfpage 1.32" fb-xfbml-state = "rendered" fb-iframe-plugin-query = "action=like&app_id=141861192518680&container_width=0&href=https%3A%2F%2Fwww.facebook.com%2FMicMedia&layout=button&locale=en_US&sdk=joey&show_faces=false">
<span style = "vertical-align: bottom; width: 49px; height: 20px;">
<iframe name = "f1be53ad29d6424" width = "1000px" height = "1000px" frameborder = "0" allowtransparency = "true" allowfullscreen = "true" scrolling = "no" title = "fb:like Facebook Social Plugin" src = "#" class = "" style = "border: none; visibility: visible; width: 49px; height: 20px;"></iframe>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
// $('.modal-prompt').css('display', 'block').fadeIn("slow", function () {});
$('.modal-prompt').animate({width: 'show'});
}, 5000);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-close").click(function () {
$(".modal-prompt").animate({
width: "hide"
});
});
});
</script>
Toggling 'hide' defaults to right-to-left
It doesn't work at all. I'm not sure why you're using so much code, but all you have to do for sliding to the left is use the JQuery animate function, like so:
$('#elementId').animate({
left: '50%',
}, 500 );
You can do this in sequence as to make it left to right and vice versa. No CSS is needed for animations or anything, just the basic stylings.