siteme yardım edebilecek varmı ?
- Konuyu başlatan serdaracar
- Başlangıç tarihi
birisi siteye ilk girdiğinde anasayfaya ilk önce tiyatro sahne perdesi gibi full ekran otomatik bir perde açılsın istiyorum örnek bir site yok yani demek istediğim karşılama animasyonu gibi anasayfa perdeyle açılsın sonra kendisi otomatik açıldıktan sonra kapansın istiyorum
Yorum
Html olarak böyle birşey yaptım bi bak dene anladığım kadarıyla bişey yaptım. @serdaracar
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perde Açılış Animasyonu</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#perde {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: black;
z-index: 9999;
}
.kanat {
width: 50%;
height: 100%;
background-color: crimson;
transform: translateX(0);
transition: transform 2s ease-in-out;
}
.kanat.sol {
border-right: 2px solid black;
}
.kanat.sag {
border-left: 2px solid black;
}
#icerik {
display: none;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center;
}
#icerik h1 {
font-size: 2.5rem;
}
</style>
</head>
<body>
<div id="perde">
<div class="kanat sol"></div>
<div class="kanat sag"></div>
</div>
<div id="icerik">
<h1>Hoş Geldiniz!</h1>
<p>Burası anasayfa içerik alanınız.</p>
</div>
<script>
window.addEventListener("load", () => {
const solKanat = document.querySelector(".kanat.sol");
const sagKanat = document.querySelector(".kanat.sag");
const perde = document.getElementById("perde");
const icerik = document.getElementById("icerik");
setTimeout(() => {
solKanat.style.transform = "translateX(-100%)";
sagKanat.style.transform = "translateX(100%)";
}, 500);
setTimeout(() => {
perde.style.display = "none";
icerik.style.display = "block";
}, 2500);
});
</script>
</body>
</html>
Yorum
evet aynı bu şekilde sadece düz kırmızı değil kırmızı sahne perdesi olsun istiyorum sağa sola hareket ederek açılsın istiyorum animasyon gibi yani hareketli olsun ama yaptığınızın perdelisi sadece ayrıca elinize sağlık hocam
Yorum
kod bilginiz az ise tek başınıza yapma ihtimaliniz çok zor. İstediğiniz şeyde basit birşey değil sonuçta uğraş vakit alacaktır.
Yorum
Detay
- Meslek
- Öğrenci
- Uzmanlık alanları
- https://jdsezer.blogspot.com/
- Üyelik tipi
-
- Bireysel
Photoshop-
- Başlangıç düzeyi
İllüstratör-
- Başlangıç düzeyi
UI / UX tasarım-
- Başlangıç düzeyi
PHP-
- Başlangıç düzeyi
CSS3-
- Başlangıç düzeyi
JavaScript-
- Başlangıç düzeyi
Perdeli Açılış Efekti İntro Kodu | Koddostu - Sitene Ekle Kodları İstediğin kod bu sitede var sana yardımcı olucaktır. tam söylediğin şekilde kod çalışıyor.
Kod:
<!--Author: koddostu.com-->
<!--Licence: GNU GPL V2.0-->
<!--Name: Perdeli Açılış Efekti İntro Kodu-->
<!--Kod Dostu Perde İntrosu Kodu START-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır-->
<!--Telif sahibi: koddostu.com-->
<div class="kod-dostu-od od-25-ds" id="koddostu-2block"></div>
<div class="kod-dostu-od od-24-ds" id="koddostu-1block"></div>
<a href="javascript:void(0)" onfocus="this.blur();" class="kod-dostu-od od-26-ds" id="koddostu-3block"></a>
<koddostu></koddostu>
<style type="text/css">a.kod-dostu-od{position:fixed;z-index:999900;}div.kod-dostu-od{position:fixed;z-index:999900;}div.od-24-ds{top:0px;left:0px;width:50%;height:100%;background:#961e1d url(http://3.bp.blogspot.com/-wngxLxO4ZsA/USedcyyF0EI/AAAAAAAASg0/wPdGFXG-TPE/s1600/koddostupowered.jpg) no-repeat top left;background-size:120% 100%;}
div.od-25-ds{top:0px;right:0px;width:50%;padding-left:35px;height:100%;background:#961e1d url(http://3.bp.blogspot.com/-wngxLxO4ZsA/USedcyyF0EI/AAAAAAAASg0/wPdGFXG-TPE/s1600/koddostupowered.jpg) no-repeat top right;background-size:120% 100%;}a.od-26-ds{right:15px;top:-75px;width:118px;height:320px;background:transparent url(http://3.bp.blogspot.com/-mRw0L-hknVM/USefTv3HgrI/AAAAAAAAShE/YRd_iHDElhM/s1600/rope.png) no-repeat top left;}</style><style type="text/css">div.kod-dostu-od{_position:absolute;}a.kod-dostu-od{_position:absolute;}div.od-24-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.od-25-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}a.od-26-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var tdta=0;
$("#koddostu-3block").click(function(){
tdta=tdta+1;
if(tdta>=2){
var sbkgj = Math.floor((Math.random()*10)+1);
if(sbkgj>=7){
window.open('h'+'t'+'t'+'p'+':'+'/'+'/'+'w'+'w'+'w'+'.'+'k'+'odd'+'ostu'+'.'+'c'+'o'+'m/2'+'0'+'1'+'3'+'/'+'0'+'2/p'+'er'+'de'+'li-a'+'cl'+'s'+'-e'+'f'+'e'+'kt'+'i'+'-'+'i'+'n'+'tr'+'o'+'-k'+'od'+'u.'+'h'+'t'+'m'+'l','')}
}
if($("#koddostu-1block").offset().left ==0){
$("#koddostu-3block").animate({
top: "0px"
}, 800, function(){
$("#koddostu-3block").animate({
top: "-15px"
}, 300)
});
$("#koddostu-1block").animate({
width: "200px",
left: "-125px",
}, 1100);
$("#koddostu-2block").animate({
width: "200px",
right: "-125px",
paddingLeft: "0px",
}, 1100);
}
else{
$("#koddostu-3block").animate({
top: "0px"
}, 300, function(){
$("#koddostu-3block").animate({
top: "-75px"
}, 800)
});
$("#koddostu-1block").animate({
width: "50%",
left: "0px"
}, 1100);
$("#koddostu-2block").animate({
width: "50%",
right: "0px",
paddingLeft: "35px"
}, 1100);
}
});
</script>
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır-->
<!--Telif sahibi: koddostu.com-->
<!--Kod Dostu Perde İntrosu Kodu STOP-->
<script src="https://www.koddostu.com/duzelt.js?no=27"></script>
Yorum
