2

Estou tentando abandonar o jQuery, porem, encontrei uma dificuldade agora, fazer um Filtro, estilo aqueles que se encontra em Portfolio, porem com JS Puro, so encontrei em jQuery ou CSS3 (na internet), nada com JS Puro, alguem conseguiria me ajudar? Realmente nao consegui fazer nada do genero com JS, nem consigo imaginar como fazer (alem de definir classes e dar display: none e block, mas nao fica tao legal. Um exemplo de como funciona é esse

1 Resposta 1

6

Vou lhe passar uns exemplos todos com CSS sem utilizar JavaScript.

Segue os exemplos:

    Exemplo 1:

    Link: JSFiddle ou CodePen

*Para testar o Exemplo 1 aqui mesmo:

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
section, header{
	display: block;
}
/* General Demo Style */
body{
	background: #e0e3ec;
	font-weight: 400;
	font-size: 15px;
	color: #393b40;
	overflow-y: scroll;
}
a{
	color: #333;
	text-decoration: none;
}
.container{
	width: 100%;
	position: relative;
	text-align: center;
}
.clr{
	clear: both;
}
.container > header{
	padding: 20px 30px 10px 30px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 35px;
	line-height: 35px;
	position: relative;
	font-weight: 400;
	color: #6d7aa1;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
	color: #8997c0;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2{
	font-size: 16px;
	font-style: italic;
	color: #82858e;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
/* Header Style */
.codrops-top{
	font-family:'Arial Narrow', Arial, sans-serif;
	line-height: 24px;
	font-size: 11px;
	background: #000;
	opacity: 0.9;
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
}
.codrops-top a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #ddd;
	display: block;
	float: left;
}
.codrops-top a:hover{
	color: #fff;
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: none;
	display: inline;
}

p.codrops-demos{
	text-align:center;
	display: block;
	padding: 14px;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    display: inline-block;
	border: 1px solid #6d7aa1;
	border-color: #7784aa #6d7aa1 #6d7aa1 #7784aa;
	padding: 4px 10px 3px;
	font-size: 13px;
	line-height: 18px;
	margin: 0px 3px;
	font-weight: 800;
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #8997c0;
	background: -moz-linear-gradient(top, #8997c0 0%, #6d7aa1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8997c0), color-stop(100%,#6d7aa1));
	background: -webkit-linear-gradient(top, #8997c0 0%,#6d7aa1 100%);
	background: -o-linear-gradient(top, #8997c0 0%,#6d7aa1 100%);
	background: -ms-linear-gradient(top, #8997c0 0%,#6d7aa1 100%);
	background: linear-gradient(top, #8997c0 0%,#6d7aa1 100%);
}
p.codrops-demos a:hover{
	background: #8997c0;
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
	color: #424d71;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
}
/* Media Queries */
@media screen and (max-width: 767px) {
	.container > header{
		text-align: center;
	}
	p.codrops-demos {
		position: relative;
		top: auto;
		left: auto;
	}
}







.ff-container{
	width: 564px;
	margin: 10px auto 30px auto;
}
.ff-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	width: 25%;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	float:left;
	box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);
}
.ff-container label.ff-label-type-all{
	border-radius: 3px 0px 0px 3px;
}
.ff-container label.ff-label-type-3{
	border-radius: 0px 3px 3px 0px;
}
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
	background: #646d93;
	background: -moz-linear-gradient(top, #646d93 0%, #7c87ad 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646d93), color-stop(100%,#7c87ad));
	background: -webkit-linear-gradient(top, #646d93 0%,#7c87ad 100%);
	background: -o-linear-gradient(top, #646d93 0%,#7c87ad 100%);
	background: -ms-linear-gradient(top, #646d93 0%,#7c87ad 100%);
	background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
	color: #424d71;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset;
}
.ff-container input{
	display: none;
}
.ff-items{
	position: relative;
	margin: 0px auto;
	padding-top: 20px;
}
.ff-items a{
	display: block;
	position: relative;
	padding: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	margin: 4px;
	width: 160px;
	height: 120px;
}
.ff-items a span{
	display: block;
	background: rgba(113,123,161, 0.9);
	font-style: italic;
	color: #fff;
	font-weight: bold;
	padding: 20px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 120px;
	height: 0px;
	overflow: hidden;
	opacity: 0;
	text-align: center;
	text-shadow: 1px 1px 1px #303857;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
	height: 80px;
	opacity: 1;
}
.ff-items li img{
	display: block;
}

.ff-items li{
	margin: 0px;
	float: left;
	height: 148px;
	width: 0px;
	-webkit-transform: scale(0,0);
	-moz-transform: scale(0,0);
	-o-transform: scale(0,0);
	-ms-transform: scale(0,0);
	transform: scale(0,0);
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
	width: 188px;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-o-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition: -webkit-transform 0.3s linear;
	-o-transition: -o-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3
{
	-webkit-transition: -webkit-transform 0.3s linear, width 0s linear 0.3s;
	-moz-transition: -moz-transform 0.3s linear, width 0s linear 0.3s;
	-o-transition: -o-transform 0.3s linear, width 0s linear 0.3s;
	-ms-transition: -ms-transform 0.3s linear, width 0s linear 0.3s;
	transition: transform 0.3s linear, width 0s linear 0.3s;
	-webkit-animation: scaleUp 0.3s linear 0.4s forwards;
	-moz-animation: scaleUp 0.3s linear 0.4s forwards;
	-o-animation: scaleUp 0.3s linear 0.4s forwards;
	-ms-animation: scaleUp 0.3s linear 0.4s forwards;
	animation: scaleUp 0.3s linear 0.4s forwards;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3)
{
	-webkit-animation: scaleDown 0.3s linear forwards;
	-moz-animation: scaleDown 0.3s linear forwards;
	-o-animation: scaleDown 0.3s linear forwards;
	-ms-animation: scaleDown 0.3s linear forwards;
	animation: scaleDown 0.3s linear forwards;
}
@-webkit-keyframes scaleUp {
	50% { width: 188px; -webkit-transform: scale(0,0); }
    100% { width: 188px; -webkit-transform: scale(1,1); }
}
@-webkit-keyframes scaleDown {
	0% { width: 188px;-webkit-transform: scale(1,1);}
	99% { width: 188px; -webkit-transform: scale(0,0);}
    100% { width: 0px; -webkit-transform: scale(0,0); }
}
@-moz-keyframes scaleUp {
	50% { width: 188px; -moz-transform: scale(0,0); }
    100% { width: 188px; -moz-transform: scale(1,1); }
}
@-moz-keyframes scaleDown {
	0% { width: 188px;-moz-transform: scale(1,1);}
	99% { width: 188px; -moz-transform: scale(0,0);}
    100% { width: 0px; -moz-transform: scale(0,0); }
}
@-o-keyframes scaleUp {
	50% { width: 188px; -o-transform: scale(0,0); }
    100% { width: 188px; -o-transform: scale(1,1); }
}
@-o-keyframes scaleDown {
	0% { width: 188px;-o-transform: scale(1,1);}
	99% { width: 188px; -o-transform: scale(0,0);}
    100% { width: 0px; -o-transform: scale(0,0); }
}
@-ms-keyframes scaleUp {
	50% { width: 188px; -ms-transform: scale(0,0); }
    100% { width: 188px; -ms-transform: scale(1,1); }
}
@-ms-keyframes scaleDown {
	0% { width: 188px;-ms-transform: scale(1,1);}
	99% { width: 188px; -ms-transform: scale(0,0);}
    100% { width: 0px; -ms-transform: scale(0,0); }
}
@keyframes scaleUp {
	50% { width: 188px; transform: scale(0,0); }
    100% { width: 188px; transform: scale(1,1); }
}
@keyframes scaleDown {
	0% { width: 188px; transform: scale(1,1);}
	99% { width: 188px; transform: scale(0,0);}
    100% { width: 0px; transform: scale(0,0); }
}
<div class="container">
   <section class="ff-container">
      <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
      <label for="select-type-all" class="ff-label-type-all">All</label>
      <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
      <label for="select-type-1" class="ff-label-type-1">Web Design</label>
      <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
      <label for="select-type-2" class="ff-label-type-2">Illustration</label>
      <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
      <label for="select-type-3" class="ff-label-type-3">Icon Design</label>
      <div class="clr"></div>
      <ul class="ff-items">
         <li class="ff-item-type-2">
            <a href="#">
            <span>Chameleon</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/1.jpg" />
            </a>
         </li>
         <li class="ff-item-type-1">
            <a href="#">
            <span>Tutorials (wip)</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/2.jpg" />
            </a>
         </li>
         <li class="ff-item-type-2">
            <a href="#">
            <span>Flower</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/3.jpg" />
            </a>
         </li>
         <li class="ff-item-type-1">
            <a href="#">
            <span>Symplas website</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/4.jpg" />
            </a>
         </li>
         <li class="ff-item-type-3">
            <a href="#">
            <span>TRON: Mobile version</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/5.jpg" />
            </a>
         </li>
         <li class="ff-item-type-2">
            <a href="#">
            <span>Cake</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/6.jpg" />
            </a>
         </li>
         <li class="ff-item-type-1">
            <a href="#">
            <span>Tailoring accessories</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/7.jpg" />
            </a>
         </li>
         <li class="ff-item-type-3">
            <a href="#">
            <span>App icon</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/8.jpg" />
            </a>
         </li>
         <li class="ff-item-type-1">
            <a href="#">
            <span>Event Planning</span>
            <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/9.jpg" />
            </a>
         </li>
      </ul>
   </section>
</div>


    Exemplo 2:

    Link: JSFiddle ou CodePen


    Exemplo 3:

    Link: JSFiddle ou CodePen

Obs: Coloquei os exemplos no JSFiddle e no CodePen para poder uma melhor visualização.

2
  • Excelente, muito bom.
    – Miguel
    Commented 18/08/2017 às 15:59
  • Muito bom mesmo. Commented 18/08/2017 às 16:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .