CSS Carousel Logo Slider Efekti

Herhangi bir Java Script kodu kullanmadan, sadece CSS kullanarak HTML ve CSS image slider carousel animation olarak da bilinen kayan logo animasyonu, logo slider ya da CSS carousel efektinin nasıl yapıldığını gösteriyorum.

Çalışmamıza başlamadan önce iki adet dosya oluşturacağız. Bunlardan bir tanesi index.html olacak, bizim ana sayfamız olacak. Diğeri de style.css, yani stil dosyamız olacak ve bir de logo bulundurabiliriz. Bunu tekrar ederek kullanacağım. Siz birbirinden farklı logolar bularak amacına yönelik bir çalışma yapabilirsiniz.

Öncelikle bir Wrapper kodu ekleyelim ve bu kodun içerisinde bir slider div’i ekliyorum. Başlangıç olarak bu kodları yazacağız. index.html’deki Wrapper’ı ve Slider’ı bir CSS ile tanımlayalım, sonra da onlara stil vererek çalışma alanımızı belirleyelim.

Öncelikle arka plana yani Body etiketine bir renk atadım. Wrapper class’ı içerisindeki nesneleri de sayfayı ortalayacak şekilde ayarlayalım. Sonra da logoların kayacağı alanı alıyoruz. Şöyle bir alan olsun istiyorum, bu alana Box Shadow ile bir gölge verelim. Bu şekilde alanımızı belirlemiş oluyoruz. Logolar bu alan içerisinde, yani beyaz alan içerisinde kayacak.

Şimdi de logolarımızı ekleyelim. Slider class’ının içerisine logoları ekleyeceğiz. Ama bunun için önce bir Slide class’ı ekleyelim aynı zamanda. Buna bir IMG verelim, yani image etiketi verelim. Source olarak da benim hazırladığım görseli binance.png’yi buraya ekliyorum. Bunu kaydedip baktığımda görselin bu şekilde olduğunu göreceğim. Henüz boyutlandırma kısmını yapmadık. Onu birazdan yapacağız.

index.html


<div class="slider">
    <div class="slide">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
    </div>
    <div class="slide">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="Css Carousel Logo Slider Efekti 1">
    </div>
</div>

Birden fazla logo olduğunu düşünerek buradaki image etiketinin sayısını artırıyorum. Yani bu şekilde birbirinden farklı görseller olduğunu düşünelim. Şimdi de bunların yüksekliğini ayarlayalım ve aynı zamanda bunlar alt alta değil yan yana olması gerekiyor. Bu kısmı, bu detayı da halledelim. Öncelikle slide class’ına bir yükseklik verelim. Bunu verdiğimizde değişen bir şey olmayacaktır, sonra bunu yanyana olması açısından display:flex olarak tanımlayalım ve buradaki item’ları ortalamamız gerektiği için de align-items:center özelliğini verelim. Şu şekilde bir görüntü olacak. Logolar, bunu yaptığımız için, display:flex olarak verdiğimiz için sağa doğru sıralanacaklar.

Buradaki öncelikli sorun görsellerin alanımızın dışına taşmış olması ve birbiri ardına geldikleri için aralarında bir padding, bir boşluk olmaması. Bunu da düzenleyelim. Bu düzenlemeyi de slide’ın içerisindeki image etiketlerine vermemiz gerekiyor. Height:70 ve padding değerlerini vererek hem yüksekliğini ayarlamış oluyoruz logoların, hem de logoların birbirlerine uzaklığını ayarlamış oluyoruz.

Şimdi bu logolara animasyon vermeye geçebiliriz. Soldan sağa doğru kayan logolar olacak. Dolayısıyla keyframe vermemiz gerekecek. Keyframe özelliğini kullanmamız gerekecek. Şu şekilde %0’dan %100’e X ekseninde kaydırma yapacağız ve bu kaydırmayı nerede yapacağımız önemli olduğu için de slide class’ına yeni bir özellik tanımlayacağız. Tanımlayacağımız özellik de Animation özelliği olacak, slideshow olacak. Kaç saniyede bu işlemin tamamlanması gerektiğini buradan belirtiyoruz. Linear olacak ve sonsuz bir döngüde olması gerektiği için de buraya Infinite yazıyoruz. Bu style.css’i kaydettiğimde şöyle bir sonuç alacağız.

Logolar sola doğru kayıyorlar ve logolar sona erdikten sonra, bunlar birinden farklı logolar olduğunu daha iyi anlaşılır, başa geçiyor, sürekliliği sağlamıyor. Bu sürekliliği sağlayabilmemiz için de şöyle bir yöntem uygulayacağız. index.html sayfasına geliyorum. Buradaki slide class’ını seçiyorum ve altına bir kopyasını oluşturuyorum. Şöyle bir sonuç olacak. Biz alttaki kısmı sağa entegre edeceğiz ve dolayısıyla bu logolar bitmiş gibi görünmeyecek, sürekli devam eden bir görünüme bürünecek. Hatasız bir şekilde görünecek. Önce bunları tek bir satıra koyacağız. Style.css kısmına geliyorum. Slider’ın hemen altına şöyle bir satır ekliyorum. Display:flex satırını ekliyorum. Gördüğünüz yirmi bunlar üst üste binecekler.

Taşma kısmını da overflow ile çözeceğiz. Dışarıda kalan kısımları gizlememiz gerekiyor. Dolayısıyla slider kısmına yeni bir satır daha ekliyoruz. Ve buna da overflow:hidden diyoruz. Bunu kaydettiğimde gördüğünüz gibi çizdiğimiz alanın dışına çıktığında bunlar görünmeyecek, gizlenmiş olacak. Aslında bu bile yeterli bir çalışma diyebiliriz. Bundan sonra yapacaklarımız biraz daha süsleme yönüne girecek.

Yeni bir absolute:position ekleyeceğiz ve buna degrade vereceğiz, gradient efekti vereceğiz. Amacımız bu kenarların biraz daha yumuşak görünmesini sağlamak. Eklememiz gereken kodlar bu. Slider class’ının before’una ve after’ına çeşitli özellikler belirtiyoruz ve bunu çeviriyoruz. Bu işlemi yaptığımızda şurada degrade yaptığımız için 0’dan 100’e şeffaflık sağladığı için etkisi de kaydettiğimde şu şekilde görecek. Hem başına hem de sonuna yani, slider’ın before’una ve after’ına böyle bir efekt koymuş olacağız. Sağ taraftan görünmez bir şekilde gelip, görünüp sol taraftan kayboluyormuş hissi veriyor bize. Bu hissi veren de buradaki arka plan kısmı. Bu yaptığımız düzenlemeyi before’a koyuyoruz ve aynı zamanda after’a da koyuyoruz. After’a 180 derece çevirmemiz gerektiği için de, yani burada sağ tarafta beyaz, sol tarafta şeffaflık olması gerektiği için 180 derecelik bir rotate veriyoruz. Bu işlemi de bu şekilde çözmüş oluyoruz. Ve animasyonumuzu tam ekran görecek olursak da, herhangi bir JavaScript kodu veya dosyası kullanmadan, sadece CSS teknikleriyle logoları bu şekilde kayar hale getirebiliyoruz.

style.css


.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider {
    width: 1000px;
    height: 100px;
    position: relative;
    background: white;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
    display: flex;
    overflow: hidden;
}

.slide {
    height: 100px;
    display: flex;
    align-items: center;
    animation: slideshow 10s linear infinite;
}

.slide img {
    height: 70px;
    padding: 0 30px 0 30px;
}

@keyframes slideshow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.slider::before,
.slider::after {
    height: 100px;
    width: 200px;
    position: absolute;
    content: "";
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.slider::before {
    left: 0;
    top: 0;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

Popular Eğitimler

CSS Nth-Child Kullanımı

CSS’te nth-child komutu nasıl kullanılır? Nth-child komutu kullanarak ilk element, son element ya da aralardaki element dizileri nasıl seçilir?

Geri Sayım Sayacı Kodu (HTML ve JS)

Geri sayım kodlarını genellikle yapım aşaması sayfalarında sitenin açılacağı zamanı, bir kampanyanın…

Bootstrap Izgara (Grid) Sistemi (Container, Col, Row Kullanımı)

Bootstrap’de ızgara sistemleri container, container-fluid, row ve sütun anlamına gelen col elemanlarından…

HTML ve CSS ile Tam Ekran Video Arka Plan

Tam ekran arka planları, web tasarım dünyasında son zamanlarda çok popüler hale…

Google Web Fontları Nasıl Kullanılır?

Google web fontları nasıl kullanılır? Google web yazı karakterlerini sitemize nasıl ekleriz? Google Web fontlarının Türkçe desteği var mı?

jQuery Owl Carousel Gelişmiş Responsive Slider Kullanımı

Mobil cihazlarla uyumlu, responsive ve WordPress sitenize entegre edebileceğiniz bir slider arıyorsanız,…