CSS Cell Effect

Question

CSS Cell Effect

Navigation

#1 by (-1 votes)

-3

I'd love to learn this effect on the advantages of the application on the site link

Effect seen in link

Doesanyoneknowhowtomakethiseffectseenabove?

Ihavetriedthiswayusingparallaxandborder-imagetogetherwithtabsBootstrap4

body{position:relative;}ul.nav-pills{top:20px;position:fixed;}div.col-8div{height:500px;}.borda{border:10pxsolidtransparent;padding:15px;border-image-source:url(phone.png);border-image-repeat:round;border-image-slice:30;border-image-width:20px;}.parallax{/*Theimageused*/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;}<divclass="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>

javascript html5 css

asked by anonymous 20.12.2018 / 15:48

1 answer

Error connecting to JDBC with local sql Server Loop End Error (Bug delete with char *)

score -1 · Answer 1

*{
	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>