Automne 2

Automne 2

Ayant profité de ce bel automne, très sec, dans ma région, pour faire des photos de la nature colorée, je voudrais les utiliser pour vous proposer différents montages, genre diaporama, avec différentes transitions.

Afin d'alléger mes montages, ce qui permet d'y placer plus d'images, sans souci de les alourdir de trop, j'ai comparé le poids d'une image, en différentes dimensions.

Le même image pèse 798ko en 1920x1080px, 578ko en 1536x864px et 357px en 1152x648px.

Etant donné que la plupart des blogs n'ont pas une zone article très large, je vous propose ces montages, dans ces dernières valeurs, en unités adaptatives correspondantes, c'est à dire à 60% de la résolution de votre écran.

J'ai choisi 8 images, en animation verticale mais vous pouvez en ajouter ou en retrancher, en ajoutant ou retranchant autant de boutons et/ou modifier l'animation, ici au survol.

A

B

C

D

E

F

G

Le paragraphe contenant les adresses des images doit être de la largeur du montage et avoir une hauteur d'un peu plus de la hauteur d'une image multipliée par le nombre d'images, afin d'être sûr qu'elle y entre toutes; de toute façon, chaque bouton déplace ce paragraphe d'une valeur d'une hauteur d'image et s'il reste du vide, il est invisible.
Les adresses des images sont à écrire à la suite, sans espace.

<div id="mg1">
<p id="aut1" class="aut">A</p>
<p id="aut2" class="aut">B</p>
<p id="aut3" class="aut">C</p>
<p id="aut4" class="aut">D</p>
<p id="aut5" class="aut">E</p>
<p id="aut6" class="aut">F</p>
<p id="aut7" class="aut">G</p>
<p id="ser1"><img style="height:33.75vw;" src="http://ekladata.com/MMpd1Mn4w8waHpBxD3KKMHEJyEE.jpg" alt="" /><img style="height:33.75vw;" src="http://ekladata.com/PbG4uFEd0BcJx0ulxnJVsb8yrF4.jpg" alt="" /><img style="height:33.75vw;" src="http://ekladata.com/_RzHzerQU9ejKtctz1nYsL4CW5w.jpg" alt="" /><img style="height:33.75vw;" src="http://ekladata.com/tpcXIjxvhtVqpoyUCHB4EdkD0S0.jpg" alt="" /><img style="height:33.75vw;" src="http://ekladata.com/KrocgBKQw59x8rs2csU8pKkLvjU.jpg" alt="" /><img style="height:33.75vw;" src="http://ekladata.com/IBoIIpA92U4KwsJPTdPvmrt1tEM.jpg" alt="" /><img style="height:33.75vw;" src="http://ekladata.com/bpYY9Bzfb6K3KyiYh1WhxmqkMXg.jpg" alt="" /><img style="height:33.75vw;" src="http://ekladata.com/0IfAUE0sqV6VxQXsW4YMbaIY5ek.jpg" alt="" /></p>
</div>

<style></style>