Kullanıcı:
Filtreler
Neler yeni
Neler yeni

siteme yardım edebilecek varmı ?

S

serdaracar

Ad
Soyad
Katılım
2 Şubat 2020
Konum
antalya
Konular
9
Mesajlar
57
Ticaret - 0%
0   0   0
  
iletişim
arkadaşlar sitemin index sayfasında site açılışında full ekran sahne perdesi kapalıyken açılsın istiyorum ana sayfa bunu nasıl yapabilirim ya da bildiğiniz kod var mı? acil yardım lütfen...
 
S

serdaracar

Ad
Soyad
Katılım
2 Şubat 2020
Konum
antalya
Konular
9
Mesajlar
57
Ticaret - 0%
0   0   0
  
iletişim
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
Volkyci

Volkyci

Grafik tasarımcı
Ad
VOLKAN
Soyad
KAYMAK
Katılım
23 Kasım 2019
Konum
Bursa
Konular
57
Mesajlar
246
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Tekniker
serdaracar' Alıntı:
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
Genişletmek için tıkla ...
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
S

serdaracar

Ad
Soyad
Katılım
2 Şubat 2020
Konum
antalya
Konular
9
Mesajlar
57
Ticaret - 0%
0   0   0
  
iletişim
Volkyci' Alıntı:
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>
Genişletmek için tıkla ...
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
Volkyci

Volkyci

Grafik tasarımcı
Ad
VOLKAN
Soyad
KAYMAK
Katılım
23 Kasım 2019
Konum
Bursa
Konular
57
Mesajlar
246
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Tekniker
serdaracar' Alıntı:
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
Genişletmek için tıkla ...
yaptığım örneği değiştirip renk yerinde perde resmi ekleyip değiştirip birazda js ile geliştirebilirsiniz.
 
Yorum
jdsezer

jdsezer

Ad
Soyad
Katılım
8 Mart 2020
Konum
Türkiye
Konular
67
Mesajlar
121
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Öğrenci
Detay  
Meslek
Öğrenci
Uzmanlık alanları
https://jdsezer.blogspot.com/
Üyelik tipi
  1. Bireysel
Photoshop   Photoshop
  1. Başlangıç düzeyi
    30%
İllüstratör   İllüstratör
  1. Başlangıç düzeyi
    30%
İllüstratör   UI / UX tasarım
  1. Başlangıç düzeyi
    30%
PHP   PHP
  1. Başlangıç düzeyi
    30%
PHP   CSS3
  1. Başlangıç düzeyi
    30%
PHP   JavaScript
  1. Başlangıç düzeyi
    30%
serdaracar' Alıntı:
arkadaşlar sitemin index sayfasında site açılışında full ekran sahne perdesi kapalıyken açılsın istiyorum ana sayfa bunu nasıl yapabilirim ya da bildiğiniz kod var mı? acil yardım lütfen...
Genişletmek için tıkla ...
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
Cevap yazmak için giriş yap yada kayıt ol.

Benzer konular

UnknownSouL
İnternet Siteme Google Maps (Harita) Kodu Eklemeyi Nasıl Yaparım?
Cevaplar
0
Görüntüleme
433
UnknownSouL
UnknownSouL
Emre KRMN
Blog siteme "maşallah" alırım :)
Cevaplar
6
Görüntüleme
1K
Emre KRMN
Emre KRMN
KingAbdullah
İlan Görev Yap Kazan Siteme Ortak Arıyorum
Cevaplar
0
Görüntüleme
1K
KingAbdullah
KingAbdullah
EVScreativ
web siteme feyk bildiri sistemi
Cevaplar
3
Görüntüleme
2K
Zeki
Zeki
KingAbdullah
smm panel siteme ortak arıyorum
Cevaplar
0
Görüntüleme
875
KingAbdullah
KingAbdullah

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.