How to make a horizontal scroll with transition? - javascript

I get stuck to add animated transition on the background carousels.
I am trying to create like pepsi.com website.
e.x: https://www.pepsi.com/#!products/diet-pepsi-caffeine-free
When you click on the button right / left they will shows transition.
This is my trial: https://codepen.io/dimassmacip/pen/yLMEJwp
Expected :
https://drive.google.com/file/d/1ZjGTwtaSiVEVipB3uVEgLPQUAcppr48C/view
Please Help me.
$(".cta").click(function() {
$(".transition").toggleClass("anim-trans");
});
* {
padding: 0;
margin: 0;
}
body {
background: #fff;
overflow-x: hidden;
font-family: arial;
}
.transition {
position: absolute;
height: 100%;
width: 30%;
background: #d6d6d6;
transform: skewX(-5deg) translateX(-50px);
transition: 2s all ease-in-out;
-webkit-transition: 2s all ease-in-out;
}
.content {
position: relative;
padding: 200px 0 0 200px;
color: #000;
z-index: 10;
height: 300px;
}
.cta {
outline: none;
border: none;
text-decoration: none;
text-transform: uppercase;
background: #202020;
color: #eaeaea;
box-sizing: border-box;
margin-top: 20px;
padding: 10px 40px;
}
.anim-trans {
animation: anim 4s ease-in-out;
}
#keyframes anim {
0% {}
20% {
z-index: 11;
\transform: skewX(5deg) translateX(-100%);
}
40% {
transform: skewX(0deg) translateX(0);
width: 100%;
z-index: 11;
box-shadow: 10px 10px 5px #eaeaea;
}
60% {
transform: skewX(3deg) translateX(0);
width: 100%;
z-index: 11;
box-shadow: 10px 10px 5px #eaeaea;
}
80% {
transform: skewX(1deg) translateX(-100%);
width: 60%;
z-index: 11;
box-shadow: 10px 10px 5px #eaeaea;
}
100% {
transform: skewX(-5deg) translateX(-50px);
width: 30%;
z-index: 1;
box-shadow: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="transition"></div>
<div class="content">
<h1>Heading title</h1>
<p>Lorem ipsum dolor sit amet</p>
<button class="cta">Click</button>
</div>

Related

HTML, Border Blocking Problem on Welcome Screen

The Code:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
//////////////////////////
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
.homepage {
display = 'none';
}
//////////////////////////
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends, How can I prevent the border from appearing when the welcome screen appears?
That means I want to see a border on the only main page. How can fix this on my code? I couldn't block the border during the welcome screen. I also added a picture of the desired situation. You can see it below. I am waiting for your help.
First define an id to body element, then write document.getelementbyID("definedID").style.border="solid 50px"; in your function(bodyOnLoad()). Therefore you have a animated border that scaling 0px to 50px on body.
You can use the code below: (in chrome, it will work more accurately than the snippet)
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
.all {
display:block;
border-style: none;
border-width: 0 px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
.all {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
document.getElementById('innerbody').style.border="solid 70px";
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<body id="innerbody" class="all">
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
<body>
</body>
<script type="text/javascript">
</script>
</html>
What you need to do is insert this line in your css border: none !important;
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
border:none !important;
}
Try Setting the border style for body to none in the css file.

Html welcoming screen animation switching problem

The Code:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
//////////////////////////
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
.homepage {
display = 'none';
}
//////////////////////////
</style>
<script>
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2500);
setTimeout(() => { const box = document.getElementById('visual'); box.style.display = 'none';}, 2500);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2500);
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<div id="visual" class="container-welcome">
<img src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</div>
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends,I have 2 questions. Firstly,How can I add a blink animation at the same angle after your smiley face turns a certain angle? In my code there is no blinking smiley feature.
Finally, how do I make the page border not visible on the welcoming page? so mean I don't want the border to appear on the welcoming screen. I have added Example images for this situation
I think this will help you. Add animation to your image and wait for finish animation(with delay function) then change the image with js.
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
});
});
}
body {
background-color: #A3EBB1;
color: white;
text-align: center;
}
.container-welcome {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>

Hover on the div "rectange" is not working

I have a div that has the name speech-bubble1 and I want to put a hover element to that, it will expand the scale however, it is not working, I have tried putting other hovering properties and they are working fine, please help me.
I want to scale the speech bubble once I hover over it. Thank you in advance!
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
Because you have given z-index: -1; remove or make it z-index:
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: 1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1:hover {
width: 100%;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
1"
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
and add:
.speech-bubble1:hover {
width: 100%;
}
If you just want scale the "speech bubble" when hover it, you need to :
FIRST = replace translate animation on <div class="text1">
SECOND = place a scale transform on <div class="speech-bubble1">
Like this :
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
}
.speech-bubble1:hover {
width: 584px;
height: 712px;
transform: scale(1.1);
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}

Hide div by clicking another div jQuery

I have a div which when clicked, height changes so that the rest of the content becomes visible.
But I have a button inside this div which I would like to use as a "close-button", to change the height back to it's original value so the content is hidden again, but it's not working.
Here is the code:
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function() {
$('.scrollClick').css("height", "27px");
});
.scrollClick{
font-family:inherit;
background-color: #000E52;
color: #fff;
text-align: center;
display: inline-block;
position: fixed;
z-index: 9999;
cursor: pointer;
right: 20px;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
transition: all 0.5s ease;
font-size: 16px;
max-width: 240px;
box-sizing: border-box;
text-align: center;
height: 27px;
overflow: hidden;
}
.dropContentBox{
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta{
display: inline-block;
position: relative;
background-color: #7CBD2B;
color: #333;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
transition: all 0.5s ease;
z-index:10;
}
.acceptCta:hover{
background-color: #88D41B;
}
.acceptCta:hover .arrow{
opacity: 1.0;
}
.arrow {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
opacity: 0;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.bouncer {
position: relative;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: border-color 0.5s ease;
animation: bouncer 2s infinite;
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollClick">
Viktig informasjon! Les her <i class="bouncer"></i>
<div class="dropContentBox"><img src="/content/cnm/137449/600x600-banner-include-info-dishwasher-2019-no.png?$banner$">
<div class="acceptCta">Jeg har lest og forstått <i class="arrow"></i></div>
</div>
</div>
</div>
So as you see in my jQuery code, I want the .scrollClick class to go back to it' original height, when clicking the .acceptCta div.
What am I doing wrong? Ty
The problem is that the click on your second button also triggers a click on your first button as the second button is within the first button. you can restructure your html or can stop propagation.
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function(e) {
e.stopPropagation();
$('.scrollClick').css("height", "27px");
});

Half circle animation start on button click

I'm trying to get my circle loader running. But didn't found how to get the animation running when clicking the Try it button.
Any ideas?
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>
Here the code: https://jsfiddle.net/pzc41skn/
Here is how you can achieve an animation on clicking of the button:
function myFunction() {
$('.liElem').remove();
$(".chart-skills").html('<div class="liElem" id="eins"></div>');
}
body {
font: normal 16px/1.5 'Roboto', sans-serif;
padding: 130px 0 0 0;
background: #f1f1f1;
}
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.chart-skills *,
.chart-skills::before {
box-sizing: border-box;
}
/* CHART-SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
position: relative;
width: 350px;
height: 175px;
overflow: hidden;
}
.chart-skills::before,
.chart-skills::after {
position: absolute;
}
.chart-skills::before {
content: '';
width: inherit;
height: inherit;
border: 45px solid rgba(211, 211, 211, .3);
border-bottom: none;
border-top-left-radius: 175px;
border-top-right-radius: 175px;
}
.chart-skills::after {
content: '';
left: 50%;
bottom: 10px;
transform: translateX(-50%);
font-size: 1.1rem;
font-weight: bold;
color: cadetblue;
}
.chart-skills .liElem {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
border: 45px solid;
border-top: none;
border-bottom-left-radius: 175px;
border-bottom-right-radius: 175px;
transform-origin: 50% 0;
transform-style: preserve-3d;
backface-visibility: hidden;
animation-fill-mode: forwards;
animation-duration: .4s;
animation-timing-function: linear;
}
.chart-skills #eins {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .4s;
}
.chart-skills #zwei {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .8s;
}
#keyframes rotate-one {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
/**
* 32% => 57.6deg
* 57.6 + 21.6 => 79.2deg
*/
}
}
#bottom {
transform: scale(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>

Categories