Neos Yazılım Blog

50 Günde Mini Javascript Projeleri Animasyonlu Kartlar Açılımı

Yeni başlayan ve orta düzey geliştiriciler için basic projeler içerecektir. HTML, CSS, DOM (Belge Nesne Modeli) ve JavaScript ile ilgili 50 mini proje içerir.

50 GÜNDE JAVASCRİPT PROJELERİ

ANİMASYONLU KARTLAR AÇILIMI

50 günde javascript projleri yapacağız bu projeler tamamen temel seviye javascript projeleri olacaktır. Öğrenmenizi kolaylaştıracak projelerden oluşacaktır.

İlk projemiz "Animasyonlu Kartlar Açılımı"

HTML DOSYASI

<!DOCTYPE html>  
<!-- < !DOCTYPE html> etiketini sayfamızın en başına eklersek eğer, tarayıcılar bu sayfanın bir web sayfası olduğunu anlayacaklar ve sonrasında yazdığımız kodları HTML kodu olarak algılayıp yorumlayacaklardır. -->

<html lang="en"> 
<head>
    <meta charset="UTF-8">
<!-- Web sayfasının içeriğinin görüntüleneceği dildeki karakter setini belirtmek için kullanılır.-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bu etiket, sayfanın mobil uyumlu olduğunu gösterir.-->
   <meta name="author" content="Neos Yazılım Akademi">
<!--Bu etiket, sayfanın yazarının kim olduğunu gösterir.-->

    <title>Animasyonlu Kartlar</title> <!-- Başlık etiketi -->

    <link rel="stylesheet" href="style.css">  <!-- sitil dosyası -->
</head>
<body>
        <div class="container">

             <div class="panel active" style="background-image: url('../01/Resimler/kedidili.jpg')">
                <h3>Kedi Dili</h3>
             </div>
             <div class="panel" style="background-image: url('../01/Resimler/manolya-tatlisi-one-cikan-.webp')">
                <h3>Mangnolya</h3>
             </div>
             <div class="panel" style="background-image: url('../01/Resimler/profiterol-yemekcom2.jpg')">
                <h3>Profiterol</h3>
             </div>
             <div class="panel" style="background-image: url('../01/Resimler/supangle-orjinal-pastane-usulu.jpg')">
                <h3>Supangle</h3>
             </div>

        </div>


    <script src="app.js"></script> <!-- javascript dosyası -->
</body>
</html>

Yukarıda gördüğümüz üzere 4 ayrı resim kullandık bu resimleri genel bir divin içerisinde oluşturduk her bir resim içinde ayrı bir divi oluşturduk çünkü bu divleri yan yana oluşturucağız.

Ben kullandığım resimlerin her birine "h3" başlık etiketi ile resimle ilişkili başlıkları oluşturduk.

CSS DOSYASI

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Oswald', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100vh;
    margin: 0;
    overflow: hidden;
}

.container{
   
    display: flex;
    width: 105vh;
}

.panel{
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    cursor: pointer;
    flex:0.5;
    position: relative;
    transition: flex 0.7s ease-in;
    margin: 5px;
}

Google fonts sayfası üzerinden istediğiniz yazı tiplerini seçip projenize dahil edebilirsiniz.

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap'); kod yardımı ile projemize bir yazı fontu dahil ettik.

Tüm sayfamızda gerekli alanları sıfırlamak için ilk önce tüm sayfalardaki girinti ve kenar boşlukları için

margin:0;

padding:0; değerlerini vererek tüm sayfamızdaki sıfırlamaları sağlıyoruz.

box-sizing: border-box;

Div'lerin çıktısına bakıldığında, her ne kadar genişlik ve yükseklikleri aynı olsada ekranda kapladıkları alanın farklı olduğunu görebiliriz.

Bu sorunu box-sizing özelliği çözer. CSS'de box-sizing özelliği, bir etiketin toplam genişliğine ve yüksekliğine padding ve border'ı dahil etmemizi sağlar.

body tagının içerisinde bulunan tüm elementler için bir sitil oluşturuyoruz;

font-family: 'Oswald', sans-serif; yazı tipini iki farklı yazı tipi özelliği koyduk taraycımız hanigisini desteklerse onu ekleyecek.

Sayfamızda animasyonlu kartlarımızı ortalamak için;

display:flex; özelliğini kullanmamız gerekir bu özellik esnek kutular oluşturmamızı sağlar. Bununla birlikte divlerimizi dikey ve yatay bir şekilde ortalamak için ;

align-items: center;
justify-content: center;

Tüm divlerimiz için genel bir yükselik oluşturuyoruz;

height:100vh;

vh: Değeri Viewport Height yani görüntü alanı yüksekliğidir. 100vh toplam görüntü alanı yüksekliğidir. ve 900px yüksekliğe sahip bir tarayıcıda 1vh = 900/100 = 9px olacaktır. Görüntü alanı yüksekliği değiştikçe bu oranda font-size değeri de artacak ya da azalacaktır.

overflow(taşma) özelliği, içerik öğesinin kutusundan taşması durumunda ne olacağını belirtir. Bu özellik ile bir öğenin içeriği belirli bir öğenin içeriği belirli bir alana sığmayacak kadar büyük olduğunda içeriği kırpabilir ve kaydırma çubuklarını ekleyip kaldırabilirsiniz

Bu özellik visible(varsayılan), hidden, scroll ve auto özellikleri mevcuttur.

bizde taşan kısımları ele almak için hidden kullanıyoruz.

hidden :Eleman kutusundan taşan içerik kırpılır ve içeriğin geri kalan kısmı görünmez olur.

visible :Varsayılan değer. İçerik kırpılmamış; öğenin kutusunun dışına çıkarılacak ve böylece diğer içeriklerle çakışabilecektir.
scroll :Taşan içerik tıpkı gizli gibi kırpılır, ancak taşan içeriğe erişmek için kaydırma mekanizması sağlar.
auto :İçerik öğenin kutusundan taşıyorsa, içeriği geri kalanını görmek için kaydırma çubuklarını otomatik olarak sağlar, aksi takdirde kaydırma çubuğu görünmez.

Tüm divleri içerisine aldığımız conteiner classı oluşturduk içerisinde dahil ettiğimiz resimleri yan yana getirmek için display:flex; özelliği kullanıyoruz.

Her bir resmi ayrı divlerin içerisine almıştık. Bu divlere panel adında bir class oluşturduk.

background-size özelliğiyle resmin büyüklüğünü ayarladık resmin hangi pozisyonun ekranda gözükmesini istiyorsak background-position özelliği ile resmin konumunu ayarlayabiliriz.

Resimin tekrar etmemesi için background-repeat özelliğine no-repeat özelliği ile tekrar etmemesini sağlıyoruz.

Resmin kenarlarını yuvarlak yapmak için border-radius: 50px

Web sayfalarında imleç işaretini değiştirmek için cursor:pointer özelliğini kullanabiliriz.

flex: 0.6 öğeyi width ve height değerilerine göre boyutlandırır.

transition özelliği ile bir öğe hover olduğunda ya da active diye bir class name olduğunda değişen stil özelliklerini öğeye geçişli bir şekilde vermeyi sağlar.

div {

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

}

transition-property : Hangi css özelliklerine uygulanması gerektiğini belirtir.

transition-duration: Geçiş süresi

transition-timing-function: Geçiş zamanı yapılandırılması

ease, ease-in, ease-out, ease-in-out özellikleri mevcuttur.

.panel h3{
    font-size: 15px;
    position: absolute;
    bottom: 20px;
    left: 3px;

   
}
.panel.active{
    flex: 4;
}


.panel.active h3{
    text-decoration: underline;
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width:600px){
    .container{
        width: 100vh;
        
    }
    .panel:nth-of-type(3), 
    .panel:nth-of-type(4){
        display: none;
    }

}

panel class'ının içerisindeki h3 etiketlerini resimlerin sol alt köşede olmasını istiyoruz bunun için postion özelliğini kullandık

position:absolute; özelliği olan bir eleman en yakın pozisyon değeri relative olan elemana göre kendini konumlandırmaya yarar. Eğer position:relative; özelliğine sahip bir ebeveyni yoksa belgeye göre kendini konumlandıracaktır.

Alt kısımda konumlanmasını istediğimiz için bottom özelliğini kulllanıyoruz. Sol kısımından boşluk vermek için left özelliğini kullandık.

Bir aktif resmimiz olsun istiyoruz herhangi bir resim ilk açıldığında diğerlerinden daha büyük olsun istedik. Herhangi bir resime acitve classı tanımlayabilirseniz.

İlk resimin olduğu div classına active classı yerleştirdik css dosyasında flex özelliğiyle daha geniş bir fotoğraf oluşturduk.

Her aktif olan resmimiz üzerindeki başlıklarımızın altı çizili olmasını istediğimiz için text-decoration: underline; özelliğini kullanıyoruz.

@media (max-width:600px){

.container{

width: 100vh;

}

Ekran genişliklerine göre medya görüntülerimizi ayarlayabiliriz. Maximum 600px ekran genişliğine ulaştığında container divi'nin genişliğini 100vh olarak ayarladık.

.panel:nth-of-type(3),

.panel:nth-of-type(4){

display: none;

}

panel classının içerisinde bulunan resimlerde 3. ve 4. sırada bulunan resimler 600px olduğunda ekranda gösterilmesin istersek display:none özelliğini kullanabiliriz.

Javascript Dosyası

const panels = document.querySelectorAll(".panel");

panels.forEach(panel => {
    panel.addEventListener("click", () => {

       removeActive();
        panel.classList.add("active");
    });
})


function removeActive() {


    panels.forEach(panell => {

        panell.classList.remove("active");
    }

    )
}

const sabit tanımlar anlamına gelir. Değişmeyen ve değiştirilmeyen değişkenler için kullanılır. Burada tanımlanan sabitin ismi başka bir değişkene ve fonksiyona verilmez. Burada dikkat edilmesi gereken tanımlanan sabitin ismi başka bir değişkene ve fonksiyona verilmez. Eğer sabit bir değişken oluşturduktan sonra ve bir değer verdikten sonra değiştirmeye çalışırsak Assignment to constant variable hatası alırsınız.

Dökuman içerisindeki panel classına sahip tüm classları buluyoruz.

Panel classlarını sabit bir değişkene verdik panels adındaki panels değişkeni üzerinden forEach ile hepsinin üzerinde gezmek istediğimizi söyledik ve bir etkinlik oluşturup bir click özelliği tanımladık.

panel.classList.add("active"); içinde bulunduğu classlara bir active classı eklemesini istedik. Bu sayede tüm acitive classları sayfada görünür haldedir.

Önceki active classların yok olmasını istediğimiz için removeActive adında bir function oluşturduk.

panels.forEach(panell => {

panell.classList.remove("active");

}

sayesinde active classını başka bir resmin üzerine tıkladığımızda aktifliğini silip tıklanan resmi aktifleştiriyor.

Projemize Drive Bağlantısı üzerinden indirip ulaşabilirsiniz.

https://drive.google.com/file/d/1VHmKXcDcdnjKkkOiIuatyQ-FRtYHCobn/view?usp=sharing