Full Ekran Slider Yapımı / Full Screen Image Slider - HTML5 - CSS3 - Ders29
Evet arkadaşlar tekrar merhabalar. Bu video ders uygulamamızda web sitenizde kullanabileceğiniz çok kullanışlı bir slider yaptık. Slider da sacede html ve css kullanarak divler ve keyframes ile oluşturduk. Video derslerimiz ile sitenizin sayfalarında harika efekt ve animasyonlar yapabilir ve yaratıcılığınız ile değişik uygulamalar oluşturabilirsiniz. Css ile yapabileceklerinize inanamayacaksınız. Html bilmenize gerek yok çünki herşeyi css ile yapıyoruz. Sadece 1 saatte kendinize harika responsive bir web sitesi yapabilirsiniz. Videolarımızdan haberdar olmak için abone olmayı unutmayın.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Full Page Slider</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<h1>WEB SİTEM KANALINDASINIZ</h1>
<div class="slider">
<div class="slide">
<h1>Foto1</h1>
</div>
<div class="slide">
<h1>Foto2</h1>
</div>
<div class="slide">
<h1>Foto3</h1>
</div>
<div class="slide">
<h1>Foto4</h1>
</div>
<div class="slide">
<h1>Foto5</h1>
</div>
</div>
<div>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
position: relative;
overflow-x: hidden;
}
.container h1{
position: absolute;
z-index: 1;
}
.slider{
width: 500%;
position: relative;
animation: slide 20s linear infinite;
}
.slide{
width: 20%;
position: relative;
float: left;
height: 100vh;
}
.slide h1{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
font-size: 4em;
font-family: arial;
width: 100%;
background: rgba(0,0,0,0.4);
color: white;
}
.slide:nth-child(1){
background: url(hayvanlar/leopar.jpg);
background-size: cover;
}
.slide:nth-child(2){
background: url(hayvanlar/puma.jpg);
background-size: cover;
}
.slide:nth-child(3){
background: url(hayvanlar/ayı.jpg);
background-size: cover;
}
.slide:nth-child(4){
background: url(hayvanlar/kurt.jpg);
background-size: cover;
}
.slide:nth-child(5){
background: url(hayvanlar/aslan.jpg);
background-size: cover;
}
@keyframes slide{
0%{left: 0;}
16%{left: 0;}
20%{left: -100%;}
36%{left: -100%;}
40%{left: -200%;}
56%{left: -200%;}
60%{left: -300%;}
76%{left: -300%;}
80%{left: -400%;}
96%{left: -400%;}
100%{left: 0;}
}
Yorumlar
Yorum Gönder