Difference between revisions of "Team:USTC-Software/home.html"

Line 7: Line 7:
 
<link href="/wiki/index.php?title=Team:USTC-Software/css/style&amp;action=raw&amp;ctype=text/css" rel="stylesheet">
 
<link href="/wiki/index.php?title=Team:USTC-Software/css/style&amp;action=raw&amp;ctype=text/css" rel="stylesheet">
 
<script src="/wiki/index.php?title=Team:USTC-Software/js/fullpage&amp;action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
 
<script src="/wiki/index.php?title=Team:USTC-Software/js/fullpage&amp;action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
−
<script src="/wiki/index.php?title=Team:USTC-Software/js/semantic&amp;action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
+
<script src="/wiki/index.php?title=Team:USTC-Software/js/semantic&amp;action=raw&amp;ctype=text/javascript" type="text/javascript">
 +
</script>
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
  
  
 
     </head>
 
     </head>
 +
    <style>
 +
    #homepage{
 +
      transition: opacity 1s;
 +
    }
 +
 +
    body {
 +
  opacity: 1;
 +
  display: flex;
 +
  flex-direction: column;
 +
  justify-content: center;
 +
}
 +
body.ready {
 +
  opacity: 1;
 +
}
 +
.logo-animation {
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  width: 100%;
 +
  margin-top: 240px;
 +
}
 +
.letters {
 +
  position: relative;
 +
  display: flex;
 +
  width: 682px;
 +
  height: 162px;
 +
}
 +
.letter {
 +
  position: relative;
 +
  width: 162px;
 +
  height: 162px;
 +
}
 +
.letter:not(:first-child) {
 +
  margin-left: -42px;
 +
}
 +
.letter-i {
 +
  z-index: 1;
 +
  width: 82px;
 +
  transform-origin: 100% 50%;
 +
}
 +
.letter-u {
 +
  z-index: 1;
 +
  width: 142px;
 +
  transform-origin: 100% 50%;
 +
}
 +
.dot {
 +
  position: absolute;
 +
  width: 42px;
 +
  height: 42px;
 +
  transform: scale(0);
 +
}
 +
.dot-i {
 +
  top: 0;
 +
  left: 240px;
 +
}
 +
.dot-e {
 +
  bottom: 0;
 +
  right: 0;
 +
}
 +
.logo-icon {
 +
  display: flex;
 +
  position: absolute;
 +
  left: 230px;
 +
  top: -10px;
 +
  width: 222px;
 +
  height: 62px;
 +
}
 +
.icon {
 +
  width: 62px;
 +
  height: 62px;
 +
  opacity: 0;
 +
}
 +
.icon-text {
 +
  position: absolute;
 +
  top: 60px;
 +
  left: 60px;
 +
  width: 160px;
 +
  height: 62px;
 +
}
 +
.icon-text path,
 +
.icon-text polygon {
 +
  opacity: 0;
 +
}
 +
</style>
 +
 
     <body>
 
     <body>
 +
     
 +
      <div class="logo-animation">
 +
  <div class="letters">
 +
    <div class="letter letter-b">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#5E89FB">
 +
          <path class="fill in" stroke-width="40" d="M21 1V185M101 241H81a60 60 0 1 1 0-120c33.14 0 59 26.86 60 60v80"/>
 +
          <path class="fill out" stroke-width="40" d="M141 261V181c-1-33.14-26.86-60-60-60a60 60 0 1 0 0 120h20M21 185V1"/>
 +
          <path class="line out" stroke-width="2" d="M121 261V181.33C120.18 158.59 102.7 141 81 141a40 40 0 1 0 0 80h20v40H81A80 80 1 0 1 2 181V1h40V121c13.8 -15 89.66 -50 118.5 59V261Z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-i">
 +
      <svg viewBox="0 0 82 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#18FF92">
 +
          <path class="fill in" stroke-width="40" d="M21 161v20a60 60 0 0 0 60 60"/>
 +
          <path class="fill out" stroke-width="40" d="M81 241a60 60 0 0 1-60-60V161"/>
 +
          <path class="line out" stroke-width="2" d="M81 221a40 40 0 0 1-40-40V161H1V181a80 80 0 0 0 80 80v-40z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-o">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#FB155A">
 +
          <path class="fill in" stroke-width="40" d="M81 121a60 60 0 1 0 0 120a60 60 0 1 0 0 -120"/>
 +
          <path class="fill out" stroke-width="40" d="M81 121a60 60 0 1 1 0 120a60 60 0 1 1 0 -120"/>
 +
          <path class="line out" stroke-width="2" d="M81 141a40 40 0 0 0 0 80a40 40 0 1 0 0 -80v-40a80 80 0 0 0 0 160a80 80 0 1 0 0 -160Z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-h">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#5E89FB">
 +
          <path class="fill in" stroke-width="40" d="M21 261V1"/>
 +
          <path class="fill out" stroke-width="40" d="M21 1v260"/>
 +
          <path class="fill in" stroke-width="40" d="M21 261V181c1-33.14 26.86-60 60-60a60 60 0 0 1 60 60v80"/>
 +
          <path class="fill out" stroke-width="40" d="M141 261V181a60 60 0 0 0-60-60c-33.14 0-59 26.86-60 60v80"/>
 +
          <path class="line out" stroke-width="2" d="M41 261V1H1v260h40z"/>
 +
          <path class="line out" stroke-width="2" d="M1 261V180.4C2.35 136.27 37.2 101 81 101a80 80 0 0 1 80 80v80h-40V181a40 40 0 0 0-40-40c-21.7 0-39.18 17.59-40 40.33V161H1z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-u">
 +
      <svg viewBox="0 0 142 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#18FF92">
 +
          <path class="fill in" stroke-width="40" d="M21 121v70a50 50 0 0 0 100 0v-70"/>
 +
          <path class="fill out" stroke-width="40" d="M121 121v70a50 50 0 0 1 -100 0v-70"/>
 +
          <path class="line out" stroke-width="2" d="M1 121v70a70 70 0 0 0 140 0v-70h-40v70a30 30 0 0 1 -60 0v-70z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-b">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#FB155A">
 +
          <path class="fill in" stroke-width="40" d="M21 1V185M81 241a60 60 0 1 1 0-120a60 60 0 1 1 0 120"/>
 +
          <path class="fill out" stroke-width="40" d="M81 241a60 60 0 1 0 0 -120a60 60 0 1 0 0 120M21 185V1"/>
 +
          <path class="line out" stroke-width="2" d="M1 1v181a80 80 0 1 0 160 0a80 80 0 0 0 -160 0h40a40 40 0 1 0 80 0a40 40 0 0 0 -80 0v-181z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
      <div style="opacity: 0;" id="homepage">
 
         <div class="ui menu pointing fixed" id="menu">
 
         <div class="ui menu pointing fixed" id="menu">
−
                 <a class=" item" href="home.html">Home</a>
+
                 <a class=" item" href="index.html"><img style="width:6em" src="https://static.igem.org/mediawiki/2018/4/42/T--USTC-Software--logo3.jpg"></a>
 
                 <div class="ui item dropdown">Project
 
                 <div class="ui item dropdown">Project
 
<div class="menu">
 
<div class="menu">
Line 65: Line 216:
 
     </div>
 
     </div>
 
</div>   
 
</div>   
−
</div>
 
 
</div>
 
</div>
 
         <div id="fullpage">
 
         <div id="fullpage">
Line 71: Line 221:
 
                 <div class="p1-title">biohub</div>
 
                 <div class="p1-title">biohub</div>
 
             </div>
 
             </div>
−
             <div class="section">
+
             <div class="section" id="section2">
 +
                [[File:Editor1_1.mp4]]
 
                 <div class="slide" data-anchor="slide1">Slide 2.1</div>
 
                 <div class="slide" data-anchor="slide1">Slide 2.1</div>
 
                 <div class="slide" data-anchor="slide2">Slide 2.2</div>
 
                 <div class="slide" data-anchor="slide2">Slide 2.2</div>
Line 80: Line 231:
 
         <script src="/wiki/index.php?title=Team:USTC-Software/js/home&amp;action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
 
         <script src="/wiki/index.php?title=Team:USTC-Software/js/home&amp;action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
 
<script src="/wiki/index.php?title=Team:USTC-Software/js/init&amp;action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
 
<script src="/wiki/index.php?title=Team:USTC-Software/js/init&amp;action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
 +
</div>
 
     </body>
 
     </body>
 +
    <script>
 +
        var logoEl = document.querySelector('.logo-animation');
 +
var pathEls = document.querySelectorAll('.logo-animation path:not(.icon-curve)');
 +
var innerWidth = window.innerWidth;
 +
var maxWidth = 740;
 +
var logoScale = innerWidth <= maxWidth ? innerWidth / maxWidth : 1;
 +
var logoTimeline = anime.timeline({
 +
complete: function() {
 +
  document.querySelector('#homepage').style.opacity = 1;
 +
  logoEl.style.display = 'None';
 +
  $(document).ready(function() {
 +
  $('#fullpage').fullpage(
 +
  );
 +
});
 +
}
 +
});
 +
 +
logoEl.style.transform = 'translateY(50px) scale('+logoScale+')';
 +
 +
for (var i = 0; i < pathEls.length; i++) {
 +
  var el = pathEls[i];
 +
  el.setAttribute('stroke-dashoffset', anime.setDashoffset(el));
 +
}
 +
 +
logoTimeline
 +
  .add({
 +
  targets: '.dot-e',
 +
  translateX: [
 +
    { value: -600, duration: 520, delay: 200, easing: 'easeInQuart' },
 +
    { value: [-100, 0], duration: 500, delay: 1000, easing: 'easeOutQuart' }
 +
  ],
 +
  scale: [
 +
    { value: [0, 1], duration: 200, easing: 'easeOutBack' },
 +
    { value: 0, duration: 20, delay: 500, easing: 'easeInQuart' },
 +
    { value: 1, duration: 200, delay: 1000, easing: 'easeOutQuart' },
 +
    { value: 0, duration: 400, delay: 500, easing: 'easeInBack' }
 +
  ],
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.dot-i',
 +
  translateY: { value: [-200, 0], duration: 500, elasticity: 400 },
 +
  scale: [
 +
    { value: [0, 1], duration: 100, easing: 'easeOutQuart' },
 +
    { value: 0, duration: 400, delay: 1400, easing: 'easeInBack' }
 +
  ],
 +
  delay: 1200,
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.fill.in',
 +
  strokeDashoffset: {
 +
    value: [anime.setDashoffset, 0],
 +
    duration: 600,
 +
    delay: function(el, i, t) { return 700 + ( i * 100 ); },
 +
    easing: 'easeOutQuart'
 +
  },
 +
  stroke: {
 +
    value: ['#FFF', function(el) { return anime.getValue(el.parentNode, 'stroke') } ],
 +
    duration: 500,
 +
    delay: 500,
 +
    easing: 'easeInQuad'
 +
  },
 +
  opacity: {
 +
    value: 0,
 +
    duration: 1,
 +
    delay: function(el, i, t) { return 1900 + ( i * 80 ); },
 +
  },
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.fill.out',
 +
  strokeDashoffset: [
 +
    { value: [anime.setDashoffset, anime.setDashoffset], duration: 1890 },
 +
    {
 +
      value: [0, anime.setDashoffset],
 +
      duration: 800,
 +
      delay: function(el, i) { return (i * 80); },
 +
      easing: 'easeInQuart'
 +
    }
 +
  ],
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.line.out',
 +
  strokeDashoffset: {
 +
    value: [0, anime.setDashoffset],
 +
    duration: 1200,
 +
    delay: function(el, i, t) { return 2500 + ( i * 100 ); },
 +
    easing: 'easeInQuart'
 +
  },
 +
  strokeWidth: {
 +
    value: [0, 2],
 +
    delay: function(el, i, t) { return 2000 + ( i * 100 ); },
 +
    duration: 200,
 +
    easing: 'linear'
 +
  },
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.icon',
 +
  opacity: { value: 1, duration: 10, delay: 2800, easing: 'linear' },
 +
  translateY: { value: 60, duration: 800 },
 +
  delay: 4200,
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.icon-line',
 +
  strokeDashoffset: [
 +
    { value: [anime.setDashoffset, anime.setDashoffset], duration: 3000 },
 +
    { value: 0, duration: 1200, easing: 'easeInOutQuart' }
 +
  ],
 +
  strokeWidth: {
 +
    value: [8, 2],
 +
    delay: 3000,
 +
    duration: 800,
 +
    easing: 'easeInQuad'
 +
  },
 +
  stroke: {
 +
    value: ['#FFF', function(el) { return anime.getValue(el, 'stroke') } ],
 +
    duration: 800,
 +
    delay: 3400,
 +
    easing: 'easeInQuad'
 +
  },
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: ['.icon-text path', '.icon-text polygon'],
 +
  translateY: [50, 0],
 +
  opacity: { value: [0, 1], duration: 100, easing: 'linear' },
 +
  delay: function(el, i, t) { return 4200 + ( i * 20 ); },
 +
  offset: 0
 +
});</script>
 
</html>
 
</html>

Revision as of 09:17, 17 October 2018