Css Reveal Animation Horizontal and stops 50%
1
I am trying to have the red cover background slide to the left and stop at approximately 50%, so the left col-6 background stays red and right col-6 is clear. Currently I am triggering this via button event but will eventually do it automatically on page load. I am rotating right now 90 degrees. How can I perform this slide animation via css transform/animation? I am new to css animation and not sure if I'm going about this at the right way. Is there a better approach to this type of reveal animation?
I am trying to follow this demo seen online:
https://dribbble.com/shots/3428458-Jobs-Page-Motion-Design#
.get-app-wrap
overflow: hidden;
.get-app-wrap .animate-wrap
position: relative;
.get-app-wrap .animate-wrap::after
content: "";
position: absolute;
width: 150%;
height: 150%;
background-color: #d4272e;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
.get-app-wrap .animate-wrap.animated::after
transform: rotate(90deg);
.get-app-wrap .app-texts
color: #000;
.get-app-wrap .app-texts .app-text-padding
padding-right: 11rem;
padding-left: 11rem;
.get-app-wrap .app-texts hr
color: #000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="get-app-wrap mt-5">
<div class="row animate-wrap">
<div class="col-sm-6 pr-0">
<div class="app-texts ">
<div class="app-text-padding pt-5 pb-5">
<h1>App headline here</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
aperiam autem!</p>
<h3 class="">Sub Headline Here</h3>
<ul>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
</ul>
<hr class="pr-0">
<div>
<h3 class="">Get the Apps</h3>
<div class="row">
<div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
alt="" class="img-fluid"></div>
<div class="col-sm-3">
<img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="app-image text-center pt-3">
<img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<button id="reveal-button">Reveal</button>
<script>
$("#reveal-button").on('click', function()
$(".animate-wrap").toggleClass('animated');
);
</script>
</body>
</html>jquery css css3 css-selectors css-animations
edited Nov 13 '18 at 22:47
dchi
212
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
add a comment |
1
I am trying to have the red cover background slide to the left and stop at approximately 50%, so the left col-6 background stays red and right col-6 is clear. Currently I am triggering this via button event but will eventually do it automatically on page load. I am rotating right now 90 degrees. How can I perform this slide animation via css transform/animation? I am new to css animation and not sure if I'm going about this at the right way. Is there a better approach to this type of reveal animation?
I am trying to follow this demo seen online:
https://dribbble.com/shots/3428458-Jobs-Page-Motion-Design#
.get-app-wrap
overflow: hidden;
.get-app-wrap .animate-wrap
position: relative;
.get-app-wrap .animate-wrap::after
content: "";
position: absolute;
width: 150%;
height: 150%;
background-color: #d4272e;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
.get-app-wrap .animate-wrap.animated::after
transform: rotate(90deg);
.get-app-wrap .app-texts
color: #000;
.get-app-wrap .app-texts .app-text-padding
padding-right: 11rem;
padding-left: 11rem;
.get-app-wrap .app-texts hr
color: #000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="get-app-wrap mt-5">
<div class="row animate-wrap">
<div class="col-sm-6 pr-0">
<div class="app-texts ">
<div class="app-text-padding pt-5 pb-5">
<h1>App headline here</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
aperiam autem!</p>
<h3 class="">Sub Headline Here</h3>
<ul>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
</ul>
<hr class="pr-0">
<div>
<h3 class="">Get the Apps</h3>
<div class="row">
<div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
alt="" class="img-fluid"></div>
<div class="col-sm-3">
<img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="app-image text-center pt-3">
<img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<button id="reveal-button">Reveal</button>
<script>
$("#reveal-button").on('click', function()
$(".animate-wrap").toggleClass('animated');
);
</script>
</body>
</html>jquery css css3 css-selectors css-animations
edited Nov 13 '18 at 22:47
dchi
212
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
add a comment |
1
1
1
I am trying to have the red cover background slide to the left and stop at approximately 50%, so the left col-6 background stays red and right col-6 is clear. Currently I am triggering this via button event but will eventually do it automatically on page load. I am rotating right now 90 degrees. How can I perform this slide animation via css transform/animation? I am new to css animation and not sure if I'm going about this at the right way. Is there a better approach to this type of reveal animation?
I am trying to follow this demo seen online:
https://dribbble.com/shots/3428458-Jobs-Page-Motion-Design#
.get-app-wrap
overflow: hidden;
.get-app-wrap .animate-wrap
position: relative;
.get-app-wrap .animate-wrap::after
content: "";
position: absolute;
width: 150%;
height: 150%;
background-color: #d4272e;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
.get-app-wrap .animate-wrap.animated::after
transform: rotate(90deg);
.get-app-wrap .app-texts
color: #000;
.get-app-wrap .app-texts .app-text-padding
padding-right: 11rem;
padding-left: 11rem;
.get-app-wrap .app-texts hr
color: #000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="get-app-wrap mt-5">
<div class="row animate-wrap">
<div class="col-sm-6 pr-0">
<div class="app-texts ">
<div class="app-text-padding pt-5 pb-5">
<h1>App headline here</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
aperiam autem!</p>
<h3 class="">Sub Headline Here</h3>
<ul>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
</ul>
<hr class="pr-0">
<div>
<h3 class="">Get the Apps</h3>
<div class="row">
<div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
alt="" class="img-fluid"></div>
<div class="col-sm-3">
<img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="app-image text-center pt-3">
<img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<button id="reveal-button">Reveal</button>
<script>
$("#reveal-button").on('click', function()
$(".animate-wrap").toggleClass('animated');
);
</script>
</body>
</html>jquery css css3 css-selectors css-animations
edited Nov 13 '18 at 22:47
dchi
212
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
I am trying to have the red cover background slide to the left and stop at approximately 50%, so the left col-6 background stays red and right col-6 is clear. Currently I am triggering this via button event but will eventually do it automatically on page load. I am rotating right now 90 degrees. How can I perform this slide animation via css transform/animation? I am new to css animation and not sure if I'm going about this at the right way. Is there a better approach to this type of reveal animation?
I am trying to follow this demo seen online:
https://dribbble.com/shots/3428458-Jobs-Page-Motion-Design#
.get-app-wrap
overflow: hidden;
.get-app-wrap .animate-wrap
position: relative;
.get-app-wrap .animate-wrap::after
content: "";
position: absolute;
width: 150%;
height: 150%;
background-color: #d4272e;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
.get-app-wrap .animate-wrap.animated::after
transform: rotate(90deg);
.get-app-wrap .app-texts
color: #000;
.get-app-wrap .app-texts .app-text-padding
padding-right: 11rem;
padding-left: 11rem;
.get-app-wrap .app-texts hr
color: #000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="get-app-wrap mt-5">
<div class="row animate-wrap">
<div class="col-sm-6 pr-0">
<div class="app-texts ">
<div class="app-text-padding pt-5 pb-5">
<h1>App headline here</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
aperiam autem!</p>
<h3 class="">Sub Headline Here</h3>
<ul>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
</ul>
<hr class="pr-0">
<div>
<h3 class="">Get the Apps</h3>
<div class="row">
<div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
alt="" class="img-fluid"></div>
<div class="col-sm-3">
<img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="app-image text-center pt-3">
<img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<button id="reveal-button">Reveal</button>
<script>
$("#reveal-button").on('click', function()
$(".animate-wrap").toggleClass('animated');
);
</script>
</body>
</html>.get-app-wrap
overflow: hidden;
.get-app-wrap .animate-wrap
position: relative;
.get-app-wrap .animate-wrap::after
content: "";
position: absolute;
width: 150%;
height: 150%;
background-color: #d4272e;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
.get-app-wrap .animate-wrap.animated::after
transform: rotate(90deg);
.get-app-wrap .app-texts
color: #000;
.get-app-wrap .app-texts .app-text-padding
padding-right: 11rem;
padding-left: 11rem;
.get-app-wrap .app-texts hr
color: #000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="get-app-wrap mt-5">
<div class="row animate-wrap">
<div class="col-sm-6 pr-0">
<div class="app-texts ">
<div class="app-text-padding pt-5 pb-5">
<h1>App headline here</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
aperiam autem!</p>
<h3 class="">Sub Headline Here</h3>
<ul>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
</ul>
<hr class="pr-0">
<div>
<h3 class="">Get the Apps</h3>
<div class="row">
<div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
alt="" class="img-fluid"></div>
<div class="col-sm-3">
<img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="app-image text-center pt-3">
<img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<button id="reveal-button">Reveal</button>
<script>
$("#reveal-button").on('click', function()
$(".animate-wrap").toggleClass('animated');
);
</script>
</body>
</html>.get-app-wrap
overflow: hidden;
.get-app-wrap .animate-wrap
position: relative;
.get-app-wrap .animate-wrap::after
content: "";
position: absolute;
width: 150%;
height: 150%;
background-color: #d4272e;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
.get-app-wrap .animate-wrap.animated::after
transform: rotate(90deg);
.get-app-wrap .app-texts
color: #000;
.get-app-wrap .app-texts .app-text-padding
padding-right: 11rem;
padding-left: 11rem;
.get-app-wrap .app-texts hr
color: #000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="get-app-wrap mt-5">
<div class="row animate-wrap">
<div class="col-sm-6 pr-0">
<div class="app-texts ">
<div class="app-text-padding pt-5 pb-5">
<h1>App headline here</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
aperiam autem!</p>
<h3 class="">Sub Headline Here</h3>
<ul>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
</ul>
<hr class="pr-0">
<div>
<h3 class="">Get the Apps</h3>
<div class="row">
<div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
alt="" class="img-fluid"></div>
<div class="col-sm-3">
<img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="app-image text-center pt-3">
<img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<button id="reveal-button">Reveal</button>
<script>
$("#reveal-button").on('click', function()
$(".animate-wrap").toggleClass('animated');
);
</script>
</body>
</html>jquery css css3 css-selectors css-animations
jquery css css3 css-selectors css-animations
edited Nov 13 '18 at 22:47
dchi
212
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
edited Nov 13 '18 at 22:47
dchi
212
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
edited Nov 13 '18 at 22:47
dchi
212
edited Nov 13 '18 at 22:47
dchi
212
edited Nov 13 '18 at 22:47
dchi
212
212
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
asked Nov 13 '18 at 22:38
Anu RajanAnu Rajan
392625
392625
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Instead of rotate you should use the scaleX property
.get-app-wrap .animate-wrap.animated::after
transform: scaleX(.32);
Here you have a codepen, let me know if that help!
You can add a class to the div with the text, for example .show-text
<div class="row animate-wrap">
<div class="col-sm-6 show-text pr-0">
And then this
.col-sm-6.show-text
z-index: 2;
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
great, do i z-index the text so that it shows ?
– Anu Rajan
Nov 14 '18 at 15:53
1
Yes, I added the explanation to the answer, check the codepen, it's updated
– MartinBA
Nov 14 '18 at 16:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290561%2fcss-reveal-animation-horizontal-and-stops-50%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Instead of rotate you should use the scaleX property
.get-app-wrap .animate-wrap.animated::after
transform: scaleX(.32);
Here you have a codepen, let me know if that help!
You can add a class to the div with the text, for example .show-text
<div class="row animate-wrap">
<div class="col-sm-6 show-text pr-0">
And then this
.col-sm-6.show-text
z-index: 2;
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
great, do i z-index the text so that it shows ?
– Anu Rajan
Nov 14 '18 at 15:53
1
Yes, I added the explanation to the answer, check the codepen, it's updated
– MartinBA
Nov 14 '18 at 16:05
add a comment |
1
Instead of rotate you should use the scaleX property
.get-app-wrap .animate-wrap.animated::after
transform: scaleX(.32);
Here you have a codepen, let me know if that help!
You can add a class to the div with the text, for example .show-text
<div class="row animate-wrap">
<div class="col-sm-6 show-text pr-0">
And then this
.col-sm-6.show-text
z-index: 2;
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
great, do i z-index the text so that it shows ?
– Anu Rajan
Nov 14 '18 at 15:53
1
Yes, I added the explanation to the answer, check the codepen, it's updated
– MartinBA
Nov 14 '18 at 16:05
add a comment |
1
1
1
Instead of rotate you should use the scaleX property
.get-app-wrap .animate-wrap.animated::after
transform: scaleX(.32);
Here you have a codepen, let me know if that help!
You can add a class to the div with the text, for example .show-text
<div class="row animate-wrap">
<div class="col-sm-6 show-text pr-0">
And then this
.col-sm-6.show-text
z-index: 2;
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
Instead of rotate you should use the scaleX property
.get-app-wrap .animate-wrap.animated::after
transform: scaleX(.32);
Here you have a codepen, let me know if that help!
You can add a class to the div with the text, for example .show-text
<div class="row animate-wrap">
<div class="col-sm-6 show-text pr-0">
And then this
.col-sm-6.show-text
z-index: 2;
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
edited Nov 14 '18 at 16:03
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
answered Nov 14 '18 at 0:28
MartinBAMartinBA
7161213
7161213
great, do i z-index the text so that it shows ?
– Anu Rajan
Nov 14 '18 at 15:53
1
Yes, I added the explanation to the answer, check the codepen, it's updated
– MartinBA
Nov 14 '18 at 16:05
add a comment |
great, do i z-index the text so that it shows ?
– Anu Rajan
Nov 14 '18 at 15:53
1
Yes, I added the explanation to the answer, check the codepen, it's updated
– MartinBA
Nov 14 '18 at 16:05
great, do i z-index the text so that it shows ?
– Anu Rajan
Nov 14 '18 at 15:53
great, do i z-index the text so that it shows ?
– Anu Rajan
Nov 14 '18 at 15:53
1
1
Yes, I added the explanation to the answer, check the codepen, it's updated
– MartinBA
Nov 14 '18 at 16:05
Yes, I added the explanation to the answer, check the codepen, it's updated
– MartinBA
Nov 14 '18 at 16:05
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290561%2fcss-reveal-animation-horizontal-and-stops-50%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
