CSS Cellular Effect

Question

CSS Cellular Effect

Asked 5 years, 11 months ago

Viewed 135 times

-3

I would love to learn this effect on the advantages of the app on the site https://www.linx.com.br/payhub/shopbit/? gclid=Eaiaiqobchmi65qb46-n3wIVEoORCh1Xxg9iEAAASAEgJlS_D_BwE

Effect seen on link

Does anyone know how to make that effect seen above?

I tried this way using parallax and border-image together with the tabs of 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>

2

It would be interesting if you put in your question some more details, or if you already have some code would help. This is a very quiet model to do, and there are several different ways to do it including only with CSS which is what I suggest...

– hugocsl

2018/12/20 at 15:02
ah yeah, so I don’t have any code yet, I tried a few things I researched, but unsuccessfully so I asked here. would like to know how to do or where to start

– annyk

2018/12/20 at 15:07
1

Anything you’ve ever tried can give you an idea of the problem you’re having. That’s the point of the site, we’re here to help you understand and solve a problem. Not to deliver a code ready, which ultimately would not help you grow at all, you understand. Try to tell us where your difficulty is, or exactly how far you’ve come and grabbed it because you no longer know how to proceed. It doesn’t need to be a beautiful example = the link, but something more basic just for you to test the dynamics and to work understand.

– hugocsl

2018/12/20 at 15:20
2

You can always open the developer tools and inspect the elements in question; so you will see which elements and which properties were used and seek to learn them.

– Woss

2018/12/20 at 15:20
Of course, I added the code I tried to do. Thank you guys

– annyk

2018/12/20 at 16:23

1 answer

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.

by Kcireh • 53 points · Answer 1 · 2018-12-28T20:52:57+00:00

*{
	text-align: center;
}

#geral{
	margin: 10px auto;
	background-color: #ddd;
	width: 300px;
	height: 350px;
	color: white;
	overflow:hidden;
}

#geral div{
	width: 300px;
	height: 0px;
	overflow: hidden;
	animation: aniOut 0.3s 1;
}	

#geral input[type="radio"]{display: none}

#geral input[type="radio"]:checked + div{
	display: block;
	height: 350px;
	animation: aniIn 0.3s 1;
	overflow:hidden;
}

@keyframes aniIn{
	0%{height: 0px}
	100%{height: 350px}
}

@keyframes aniOut{
	0%{height: 350px}
	100%{height: 0px}
}

#geral div:nth-child(4n+2){background-color: #2c3e50}
#geral div:nth-child(4n+4){background-color: #222}

<button><label for="c1">CONTEUDO 1</label></button>
<button><label for="c2">CONTEUDO 2</label></button>
<button><label for="c3">CONTEUDO 3</label></button>
<button><label for="c4">CONTEUDO 4</label></button>
<button><label for="c5">CONTEUDO 5</label></button>



<div id="geral">

	<input type="radio" id="c1" name="group">
	<div>
		<h1>teste 1</h1>
		<p>conteudo 1</p>
	</div>

	<input type="radio" id="c2" name="group">
	<div>
		<h1>teste 2</h1>
		<p>conteudo 2</p>
	</div>

	<input type="radio" id="c3" name="group">
	<div>
		<h1>teste 3</h1>
		<p>conteudo 3</p>
	</div>

	<input type="radio" id="c4" name="group">
	<div>
		<h1>teste 4</h1>
		<p>conteudo 4</p>
	</div>

		<input type="radio" id="c5" name="group">
	<div>
		<h1>teste 5</h1>
		<p>conteudo 5</p>
	</div>
</div>