"Sol ve sağdan genişliği aşan kaydırma" bir web sayfasında bir elemanın ekranın görünür alanının dışından görünür alana doğru yatay olarak hareket ettiği bir animasyon etkisini ifade eder. Elemanın genişliği, ekranın genişliğinden daha büyüktür, bu nedenle görünür alana kaydırıldığında ekranın kenarlarını aşar. Bu, önemli bir elemanın dikkat çekmesini veya daha etkileşimli bir kullanıcı deneyimi yaratmak için kullanılabilir.
Bu etkiyi yaratmak için, HTML, CSS ve JavaScript kullanımının bir kombinasyonunu kullanmanız gerekecektir. Bu etkiyi nasıl uygulayabileceğinizi gösteren bir örnek şöyledir:
Önce, animasyonu istediğiniz elemanı tutacak bir kapsayıcı eleman oluşturun. Bu bir div, bir bölüm veya başka bir tür eleman olabilir.
Bu kapsayıcı eleman içinde, animasyonu istediğiniz elemanı oluşturun. Bu bir resim, bir düğme veya başka bir tür eleman olabilir.
CSS kullanarak elemanın başlangıç konumunu ve görünümünü belirtin. Örneğin, "left" ve "top" özelliklerini kullanarak elemanı ekranın sol veya sağ tarafından pozisyonlandırabilir ve "opacity" özelliğini 0 (tamamen saydam) olarak ayarlayabilirsiniz.
HTML Kodu:
Kod:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="animationentry">
<div id="myDiv" class="animated slideInLeft">
<img src="https://img.webme.com/pic/o/opencorex/content.png">
</div>
<div id="cww_bg" class="animated slideInRight">
<img src="https://img.webme.com/pic/o/opencorex/blog.png">
</div>
</div>
</body>
</html>
HTML Kodu:
