CSS3 ve HTML Kullanarak Nasıl Animasyonlu Fotoğraf Galerisi Yaparız?


HTML Yapısı

Başlangıç olarak  resimlerinizi ayarlayın ve klasik HTML kodlarını yazmaya başlayın:

<div class="photos">
    <img src="img/01.jpg" />
    <img src="img/02.jpg" />
    <img src="img/03.jpg" />
    <img src="img/04.jpg" />
    <img src="img/05.jpg" />
</div>
 Web tarayıcınızda yazdığınız kodları önizleyin:

Fotoğrafları Pozisyonlamak

Her bir resim için position belirlemek için position değerini aşağıdaki gibi absolute yapmalıyız.

.photos img {
    positionabsolute;
}
Bu parametreleri yazınca aşağıdaki gibi bir görüntü elde edeceğiz:

Bundan sonra  ihtiyacımız  her bir resim için ‘pseudo-class nth-of-type to align’ kullanmak olacaktır. Bu iki özellik:

  • left and top for translation
  • rotate – this is a new CSS3 feature which allows for rotation of the images

Translation

İlk olarak biz kabaca resimlerin konumlarını düzenleyeceğiz.Kişisel olarak belirlediğiniz noktaları pixels (px)  olarak konumlama yapmalıyız. Bunu kullancaz çünkü  Photoshop’ ta web için yapılan çalışmalarda piksel kullanılır.

Notice that the positioning starts from the top left corner of the browser window. At this stage you should have something similar to:

.photos img:nth-of-type(1) {
    left50px;
    top50px;
}
.photos img:nth-of-type(2) {
    left150px;
    top100px;
}
.photos img:nth-of-type(3) {
    left250px;
    top50px;
}
.photos img:nth-of-type(4) {
    left350px;
    top150px;
}
.photos img:nth-of-type(5) {
    left450px;
    top50px;
}

Rotation

The rotate property from the transform function is included in CSS3. For this to work in each browser you have to customise the code by adding the relative prefix. Unfortunately at this time Internet Explorer does not support the rotate function, but it is supported by all other major web browsers.

This pseudo-class matches elements based on their positions within a parent element. Notice that for a better compatibility with the different browsers, I added 4 statements for each type. Your gallery should then look something like:

.photos img:nth-of-type(1) {
    left50px;
    top50px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}
.photos img:nth-of-type(2) {
    left150px;
    top100px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.photos img:nth-of-type(3) {
    left250px;
    top50px;
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    transform: rotate(7deg);
}
.photos img:nth-of-type(4) {
    left350px;
    top150px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.photos img:nth-of-type(5) {
    left450px;
    top50px;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
}

 Adding the Hover Effects

After some trial and error you should now have all of your images positioned the way you would like them to appear. Now to make the gallery a little more interesting we are going to add a hover effect to them usinghover. This will cause each of the images to ‘pop out’ when scrolled over.

Additionally we will use the scale and transform functions to add a “growing effect” on the images, and z-index to bring the image to the forefront.

.photos img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    z-index10;
}

 

You can now add rotation to each of the images:

.photos img:hover {
    -webkit-transform: rotate(380deg) scale(1.5);
    -moz-transform: rotate(380deg) scale(1.5);
    -o-transform: rotate(380deg) scale(1.5);
    transform: rotate(380deg) scale(1.5);
    z-index10;
}

 

Refining the Effects by Managing Transitions

A new function of CSS3 is ‘transition’ (transition: property duration timing-function;) which allows us to customise certain effects. For example if we want a smoother animation of images we can add the following:

.photos img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

The all means that all the CSS properties defined in the :hover section will be affected, whilst the ease-out function controls the time it takes for the animation to take place.

Adding Borders

To get a “polaroid effect” you can add white borders using the padding feature:

.photos img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    padding10px 10px 30px 10px;
    backgroundwhite;
    bordersolid 1px black;
}

And the Result:

Before mouse over

After mouse over

 

İyi eğlenceler dilerim..

Bir Cevap Yazın