季卓芸/sample の変更点 - 九州産業大学大学院芸術研究科

追加された行はこの色です。
削除された行はこの色です。
季卓芸/sample へ行く。
季卓芸/sample の差分を削除
#author("2021-09-08T18:55:05+09:00","default:art-gs","art-gs")
#author("2021-10-28T16:59:42+09:00","default:art-gs","art-gs")
#setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8)
#image(2.png,left,10%)
*Beijing Changyang Park　



***CONTENTS
#contents2_1
~
~
***1.webサイト
ウェブサイト &color(red){TYPE1};
#iframe(https://ki0722.github.io/BeijingChangyangPark12/)
-https://ki0722.github.io/BeijingChangyangPark12/
~
~
***2.webサイト
ウェブサイト &color(red){TYPE2};
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
-https://ki0722.github.io/BeijingChangyangPark4/
~
~
***３.webサイト
ウェブサイト &color(red){TYPE3};
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
-https://ki0722.github.io/BeijingChangyangPark9/

~
~


***1. &color(red){ウェブサイト1};
***サイトの仕様
#iframe(https://ki0722.github.io/BeijingChangyangPark/)
1-https://ki0722.github.io/BeijingChangyangPark/
~
~

***2. &color(red){ウェブサイト2};
**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.


**ToggleBasic

jQuery のSlideToggle() によりクリックで開閉する最もシンプルな事例です。
メニューアイコンには FontAwesomeを利用しています。

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

***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>ToggleBasic</h1>
         <div class="navButton">
           <a href="#"><i class="fas fa-bars"></i></a>
         </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: 2rem;
   right: 2rem;
 }

 .navButton a {
   color: #FFF;
   font-size: 1.25rem;
 }

 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(){
     $(".menu").slideToggle();
   });

 });

 This Gist brought to you by gist-it. view raw script.js




**ToggleBasic2

jQuery の toggleClasss() でCLASSの付け替えを行うパターンです。

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

***index.html

 上記の事例と同じです。

***style.css

 以下、要点のみ掲載します。

 .menu {
   position: absolute;
      ：
   display: none;
 }
 .menu.isOpen {
   display: block;
 }


 ***script.js

 $(function(){

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

 });

 This Gist brought to you by gist-it. view raw script.js




***参考天気予報
-https://blog.csdn.net/qq_39019822/article/details/85248755
-https://www.tianqi.com/plugin/
~
#iframe(https://ki0722.github.io/BeijingChangyangPark2/)
2-https://ki0722.github.io/BeijingChangyangPark2/
~
~


***3. &color(red){ウェブサイト3};
**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);
     });
 });

***参考リンク
-https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=jQuery%2FTubular&word=Tubular%20Sample


#iframe(https://ki0722.github.io/BeijingChangyangPark3/)
3-https://ki0722.github.io/BeijingChangyangPark3/
~
~

***4. &color(red){ウェブサイト4};
***参考リンク
https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Parallax
    公式サイト：http://pixelcog.github.io/parallax.js/
    DEMO：https://koichi-inoue.github.io/JQ_Parallax/
    CODE：https://github.com/koichi-inoue/JQ_Parallax

***index.html

    <section class="parallax-window" data-parallax="scroll" data-image-src="images/other/other_23.jpg">

        <div class="btn-wrap--perspective">
          <a href="about.html" class="btn btn-3d btn-3db">About<i class="fas fa-angle-down fa-position-right"></i></a>
        </div>

    </section>

***"button"
-"button"
--https://jajaaan.co.jp/css/button/
 button作る原因は見にやすいです。
--https://jajaaan.co.jp/css/button/
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
~
~


***5. &color(red){ウェブサイト5};
#iframe(https://ki0722.github.io/BeijingChangyangPark5/)
5-https://ki0722.github.io/BeijingChangyangPark5/
~
~


***6. &color(red){ウェブサイト6};
#iframe(https://ki0722.github.io/BeijingChangyangPark6/)
6-https://ki0722.github.io/BeijingChangyangPark6/
~
~


***7. &color(red){ウェブサイト7};
#iframe(https://ki0722.github.io/BeijingChangyangPark7/)
7-https://ki0722.github.io/BeijingChangyangPark7/
~
~


***8. &color(red){ウェブサイト8};
#iframe(https://ki0722.github.io/BeijingChangyangPark8)
8-https://ki0722.github.io/BeijingChangyangPark8/
~
~


***9. &color(red){ウェブサイト9};
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~
~


***10. &color(red){ウェブサイト10};
#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
10-https://ki0722.github.io/BeijingChangyangPark10/
~
~



***11. &color(red){ウェブサイト11};
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider

***BxSlider｜jQuery Content Slider / Responsive jQuery Slider
公式サイト：http://bxslider.com/
 DEMO：https://koichi-inoue.github.io/JQ_bxSlider/
 CODE：https://github.com/koichi-inoue/JQ_bxSlider

***"mouse"
--https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/mouse-cursor-css-jquery/
#iframe(https://ki0722.github.io/BeijingChangyangPark11home/)
11-https://ki0722.github.io/BeijingChangyangPark11home/
~
***SUMMER
#iframe( https://ki0722.github.io/BeijingChangyangPark11summer/)
-https://ki0722.github.io/BeijingChangyangPark11summer/
"参考1"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples
~
***TYPE4についてページJump
#iframe( https://ki0722.github.io/Beijingcangyangpark11summer2/)
-https://ki0722.github.io/Beijingcangyangpark11summer2/

~
***TYPE4sample(記録だけです)
"summer page OK"
#iframe(https://ki0722.github.io/Beijingchangyangpark11sample/)
-https://ki0722.github.io/Beijingchangyangpark11sample/
~
~
~