PSI 12ºANO » MÓDULO 17F - FERRAMENTAS DE ANIMAÇÃO GRÁFICA

PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO

1. Bootstrap 3 CSS Transform & Transition Effects

 - transform
http://www.w3schools.com/cssref/css3_pr_transform.asp

 - trasnsition
http://www.w3schools.com/css/css3_transitions.asp

EXEMPLO 1
Criar um efeito de zoom numa imagem com algum delay

<div class="col-sm-4">
<div class="zoom">
<img class="img-responsive img-center" src="img/n1.jpg" alt="">
</div>
<h2>#1</h2>
<p>....</p>
</div>

/* CSS */
.zoom img:hover
{
transform:scale(1.1);
}

.zoom img{
transition:all 0.3s easy 0s;
width:100%;
}

EXERCÍCIO 1

 

ver screenshot #1

1.1 Proceda ao download do template

http://startbootstrap.com/template-overviews/business-frontpage/

1.2. Personalize o template de acordo com o screenshot #1

1.3. Crie uma nova class que dê a cada imagem um efeito de zoom para o evento hover.

1.4. Crie uma nova class que dê a cada imagem um efeito de transição.

2. CSS Transitions Buttons

 - opacity
http://www.w3schools.com/cssref/css3_pr_opacity.asp

 - box-shadow
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

EXEMPLO 2
Criar um botão com vários efeitos

<div class="col-sm-4">
<div class="zoom">
<img class="img-responsive img-center" src="img/n1.jpg" alt="">
</div>
<h2>#1</h2>
<p>....
<span class="pull-right"><button>Saber mais</button></span>
</p>
<p>&nbsp;</p>
</div>

/* CSS */
button {
background: #369;
color: #fff;
font-family:inherit;
font-size:inherit;
height: 30px;
width: 100px;
line-height: 30px;
margin: 5px 5px;
text-align: center;
border: 0;
border-radius: 5px;
transition: all 0.3s ease 0s;
opacity: 1; 
}
button:hover {
background:#000;
opacity: 0.75;
box-shadow: inset 0 0 0 5px #3071A9;
}

EXERCÍCIO 2

 

 Acrescente um botão "animado" a todas as imagens do exercício 1.

3. Bootstrap Scrolling Table

EXEMPLO 3
Criar uma tabela com Scroll

<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Scrolling Table 
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
</tr>
<tr>
<td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
</tr>
<tr>
<td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
</tr>
<tr>
<td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
</tr>
<tr>
<td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
</tr>
<tr>
<td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
</tr>
<tr>
<td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

/* CSS */
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}

EXERCÍCIO 3

 

Construa uma página com uma tabela com scroll que apresente os nomes e a idade dos jogadores de uma equipa de futebol.

4. Shrinking top navbar

Ver Demo

EXERCÍCIO 4

 

Construa um banner animado dedicado ao Concelho de Santa Maria da Feira.


5. PHP » REVISÃO 1

 ABRIR