季卓芸/sample のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
季卓芸/sample へ行く。
- 1 (2021-06-28 (月) 20:04:08)
- 2 (2021-06-28 (月) 22:32:56)
- 3 (2021-06-29 (火) 01:06:20)
- 4 (2021-07-01 (木) 22:28:13)
- 5 (2021-09-07 (火) 17:39:09)
- 6 (2021-09-08 (水) 18:55:05)

Beijing Changyang Park　

↑

サイトの仕様

1-https://ki0722.github.io/BeijingChangyangPark/

↑

ButtonAnimation

参考リンク：https://design.kyusan-u.ac.jp/OpenSquareJP/?NavigationDesign
ハンバーガーアイコンをCSSでアニメーションさせています。 ButtonAnimation

   DEMO：https://koichi-inoue.github.io/Navi-ButtonAnimation/
   CODE：https://github.com/koichi-inoue/Navi-ButtonAnimation

↑

index.html

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="style.css">
    <title>Sample</title>
  </head>

  <body >

    <div id="container">

      <header>
        <h1>ButtonAnimaion</h1>
        <div class="navButton">
          <span class="navButton-line"></span>
          <span class="navButton-line"></span>
          <span class="navButton-line"></span>
        </div>
      </header>

      <nav>
        <ul class="menu">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">LINKS</a></li>
        </ul>
      </nav>

      <article>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </article>

      <footer>
          http://www.example.com
      </footer>

    </div>

  </body>

</html>

This Gist brought to you by gist-it. view raw index.html

↑

style.css

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}

#container {
  width: 70%;
  max-width: 640px;
  margin: 2rem auto;
  background: #EEE;
  overflow: hidden;
}

header {
  position: relative;
  background-color: #333;
  height: 6rem;
  box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
}

h1 {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: 1.25rem;
  color: white;
}

.navButton {
  position: absolute;
  top: 2.25rem;
  right: 2rem;
  z-index: 999;
}

.navButton-line {
  position: relative;
  display: block;
  height: 2px;
  width: 30px;
  background: #BBB;
  transition: ease .5s;
}

.navButton-line:nth-child(1) { top: 0; }
.navButton-line:nth-child(2) { margin: 8px 0; }
.navButton-line:nth-child(3) { top: 0; }

.navButton.isOpen .navButton-line:nth-child(1) {
  top: 10px;
  transform: rotate(135deg);
}

.navButton.isOpen .navButton-line:nth-child(2) {
  transform: translateY(-50%);
  opacity: 0;
}

.navButton.isOpen .navButton-line:nth-child(3) {
  top: -10px;
  transform: rotate(-135deg);
}

nav{
  position: relative;
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(64,64,64,.7);
  box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
}

.menu li {
  height: 3rem;
  border-bottom: solid 1px #AAA;
}

.menu a {
  display: block;
  padding: 0.75rem;
  text-align: center;
  color: #FFF;
}

.menu a:hover {
  background-color: #222;
}

article {
  padding: 3rem;
}

article p {
  text-align: justify;
  color: #555;
}

footer {
  background-color: #333;
  padding: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: white;
}

This Gist brought to you by gist-it. view raw style.css

↑

script.js

$(function(){

  $(".menu").hide();

  $(".navButton").click( function(){
    $(".navButton").toggleClass('isOpen');
    $(".menu").slideToggle();
  });

});

This Gist brought to you by gist-it.

↑

参考天気予報

↑

Tubular

↑

HTML

要点のみ記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-xxxxx.min.js"></script>
    <script src="js/jquery.tubular.xxxx.js"></script>
    <script src="js/sample.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <title>Sample Page</title>
</head>
<body>
   <div id="container">
   　：
   以下省略

↑

CSS

要点のみ記載します。

*{
    margin:0; 
    padding:0;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
      ：
    background-color:  rgba(255,255,255,0.2);　
      /*　例）コンテナの背景は20%半透明　*/
}

↑

JavaScript

$(function(){
    $('document').ready(function() {
        var options = { videoId: '動画のID'};
        $('#container').tubular(options);
    });
});

↑

Beijing Changyang Park

サイトの仕様

ButtonAnimation

index.html

style.css

script.js

参考天気予報

Tubular

HTML

CSS

JavaScript

参考リンク

"button"

"mouse"

Beijing Changyang Park　