how to add the same carousel multiple times on the same page? - javascript

i'm new to web and i want to use this javascript code multiple times on the same page for multiple carousels but it only works on the first carousel , i tried changing names but it did not help !
this is the js code:
const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
});
and this is the html just so you know about the names i made it short and delete all items so you can read it faster if you want to run it , you should add 8 or more items :
<div id="main">
<div class="carousel__container">
<main class="grid-item main">
<div class="items">
<div class="item item1">
<div class="carousel-item">
<img class="carousel-item__img" src=" " alt="img">
<div class="panel1 ">
</div>
<div class="info ">
<a>
<h3>writer : </h3>
</a>
<a>
<h3>name : </h3>
</a>
<a>
<h3>price : </h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and the css :
.carousel {
margin: 5px;
width: 100%;
overflow: scroll;
position: relative;
box-shadow: border-box;
}
.carousel__container {
white-space: nowrap;
margin: 40px 0px;
padding-bottom: 10px;
}
.carousel-item {
background: rgb(136, 129, 116);
width: 190px;
height: auto;
border-radius: 20px;
overflow: hidden;
margin-right: 10px;
display: inline-block;
cursor: pointer;
transition: 450ms all;
transform-origin: center left;
position: relative;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.26);
}
.carousel-item .panel1 {
position: absolute;
top: 0;
right: -50%;
width: 45px;
background-color: transparent;
display: flex;
align-items: center;
flex-flow: column;
opacity: 1;
}
.carousel-item:hover .panel1 {
right: 0;
opacity: 1;
transition: 0.4s;
}
.carousel-item .panel1 a {
font-size: 20px;
color: #dbd6d0;
margin: 15px 0;
}
.carousel-item .panel1 a:hover {
color: rgba(255, 255, 255, 0.9);
}
.carousel-item .info {
text-align: center;
line-height: 20px;
margin-top: -10px;
font-family: 'Amita', cursive;
margin-bottom: 10px;
}
.carousel-item .info h3 {
color: #333;
padding-top: 8px;
cursor: pointer;
font-family: danstevis;
letter-spacing: 1px;
font-size: 14px;
}
.carousel-item~.carousel-item {
transform: translate3d(20px, 0, 0);
}
.carousel__container:hover .carousel-item:hover {
transform: scale(1.09);
opacity: 1;
}
.carousel-item__img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 0.5px 0.5px 0 rgba(0, 0, 0, 0.26);
}
.carousel__container:hover .carousel-fitem:hover {
transform: scale(1.09);
opacity: 1;
}
.items::-webkit-scrollbar {
height: 15px;
}
.items::-webkit-scrollbar-track {
-webkit-box: inset 0 0 6px rgba(0, 0, 0, 0.26);
border-radius: 10px;
}
.items::-webkit-scrollbar-track-piece {
max-width: 100px;
}
.items::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #fff;
background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#dbc9a827), to(#968a753b), color-stop(0.6, #9482672c));
}
.carousel::-webkit-scrollbar {
display: none;
}
#supports(display: grid) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
}
.items {
position: relative;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
transition: all 0.20s;
transform: scale(0.98);
will-change: transform;
user-select: none;
cursor: pointer;
}
.items.active {
background: rgba(255, 255, 255, 0.281);
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
.item {
display: inline-block;
background: rgb(255, 255, 255);
min-height: 300px;
min-width: 100px;
margin: 2em 1em;
}
}

You create several items in your carousel:
<div class="carousel-item">
<img class="carousel-item__img" src=" " alt="img">
<div class="panel1 ">
</div>
After that it depends a lot on the placement you want

Related

Javascript/CSS: donation progress bar with intervals works incorrectly

I am a newbie in Javascript. I have created a 'donation progress bar' with intervals. The bar is activated by a button; seems it works but incorrectly.
I would like that, once activated, the bar starts from beginning to the end in a fluid movement; instead it starts at 1/4 of its width and it goes with intervals.. also appears a border radius to the bar itself while progressing and I can not remove it.
Any idea how I can fix this?
Thanks in advance!
function move() {
let elem = document.getElementById("progress-bar");
let stepValue = 0;
let id = setInterval(frame, 500);
function frame() {
if (stepValue >= 100) {
clearInterval(id);
} else {
elem.style.width = stepValue + 10 + "%";
elem.innerHTML = stepValue + 10 + "%";
stepValue = stepValue + 10;
}
}
}
body{
max-width: 75%;
margin: auto;
}
.progress-goals {
margin: 20px auto 0;
display: flex;
justify-content: space-between;
}
.progress-goals h3 {
display: inline-block;
}
.progress-goals:last-child {
flex: 1;
}
.progress-bg {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0px auto 0px;
height: 78px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 10px #ccc;
-webkit-box-shadow: inset 0 0 10px #ccc;
box-shadow: inset 0 0 10px #ccc;
}
.goal-bar {
background-color: rgb(58, 58, 58);
width: 5px;
height: 78px;
border-radius: 15px;
}
.progress-bar {
display: block;
height: 100%;
width: 0px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.8) 18%,
rgba(28, 53, 120, 0.8),
rgba(220, 24, 27, 0.8)
);
position: absolute;
overflow: hidden;
font-size: 15px;
text-align: center;
color: white;
transition: all 700ms ease;
}
.progress-btn-container {
display: grid;
place-items: center;
height: 50px;
}
.progress-btn {
/* display: block; */
cursor: pointer;
margin: auto;
display: inline-block;
color: #444;
background-color: #fff;
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
text-transform: uppercase;
font-family: inherit;
font-weight: 600;
}
.progress-btn:hover {
color: #555;
background-color: #f1f1f1;
padding: 9px;
border: 1px solid #555;
}
<div class="progress-goals">
<h3 class="no-goal">$0</h3>
<h3 class="first-goal">$1,000</h3>
<h3 class="second-goal">$10,000</h3>
<h3 class="last-goal">$100,000</h3>
</div>
<div class="progress-bg" id="progress-bg">
<div class="goal-bar"></div>
<div class="goal-bar"></div>
<div class="goal-bar"></div>
<div class="goal-bar"></div>
<div class="progress-bar" id="progress-bar">
</div>
</div>
<div class="progress-btn-container">
<button class="progress-btn" onclick="move()">total donated</button>
</div>
You can increase the setInterval method's frequency by reducing the interval time to a smaller value and also adjust the stepValue variable accordingly to smoothen the progressbar.
See the following code:
function move() {
let elem = document.getElementById("progress-bar");
let stepValue = 0;
let id = setInterval(frame, 50);
function frame() {
if (stepValue >= 100) {
clearInterval(id);
} else {
elem.style.width = stepValue + 1 + "%";
elem.innerHTML = stepValue + 1 + "%";
stepValue = stepValue + 1;
}
}
}
body {
max-width: 75%;
margin: auto;
}
.progress-goals {
margin: 20px auto 0;
display: flex;
justify-content: space-between;
}
.progress-goals h3 {
display: inline-block;
}
.progress-goals:last-child {
flex: 1;
}
.progress-bg {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0px auto 0px;
height: 78px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 10px #ccc;
-webkit-box-shadow: inset 0 0 10px #ccc;
box-shadow: inset 0 0 10px #ccc;
}
.goal-bar {
background-color: rgb(58, 58, 58);
width: 5px;
height: 78px;
border-radius: 15px;
}
.progress-bar {
display: block;
height: 100%;
width: 0px;
background: linear-gradient( to bottom, rgba(255, 255, 255, 0.8) 18%, rgba(28, 53, 120, 0.8), rgba(220, 24, 27, 0.8));
position: absolute;
overflow: hidden;
font-size: 15px;
text-align: center;
color: white;
transition: all 700ms ease;
}
.progress-btn-container {
display: grid;
place-items: center;
height: 50px;
}
.progress-btn {
/* display: block; */
cursor: pointer;
margin: auto;
display: inline-block;
color: #444;
background-color: #fff;
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
text-transform: uppercase;
font-family: inherit;
font-weight: 600;
}
.progress-btn:hover {
color: #555;
background-color: #f1f1f1;
padding: 9px;
border: 1px solid #555;
}
<div class="progress-goals">
<h3 class="no-goal">$0</h3>
<h3 class="first-goal">$1,000</h3>
<h3 class="second-goal">$10,000</h3>
<h3 class="last-goal">$100,000</h3>
</div>
<div class="progress-bg" id="progress-bg">
<div class="goal-bar"></div>
<div class="goal-bar"></div>
<div class="goal-bar"></div>
<div class="goal-bar"></div>
<div class="progress-bar" id="progress-bar">
</div>
</div>
<div class="progress-btn-container">
<button class="progress-btn" onclick="move()">total donated</button>
</div>
Here I have set the interval to 50ms and the stepValue is increased by 1% at every interval.
function move() {
let bar = document.getElementById("progress-bar");
let donations = 0;
bar.style.width = `0%`;
setInterval(function () {
if (donations < 100000) {
donations += 1;
bar.style.width = `${(donations/100000) * 100}%`;
}
}, 1000);
}
This should give you a more accurate increase of the progress bar. However, your goal bars won't reflect it properly because the scaling is off.
If you want the goal bars to be more accurate, you can try moving them left relative to the parent using percentages (with absolute positioning). For example, 50% of the progress bar would represent 50,000.

Javascript Animated Skill Bar On Scroll

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

CSS z-index property and javascript background mouse interaction

I'm trying to add a radial gradient as a background of my blogpost card.
This radial gradient should follow the cursor when the
blog post card is hovered. Here here my little code example about the
effect ( https://codepen.io/D_s/pen/OJNpNBV ).
The problem is that doesn't work as expected because the other div elements of the card (title, image, tags, button) are interfering with the hovering. How i can solve this?
Here is the code of the blog post card:
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
Thank you for the help!
Instead of using e.target.getBoundingClientRect() and .left/.right which will change as the child elements are hovered, consider using the .offsetLeft/.offsetRight of the .card element itself.
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let x = e.clientX - backgroundgradient.offsetLeft;
let y = e.clientY - (backgroundgradient.offsetTop - window.pageYOffset);
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>
An example with multiple card elements...
let cards = document.querySelectorAll('.card');
for (let card of cards) {
card.onmousemove = function(e) {
let x = e.clientX - card.offsetLeft;
let y = e.clientY - (card.offsetTop - window.pageYOffset);
card.style.setProperty('--x', x + 'px');
card.style.setProperty('--y', y + 'px');
}
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>

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

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

CSS & Javascript transform rotateY to back of element

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

Categories