1. Merhaba Ziyaretçi foruma kayıt olarak hediye kodu alabilirsin!
  2. Merhaba Ziyaretçi ! IP: play.LifeMCServer.com SkyBlock Sürüm: 1.7.X-1.8.X Senide aramızda görmek isteriz.
    Duyuruyu Kapat

Paylaşım Sayfa Yükleyici

'HTML, PHP, CSS, JS' forumunda Bobzillaa tarafından 25 Mart 2019 tarihinde açılan konu

  1. Bobzillaa

    Bobzillaa Enes Onur Ata
    Vip Üye

    Katılım:
    9 Nisan 2018
    Mesaj:
    25
    Beğenilmeler:
    28
    [​IMG]
    Merhaba,
    Yapmış olduğum sayfa yükleyici sistemini paylaşmak istiyorum.

    Linkleri görebilmek için sitemize kayıt olmalısın.
    Kodlar:
    HTML:
    1. <html lang="tr" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
    2.  
    3.   <head>
    4.     <title>Sayfa Yükleyici</title>
    5.     <link rel="icon" href="https://cdn.discordapp.com/attachments/554278845801431040/559776213204467713/168164.png" type="image/x-icon" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     <meta charset="utf-8" />
    8.     <meta name="description" content="Bobzillaa tarafından yapılan basit, yerli ve türkçe sayfa yükleyici hizmetinizde! - Ardımdan Fırtına Kopacak!" />
    9.     <meta name="keywords" content="sayfa yükleyici, preloader, pre-loader, PRE-LOADER, bobzillaa, codepen,bobzillaa, bobzilla, Bobzillaa, Enes Onur Ata, Enes onur ata, enesonurata, enes onur ata, ENESO ONUR ATA, PRELOADER, YUKLEYİCİ, türk, türkçe, css, html, php , yerli, milli, chrome, codepen.io/enesonurata, türkiye, türkçe , enesbatur, atarikafa, oyunportal, atarikafa, Ardımdan Fırtına Kopacak!"
    10.    />
    11.     <meta name="author" content="Bobzillaa - Enes Onur Ata" />
    12.     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    13.  
    14.     <style>
    15.     @charset "UTF-8";
    16.  
    17.     /* Animasyonlar */
    18. @-webkit-keyframes load-in {
    19.   0% {
    20.     width: 0;
    21.   }
    22.   33% {
    23.     width: 100%;
    24.   }
    25.   66% {
    26.     -webkit-transform: translateX(0);
    27.             transform: translateX(0);
    28.     width: 100%;
    29.     -webkit-transform-origin: right;
    30.             transform-origin: right;
    31.   }
    32.   100% {
    33.     -webkit-transform: translateX(100%);
    34.             transform: translateX(100%);
    35.     -webkit-transform-origin: right;
    36.             transform-origin: right;
    37.   }
    38. }
    39. @keyframes load-in {
    40.   0% {
    41.     width: 0;
    42.   }
    43.   33% {
    44.     width: 100%;
    45.   }
    46.   66% {
    47.     -webkit-transform: translateX(0);
    48.             transform: translateX(0);
    49.     width: 100%;
    50.     -webkit-transform-origin: right;
    51.             transform-origin: right;
    52.   }
    53.   100% {
    54.     -webkit-transform: translateX(100%);
    55.             transform: translateX(100%);
    56.     -webkit-transform-origin: right;
    57.             transform-origin: right;
    58.   }
    59. }
    60. /* Haşmetli yükleyici */
    61. .üstten-yükleyici {
    62.   cursor: url(https://www.lifemcserver.com/lib/curkor2.png), auto !important;
    63.   position: fixed;
    64.   width: 100%;
    65.   overflow: hidden;
    66.   top: 0;
    67.   left: 0;
    68.   right: 0;
    69.   bottom: 0;
    70.   height: 100%;
    71.   background: white;
    72.   display: flex;
    73. }
    74.  
    75. .üstten-yükleyici-durum {
    76.   background-image: linear-gradient(to right, #0062fb, #6a5afe, #9c4efc, #c63bf6, #eb12eb);
    77.   height: 10px;
    78.   -webkit-animation: load-in 4s ease-in-out 2s infinite;
    79.           animation: load-in 4s ease-in-out 2s infinite;
    80. }
    81.  
    82. html,
    83. body {
    84.   cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur101.cur), auto !important;
    85. }
    86.  
    87. body {
    88.   overflow-x: hidden;
    89.   background-color: #23272A;
    90.   color: white;
    91. }
    92.  
    93. .selamünaleyküm {
    94.   cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), auto !important;
    95.   background: #7289DA;
    96. }
    97.  
    98. html:active,
    99. .selamünaleyküm:active {
    100.   cursor: url(https://www.lifemcserver.com/lib/curkor2.png), auto !important;
    101. }
    102. /* SAĞ TIK MENÜ */
    103. .contextmenu {
    104.   display: none;
    105.   position: absolute;
    106.   width: 200px;
    107.   margin: 0;
    108.   padding: 0;
    109.   background: #FFFFFF;
    110.   border-radius: 5px;
    111.   list-style: none;
    112.   box-shadow: 0 15px 35px rgba(50, 50, 90, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    113.   overflow: hidden;
    114.   z-index: 999999;
    115. }
    116.  
    117. .contextmenu li {
    118.   border-left: 3px solid transparent;
    119.   transition: ease .2s;
    120. }
    121.  
    122. .contextmenu li a {
    123.   display: block;
    124.   padding: 10px;
    125.   color: #B0BEC5;
    126.   text-decoration: none;
    127.   transition: ease .2s;
    128. }
    129.  
    130. .contextmenu, li:hover {
    131.   background: #2C2F33;
    132.   border-left: 3px solid #9C27B0;
    133. }
    134.  
    135. .contextmenu li:hover a {
    136.   color: #FFFFFF;
    137. }
    138. /* Diller ayarı */
    139. .diller{
    140.     color: orangered;
    141. }
    142.     </style>
    143.  
    144.     <script>
    145.     //SAYFA YUKLEYICI
    146.     //jQuery GEREKLIDIR head kısmından çağırdım hemde son sürüm. sıkıntı yok reis :)
    147. window.onload = function() {
    148.   var yükleyicisüre = "3000"; // 1000 milisaniye (1 saniye) beklet
    149.   $(".üstten-yükleyici").delay(yükleyicisüre).fadeOut("slow", function() {
    150.     $(this).remove()
    151.   })
    152. }
    153.  
    154.  
    155. //contextmenu (sağtık menüsü - rightclick)
    156. $(document).ready(function(){
    157.  
    158.   //Show contextmenu:
    159.   $(document).contextmenu(function(e){
    160.     //Get window size:
    161.     var winWidth = $(document).width();
    162.     var winHeight = $(document).height();
    163.     //Get pointer position:
    164.     var posX = e.pageX;
    165.     var posY = e.pageY;
    166.     //Get contextmenu size:
    167.     var menuWidth = $(".contextmenu").width();
    168.     var menuHeight = $(".contextmenu").height();
    169.     //Security margin:
    170.     var secMargin = 10;
    171.     //Prevent page overflow:
    172.     if(posX + menuWidth + secMargin >= winWidth
    173.     && posY + menuHeight + secMargin >= winHeight){
    174.      //Case 1: right-bottom overflow:
    175.      posLeft = posX - menuWidth - secMargin + "px";
    176.       posTop = posY - menuHeight - secMargin + "px";
    177.     }
    178.     else if(posX + menuWidth + secMargin >= winWidth){
    179.       //Case 2: right overflow:
    180.       posLeft = posX - menuWidth - secMargin + "px";
    181.       posTop = posY + secMargin + "px";
    182.     }
    183.     else if(posY + menuHeight + secMargin >= winHeight){
    184.       //Case 3: bottom overflow:
    185.       posLeft = posX + secMargin + "px";
    186.       posTop = posY - menuHeight - secMargin + "px";
    187.     }
    188.     else {
    189.       //Case 4: default values:
    190.       posLeft = posX + secMargin + "px";
    191.       posTop = posY + secMargin + "px";
    192.     };
    193.     //Display contextmenu:
    194.     $(".contextmenu").css({
    195.       "left": posLeft,
    196.       "top": posTop
    197.     }).show();
    198.     //Prevent browser default contextmenu.
    199.     return false;
    200.   });
    201.  
    202.   //Hide contextmenu:
    203.   $(document).click(function(){
    204.     $(".contextmenu").hide();
    205.   });
    206.  
    207. });
    208.     </script>
    209.  
    210.   </head>
    211.  
    212.   <body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
    213.  
    214.     <div class="üstten-yükleyici">
    215.       <div class="üstten-yükleyici-durum"></div>
    216.     </div>
    217.  
    218.     <span class="diller">Türkçe:</span>
    219.     <div class="selamünaleyküm">
    220.       <h3>Hoş Geldiniz!</h3>
    221.       <p>Sayfanın üstünde, soldan sağa doğru, tasarımı güzel, animasyonlu bir yükleyici görmektesiniz.</br>Çalışma şekli: önce her şeyi bir dive alır ve ve hepsini gizler , sonra yükleyiciyi aktif eder yükleyici işini bitirdikten sonra yükleyici kapatır
    222.         ve diğer elemanları gösterir. Ayrıca sağ tık yapınca menü gelmektedir.</p>
    223.     </div>
    224.     <span class="diller">English:</span>
    225.     <div class="selamünaleyküm">
    226.       <h3>Welcome!</h3>
    227.       <p>
    228.         At the top of the page, you see a beautiful, animated loader from left to right.</br>
    229.         Mode of Operation: Before everything takes a div tag and and hides them all, then activates the installer, finishes the installer job and then closes the installer and displays the other elements. In addition, the right-click menu comes.</p>
    230.     </div>
    231. <!-- contextmenu (haşmetli sağtık menüsü - rightclick) -->
    232. <ul class="contextmenu">
    233.   <li><a href="http://bobzillaa.rf.gd/yukleyici.html">- Sayfa Yükleyici -</a></li>
    234.   <li><a href="http://bobzillaa.rf.gd/">Developer:</br> Bobzillaa</a></li>
    235. <li><a href="mailto:[email protected]">Eposta iletişim:</a></li>
    236. </ul>
    237.   </body>
    238.  
    239. </html>
    Yukarda html css js hepsi içinde dahildir.


    Teşekkürler

    [​IMG]
     
    DenyysBaba ve mbboyun bunu beğendi.
  2. AssassinDaan

    AssassinDaan You Shall Not Pass
    Forum Baş Yöneticisi

    Katılım:
    31 Ekim 2017
    Mesaj:
    2,769
    Beğenilmeler:
    3,287
    Eline sağlık.
     
  3. sametdnc

    sametdnc KingDNC
    Genel Moderatör

    Katılım:
    24 Mart 2017
    Mesaj:
    1,736
    Beğenilmeler:
    2,230
    Açıklasan iyiydi
     
    TheDark_Gamer bunu beğendi.

Bu Sayfayı Paylaş

Bu Konuya Bakan Kullanıcılar (Kullanıcı: 0, Ziyaretçi: 0)