<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="reference"><a href="https://stripe.com/us/payments" target="_blank">REFERENCE</a></div>
<div class="container" onload="changePos()">
<div class="banner">RECENT UPDATES</div>
<ul class="ultra">
<li class="tab-0">
<strong>PAYMENTS</strong> <span class="date">JULY 9 </span></br>
<p>
Radar will now automatically allow any payment that is protected from being disputed for fraud due to a liability shift. For example, if the payment is verified by 3D Secure.</p>
</li>
<li class="tab-1">
<strong>DASHBOARD</strong> <span class="date">JULY 9 </span></br>
<p>
Upgrade to version 2.0 of our iOS Dashboard app, which includes a new design, an updated home screen, and iPhone X support.</p>
</li>
<li class="tab-2">
<strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Rules can now compare numerical metadata. For example, reviews could trigger if <strong><code>::customer_age:: < 21 </code></strong> (if you pass in custom metadata for a customer's age). </p>
</li>
<li class="tab-3">
<strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Upgrade to version 2.0 of our iOS Dashboard app, which includes a new design, an updated home screen, and iPhone X support.</p>
</li>
<li class="tab-4">
<strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Radar will now automatically allow any payment that is protected from being disputed for fraud due to a liability shift. For example, if the payment is verified by 3D Secure.</p>
</li>
</ul>
</div>
body{
font-family: 'Open Sans', sans-serif;
color: #525f7f;
}
a{
text-decoration:none;
}
p{
margin: 0px;
padding: 0px;
line-height: 22px;
font-weight: 400;
}
.reference a{
background: #8787ff;
display:inline-flex;
padding: 10px 30px;
color: white;
border-radius: 100px;
}
.container p:not(:first-child){
margin-top:10px
}
.container{
font-size: 14px;
margin: 0 auto;
max-width:400px;
position:relative;
top: 50px;
.banner{
display:inline;
position: absolute;
color: white;
line-height: 14px;
padding: 8px 20px;
border-radius: 100px;
background-color: #17d352;
z-index: 100;
top: -15px;
left: 10px;
}
}
.placeholder-1{
position:relative;
transform-origin: 50% 100%;
}
.container ul{
position:relative;
list-style:none;
}
.container ul li{
padding: 35px;
position:absolute;
left: 0;
right: 0;
top: 0;
transform-origin: 50% 100%;
border-radius: 4px;
.date{
margin-left: 10px;
color: #8898aa;
}
}
//Tweak the transition properties to make it smoother
.tab-0{
transform: translateY(-50px) scale(1.07);
opacity:0;
z-index:90;
filter:blur(10px);
transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96);
}
.tab-1{
opcaity: 1;
background-color: #fff;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
z-index:80;
transform: scale(1);
transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 100ms;
}
.tab-2{
transform:translateY(5px) scale(0.9);
opacity: 1;
z-index: 70;
background: #e2e7ed;
color:#e2e7ed;
transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 200ms;
}
.tab-3{
transform:translateY(55px) scale(0.8);
opacity: .5;
z-index: 60;
background: #e2e7ed;
color:#e2e7ed;
transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 300ms;
// transition: all 1s cubic-bezier(0.71, 0.01, 0.16, 1) 600ms;
}
.tab-4{
transform:translateY(50px) scale(0.7);
opacity: 0;
z-index: 50;
background: grey;
color:grey;
transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 400ms;
}
View Compiled
/*Struggling to find the right bezier.
Help me figure it out.
Hot points in css(fiddle with css there)*/
setInterval(changePos,5000)
function changePos(){
var x = document.getElementsByClassName("ultra")[0].childNodes;
x = Array.from(x)
// console.log(x);
for(var i=1; i<x.length;i+=2){
if(x[i].classList.contains("tab-0")){
x[i].classList.remove("tab-0");
x[i].classList.add("tab-4");
}
else if(x[i].classList.contains("tab-1")){
x[i].classList.remove("tab-1");
x[i].classList.add("tab-0");
}
else if(x[i].classList.contains("tab-2")){
x[i].classList.remove("tab-2");
x[i].classList.add("tab-1");
}
else if(x[i].classList.contains("tab-3")){
x[i].classList.remove("tab-3");
x[i].classList.add("tab-2");
}
else if(x[i].classList.contains("tab-4")){
x[i].classList.remove("tab-4");
x[i].classList.add("tab-3");
}
}
let y = x.filter((a)=> {
return a.className !== undefined;
})
console.log(y)
let z = findValue(y,"tab-1");
function findValue(arr, str){
for(let i=0; i <arr.length ;i++){
if(arr[i].className === str){
return arr[i].offsetHeight;
}
}
}
y.forEach((a)=>{
if(a.className==="tab-1"){
a.style.transform = `scale(1.0)`
} else if (a.className === "tab-2"){
a.style.transform = `translateY(${z-a.offsetHeight+30}px) scale(0.9)`
} else if (a.className === "tab-3"){
a.style.transform = `translateY(${z-a.offsetHeight+60}px) scale(0.8)`
} else if (a.className === "tab-4"){
a.style.transform = `translateY(${z-a.offsetHeight+100}px) scale(0.7)`
} else if (a.className === "tab-0"){
a.style.transform = `translateY(${z-a.offsetHeight-90}px) scale(1.08)`
}
})
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.