daily pastebin goal
31%
SHARE
TWEET

Untitled

a guest Jul 12th, 2018 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.         #bgi{
  3.             display:table;
  4.             top:0px;
  5.             left:0px;
  6.             width:100%;
  7.             height:100vh;
  8.             background-color:#c7b299;
  9.             background-repeat:no-repeat;
  10.             background-position:center center;
  11.             background-image: url('$blank.getData()');
  12.             -webkit-transition: background-image 2s ease-in-out;
  13.             transition: background-image 2s ease-in-out;
  14.             -webkit-background-size: cover;
  15.             -moz-background-size: cover;
  16.             -o-background-size: cover;
  17.             background-size: cover;
  18.             justify-content:center;
  19.             align-items:center;
  20.             vertical-align: middle;
  21.             min-height: 570px;
  22.         }
  23.         .bgi-wrapper{
  24.             display: table-cell;
  25.             vertical-align: middle;
  26.             text-align: center;
  27.         }
  28.         #s1-2{
  29.             display: inline-block;
  30.             vertical-align: middle;
  31.             position: relative;
  32.             top:-20px;
  33.         }
  34.         #s1,#s2{
  35.             opacity:0;
  36.             font-size:60px;
  37.             color:white;
  38.             text-shadow: 2px 2px 2px rgba(150,150,150,0.3);
  39.             -webkit-transition: opacity 1s;
  40.             transition: opacity 1s;
  41.         }
  42.         #s3{
  43.             margin:auto;
  44.             text-align: center;
  45.             vertical-align: middle;
  46.             display: none;
  47.         }
  48.         .nav{
  49.             opacity:0;
  50.             -webkit-transition: opacity 1s;
  51.             transition: opacity 1s;
  52.             text-align: left;
  53.             padding-left: 20px;
  54.         }
  55.         .nav a{
  56.             color:black;
  57.             line-height:55px;
  58.             font-size:20px;
  59.             font-weight:900;
  60.         }
  61.         .title{
  62.             color:white;
  63.             font-size:70px;
  64.             text-shadow: 2px 2px 2px rgba(150,150,150,0.3);
  65.             letter-spacing:7px;
  66.             line-height: 1;
  67.             font-weight: 900;
  68.             position: relative;
  69.             top:180px;
  70.             transition: top 1s;
  71.             font-feature-settings: "liga" 0;
  72.             padding: 10px 0 20px;
  73.         }
  74.         .navbar{
  75.             display: none;
  76.             position: absolute;
  77.             top:0px;
  78.             left:0px;
  79.             background-color: transparent;
  80.             border:none;
  81.         }
  82.         .navbar-default .navbar-link,
  83.         .navbar-default .navbar-text{
  84.             margin-top:20px;
  85.             color: #000;
  86.         }
  87.         #logo-img{
  88.             height:51px;
  89.             width:auto;
  90.             margin-top:-8px;
  91.         }
  92.         #menu-text{
  93.             display:inline-block;
  94.             padding:19px 30px;
  95.             background-color:#FAAF40;
  96.             margin-right:15px;
  97.             float:right;
  98.         }
  99.  
  100.         .font-change{
  101.             font-size:0;
  102.         }
  103.  
  104.         .font-small{
  105.             font-size:13px;
  106.         }
  107.  
  108.         .font-middle{
  109.             font-size:18px;
  110.         }
  111.  
  112.         .font-large{
  113.             font-size:23px;
  114.         }
  115.  
  116.         .font-change + .font-change{
  117.             margin-left:0px;
  118.         }
  119.  
  120.         .font-change:hover{
  121.             cursor:pointer;
  122.         }
  123.  
  124.         .navbar-default .font-wrapper{
  125.             margin-top:0px;
  126.             position:relative;
  127.             top:10px;
  128.         }
  129.  
  130.         .lang:hover{
  131.             cursor:pointer;
  132.         }
  133.  
  134.         .lang+.lang{
  135.             display:inline;
  136.             padding-left:4px;
  137.             margin-left:0px;
  138.             border-left:1px solid #000;
  139.         }
  140.     </style>
  141.     <nav class="navbar navbar-default">
  142.         <!-- Brand and toggle get grouped for better mobile display -->
  143.         <div>
  144.           <a class="navbar-brand" href="home">
  145.             <img src="$logo.getData()" id="logo-img" alt="logo">
  146.           </a>
  147.           </button>
  148.               <span id="menu-text">HOME</span>
  149.           <span class="navbar-text hidden-xs font-wrapper">
  150.             <span class="font-change font-small" onclick="changeFontSize('small')">A</span>
  151.             <span class="font-change font-middle" onclick="changeFontSize('medium')">A</span>
  152.             <span class="font-change font-large" onclick="changeFontSize('large')">A</span>
  153.           </span>
  154.           <span class="navbar-text">
  155.             <!--<span id="nav-en" class="lang" onclick="changeLang('en_US')">ENG</span>-->
  156.             <span id="nav-tw" class="lang" onclick="changeLang('zh_TW')">䌓</span>
  157.             <span id="nav-cn" class="lang" onclick="changeLang('zh_CN')">簡</span>
  158.           </span>
  159.         </div>
  160.     </nav>
  161.     <div id="bgi">
  162.         <div class="bgi-wrapper">
  163.             <div id="s1-2">
  164.                 <div id="s1">Perserving our legacy</div>
  165.                 <div id="s2">and keeping history alive</div>
  166.             </div>
  167.             <div id="s3">
  168.                 <div>
  169.                     <div class="title">Conservation Office</div>
  170.                     <div class="nav"><a href="about_us">About us</a></div>
  171.                     <div class="nav"><a href="airport_display">Airport Display</a></div>
  172.                     <div class="nav"><a href="#">Education and Extension</a></div>
  173.                     <div class="nav"><a href="#">Publications</a></div>
  174.                     <div class="nav"><a href="#">Link</a></div>
  175.                     <div class="nav"><a href="#">Resources Centre</a></div>
  176.                     <div class="nav"><a href="#">Back to LCSD</a></div>
  177.                 </div>
  178.             </div>
  179.         </div>
  180.     </div>
  181.  
  182.     #foreach($n in $bgi.getSiblings())
  183.     <img src="$n.getData()" class="bgi" style="position:absolute;top:0;visibility:hidden;width:0px;height:0px;"/>
  184.     #end
  185.  
  186.     <script>
  187.     var k = 1;
  188.     var i = 1;
  189.     var l = 0;
  190.     var bgi = [];
  191.     function animation(){
  192.         //if(k==0) $('#s1').css('opacity',1);
  193.         if(k==1){
  194. $('#s2').css('opacity',1);
  195.  $('#s1').css('opacity',1);
  196.             setTimeout(function(){
  197. $('.navbar').fadeIn(1000);
  198.                
  199.             },0);
  200. }
  201.         if(k==2){
  202.             $('#s1').css('opacity','0');
  203.             $('#s2').css('opacity','0');
  204.             setTimeout(function(){
  205.                 $('#s1-2').css('display','none');
  206.                 $("#s3").fadeIn(1000).css("display","inline-block");
  207.             },1000);
  208.         }
  209.         if(k==3){
  210.             $('.title').css('top','0px');
  211. setTimeout(function(){
  212.                 $('.nav').css('opacity',1);
  213.             },1000);
  214.         }
  215.         if(k==4){
  216.             $('#bgi').css('background-image','url($firstpic.getData())');
  217.  
  218.         }
  219.         k++;
  220.     }
  221.  
  222.     function loopImage(){
  223.         setTimeout(function(){animation()},1000);
  224.         if(k>5) $('#bgi').css('background-image','url('+bgi[i++]+')');
  225.         if(i>=l)i=0;
  226.                 if(k>=4)setTimeout(function(){loopImage()},5000);
  227.         if(k<4&&k>0)setTimeout(function(){loopImage()},2000);
  228.     }
  229.  
  230.     $(function(){
  231.         $('.bgi').each(function(){
  232.             bgi.push($(this).attr('src'));
  233.         });
  234.         l = bgi.length;
  235.         loopImage();
  236.     });
  237.     </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top