Gostaria muito de aprender este efeito nas vantagens do aplicativo no site https://www.linx.com.br/payhub/shopbit/?gclid=EAIaIQobChMI65qB46-n3wIVEoORCh1Xxg9iEAAYASAAEgJlS_D_BwE
Alguém sabe como fazer esse efeito visto acima?
Eu tentei desta forma usando parallax
e border-image
juntamente com o tabs
do Bootstrap 4
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 500px;
}
.borda {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(phone.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
.parallax {
/* The image used */
background-image: url('https://img.elo7.com.br/product/zoom/FBCE34/adesivo- paisagem-praia-decorando-com-adesivos.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="container">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</nav>
<div class="col-sm-3 col-3 borda">
<div class="parallax"></div>
<div id="section1" class="bg-success">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div class="parallax"></div>
<div id="section2" class="bg-warning">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div class="parallax"></div>
<div id="section3" class="bg-secondary">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>