CSS animasyonlar, web sitelerini daha ilgi çekici ve etkileşimli hale getirmek için kullanılan bir tekniktir. CSS animasyonlar, CSS stillerini kullanarak bir öğenin görünüşünü veya konumunu zaman içinde değiştirmeyi sağlar. CSS animasyonlar, sayfa yüklendikten sonra veya kullanıcı etkileşimleriyle tetiklenerek başlatılabilir. CSS animasyonlar, dönme, kayma, büyütme/küçültme, renk değiştirme ve daha fazlası gibi çeşitli efektler oluşturmak için kullanılabilir. CSS animasyonlar, web sitelerinin kullanılabilirliğini ve erişilebilirliğini de iyileştirebilir. İyi tasarlanmış CSS animasyonlar, kullanıcıların sitede gezinmesini ve içeriği anlamasını kolaylaştırabilir. SEO uyumlu CSS animasyonlar oluşturmak için aşağıdaki ipuçları göz önünde bulundurulmalıdır:
Elementor Animosyonlu Arkaplan Nasıl Oluşturulur?
Elementor, web sitesi tasarımcıları için popüler bir görsel düzenleyicidir. Elementor ile animasyonlu arkaplanlar eklemek mümkündür. Bu, web sitenize hareket ve ilgi katmanın harika bir yoludur. Sizde animasyonlu arkaplan eklemek istiyorsanız hemen yazımızın devamını okuyabilirsiniz.
- Animasyon eklemek istediğiniz sayfayı Elementor’la Düzenle diyerek açınız.
- Ardından aşağıdaki CSS kodunu kullanarak özel bir CSS kodu ekleyin.
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Şablonu İndir
- Elementor PRO için şablonu yukarıdaki linkten indirip kullanabilirsiniz.
- Elementor’da özel CSS eklemek için normalde PRO sürüm gerekiyor fakat PRO sürüm sizde yoksa alternatif birkaç yol daha vardır.
- Animasyonu tüm siteye uygulayacaksanız Görünüm > Özelleştir > Ek CSS kısmından kodu direk ekleyebilirsiniz.
- Eğer animsyonu sadece tek bir sayfaya uygulayacaksanız, yapmanız gereken bir Metin Düzenletici ekleyip, burada kodu <style></style> arasına eklemek. Kodu görsek değil metin kısmına eklemek.
- Aşağıdaki görselden bakıp yapabilirsiniz.
Elemantor Animation Background
CSS animations are a technique used to make websites more interesting and interactive. CSS animations allow you to change the appearance or position of an element over time using CSS styles. CSS animations can be triggered after page load or triggered by user interactions. CSS animations can be used to create a variety of effects such as rotating, shifting, zooming, color changing, and more. CSS animations can also improve the usability and accessibility of websites. Well-designed CSS animations can make it easier for users to navigate the site and understand the content. To create SEO friendly CSS animations, the following tips should be considered.
