印刷術

In this example below you will see how to do a 印刷術 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by CAIJIN, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright CAIJIN ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>印刷術</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<nav class="navbar navbar-default navbar-fixed-top navbar-top">
  <div class="container">
    <header class="navbar-header"> <a class="navbar-brand">PRINT</a></header>
    <div class="navbar-collapse collapse">
      <div class="nav navbar-nav navbar-right">
        <li><a href="#section_ask">引言 INTRO</a></li>
        <li><a href="#section_about">簡介 ABOUT</a></li>
        <li><a href="#section_story">故事 STORY</a></li>
        <li><a href="#section_feature">未來 FUTURE</a></li>
      </div>
    </div>
  </div>
</nav>
<header class="jumbotron">
  <div class="container">
    <h1 data-0="transform: translateY(-50px)" data-500="transform: translateY(100px)">印刷術,知識的複製與革命</h1>
    <hr/>
    <h4>對人類的文化知識的傳播起到了決定性的作用</h4>
  </div>
</header>
<section id="section_ask">
  <div class="container">
    <div class="row">
      <div class="col-sm-5 img" data-0="transform: translateX(-200px)" data-500="transform: translateY(0px)"></div>
      <div class="col-sm-7">
        <h2 data-300="opacity: 0" data-500="opacity: 1">如果今天沒有印表機,一本書需要多久時間產生呢?</h2>
      </div>
    </div>
  </div>
</section>
<section id="section_about">
  <div class="container">
    <div class="row">
      <div class="col-sm-12" data-bottom-top="transform: translateY(-50px) ;opacity: 0;" data-center="transform: translateY(0px) ;opacity: 1;">
        <h1>印刷的故事</h1>
        <hr/>
      </div>
      <div class="col-md-4 col-sm-6">
        <div class="img_wrap" data-bottom-top="transform: translateY(-50px) ;opacity: 0;" data-center="transform: translateY(0px) ;opacity: 1;"><img src="https://img.epochtimes.com.tw/upload/images/2014/02/14/80531_medium.jpg" alt=""/></div>
        <h3>起源</h3>
        <p data-bottom-top="transform: translateY(-50px) ;opacity: 0;" data-center="transform: translateY(0px) ;opacity: 1;">世界上最早的雕版印刷是中國發明的。十九世紀末曾有日本學者島田主張中國在6世紀的六朝就有雕版印刷,根據是北齊顏之推《顏氏家訓》有「書本」一詞;又根據明《河汾燕閑錄》中「隋開皇十三年十二月八日敕廢像遺經悉令雕版」一語,認為最晚在隋朝已有雕版印刷。</p>
      </div>
      <div class="col-md-4 col-sm-6">
        <div class="img_wrap" data-bottom-top="transform: translateY(-50px) ;opacity: 0;" data-center="transform: translateY(0px) ;opacity: 1;"><img src="http://blog.terewong.com/wp-content/uploads/2012/12/121210IMG_2394.jpg" alt=""/></div>
        <h3>活字印刷</h3>
        <p data-bottom-top="transform: translateY(-50px) ;opacity: 0;" data-center="transform: translateY(0px) ;opacity: 1;">是由中國北宋1040年的畢昇發明。由當時著名科學家沈括的《夢溪筆談》記載保存,完整無遺地包括制字、貯字、排版、拆板和刷印等一整套活字印刷術工序,與後世鉛字排版的原理完全相同。<br /><br />畢昇發明的膠泥活字印刷經過精心設計,反覆試驗才獲得成功。早期活字印刷品的陸續發現和泥活字實證研究成果,證實了畢昇活字印刷術的真實性和科學性,有力地否定了國外學者對畢昇發明活字印刷術的質疑。</p>
      </div>
      <div class="col-md-4 col-sm-6">
        <div class="img_wrap" data-bottom-top="transform: translateY(-50px) ;opacity: 0;" data-center="transform: translateY(0px) ;opacity: 1;"><img src="https://i1.kknews.cc/large/2095/7736648294" alt=""/></div>
        <h3>歐洲</h3>
        <p data-bottom-top="transform: translateY(-50px) ;opacity: 0;" data-center="transform: translateY(0px) ;opacity: 1;">歐洲同中國一樣,最先出現的是雕版印刷,爾後出現的是活字印刷。歐洲人發現中國的活字印刷比雕版印刷效率更高於是很快就把雕版印刷淘汰掉了。<br /><br />關於中國印刷術傳入歐洲的路線,在很多著作中所談的有三條。一條是歐洲的傳教士和旅行家直接把中國的印刷術帶到歐洲;另一條是經由中亞、西亞、北非,最後傳到歐洲;第三條則是由俄國人傳到歐洲其他國家。</p>
      </div>
    </div>
  </div>
</section>
<section id="section_story">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-5 map" data-bottom-top="background-size: 150%;background-position: 0% 0% ;" data-center="background-size: 100%;background-position: 50% 50% ;">
        <div class="cross">x</div>
      </div>
      <div class="col-sm-7">
        <div class="col-sm-12">
          <h2>印刷對知識傳播的影響</h2>
          <hr/>
        </div>
        <div class="col-sm-12 features" data-bottom-top="transform: scale(1.5) ;opacity: 0;" data-center="transform: scale(1) ;opacity: 1;">
          <div class="col-sm-4"><i class="fa fa-files-o"></i>
            <h4>快速複製</h4>
          </div>
          <div class="col-sm-4"><i class="fa fa-paper-plane-o"></i>
            <h4>知識傳遞</h4>
          </div>
          <div class="col-sm-4"><i class="fa fa-floppy-o"></i>
            <h4>文化保存</h4>
          </div>
        </div>
        <div class="col-sm-12">
          <p>印刷機的開發使知識的傳播發生了革命性的變化:1469年在威尼斯成立第一家印刷社(即出版社),1500年該城就有印刷廠417家。1476年,威廉·卡克斯頓在英格蘭成立第一家印刷社°在1539年,西班牙人Juan Pablos在墨西哥的墨西哥城。Stephen Day於1628年在美國麻塞諸塞海灣地區建立了北美第一家印刷社,並協助成立了劍橋出版社。</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="section_feature">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h2>現代的印刷術</h2>
        <hr/>
      </div>
      <div class="col-sm-6" data-bottom-top=" filter: grayscale(100%)" data-center="filter: grayscale(0%)"><img src="http://www.falkenporzellan.com/fileadmin/_migrated/pics/Druckerei_2_02.jpg" alt=""/></div>
      <div class="col-sm-6 feature" data-bottom-top="transform: translateX(50px);" data-center="transform: translateX(0px);"><i class="fa fa-desktop"> </i>
        <h3>電腦印刷</h3>
        <p>文件可通過雷射印字機、噴墨印表機或其它電腦印表機。在最近幾年,計算機列印和工業化印刷工藝已經融合在一起,導致數位印刷的發展。</p>
      </div>
      <div class="col-sm-6 feature" data-bottom-top="transform: translateX(50px);" data-center="transform: translateX(0px);"><i class="fa fa-cubes"></i>
        <h3>3D列印</h3>
        <p>三維列印 是一種製造技術,物體是由三維文件和三維印表機生成。物體製造是通過一層層材料的疊加而列印出來. 在2012年, 一些公司例如Sculpteo或Shapeways提出網上的三維列印解決方案.</p>
      </div>
    </div>
  </div>
</section>
<footer class="jumbotron">
  <div class="container">
    <h2>想了解更多印刷的故事嗎?</h2>
    <input class="form-control" type="text" placeholder="Email"/>
    <hr/>
    <button class="btn btn-default">訂閱故事</button>
  </div>
</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/CAIJIN/andx5370andx5237andx8853-BpLNmP */
@charset "UTF-8";
* {
  font-family: "微軟正黑體";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
}

body {
  height: 1000px;
  overflow-x: hidden;
}

section {
  padding: 50px 0px;
}

header.jumbotron {
  margin-bottom: 0px;
  text-align: center;
  background-image: url(http://mmbiz.qpic.cn/mmbiz/5feXIiajDItf8T2YZoxCuVrhFMrVibfeZ8KGD7No9nL7bCUtpviblEmIia4okbL7aHqTNdGd4zWmcO83WfxVNZvibbg/0?wx_fmt=jpeg);
  background-size: cover;
  background-attachment: fixed;
}
header.jumbotron hr {
  max-width: 50px;
  border: solid 2px #ff6e3a;
}
header.jumbotron .container {
  color: white;
  padding: 200px 0px;
}
header.jumbotron h4 {
  color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
}

#section_ask {
  background-color: #ff6e3a;
}
#section_ask .col-sm-5.img {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Printer_in_1568-ce.png/465px-Printer_in_1568-ce.png);
  height: 350px;
  mix-blend-mode: multiply;
}
#section_ask h2 {
  margin-top: 120px;
  padding: 0px 20px;
}

section#section_about img {
  width: 130%;
}
section#section_about .img_wrap {
  height: 220px;
  overflow: hidden;
}

section#section_story {
  background-color: #222;
  color: white;
  padding: 0px;
}
section#section_story .col-sm-5 {
  background-image: url(http://stutzfamily.com/mrstutz/Maps/USHistory/europe1938.gif);
  height: 400px;
  background-size: 100% auto;
}
section#section_story .col-sm-5 .cross {
  position: absolute;
  left: 22%;
  top: 38%;
  color: red;
  font-size: 30px;
  font-weight: bold;
}
section#section_story .col-sm-7 {
  text-align: center;
}
section#section_story .col-sm-7 .col-sm-12.features {
  margin-top: 40px;
  margin-bottom: 40px;
}
section#section_story .col-sm-7 i {
  font-size: 40px;
}

section#section_feature img {
  width: 100%;
}
section#section_feature i {
  font-size: 30px;
}
section#section_feature .feature {
  padding-top: 10px;
  padding-botom: 10px;
}

footer.jumbotron {
  margin-bottom: 0px;
  text-align: center;
  background-image: url(http://mmbiz.qpic.cn/mmbiz/5feXIiajDItf8T2YZoxCuVrhFMrVibfeZ8KGD7No9nL7bCUtpviblEmIia4okbL7aHqTNdGd4zWmcO83WfxVNZvibbg/0?wx_fmt=jpeg);
  background-size: cover;
  background-attachment: fixed;
}
footer.jumbotron input {
  background-color: transparent;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
footer.jumbotron .container {
  color: white;
  padding: 60px 0px;
}
footer.jumbotron hr {
  max-width: 50px;
  border: solid 2px #ff6e3a;
}

nav.navbar {
  transition: 0.5s;
}

nav.navbar.navbar-default.navbar-fixed-top.navbar-top {
  background-color: transparent;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a {
  color: white;
  transition: 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a:hover {
  color: #ff6e3a;
}


/*Downloaded from https://www.codeseek.co/CAIJIN/andx5370andx5237andx8853-BpLNmP */
$(window).scroll(function(evt){
  
    if( $(window).scrollTop() > 0 ){
      
      $('.navbar').removeClass('navbar-top');
       
       
       }
    else{
      
      $('.navbar').addClass('navbar-top');

    }
  
});

var s = skrollr.init();

Comments