「Programming note」カテゴリーアーカイブ

JavaScript10(サイト作成(2))

コメントを残す

1:テキストアニメーションの実装

テキストアニメーションで作成したmain.js・_mixin.scss・scroll-polyfill.js_・scroll.js・style.scss・text-animation.jsをこのように配置する。

貼り付けたmain.js内の以下を切り取り

scripts/main.jsにこのように貼り付け

続きを読む →

JavaScript9(サイト作成(1))

コメントを残す

これまでの知見からサイトを実際に作ってみる

1:まずするべきこと(レスポンシブ対応)

HTMLに設定を追加する

<metaname="viewport"content="width=device-width, initial-scale=1.0"/>

style.scssに以下のような設定をする

// スマホ画面の設定
@import "breakpoints/base";
// スマホ横向きのときの設定
@media (min-width: 480px) {
@import "breakpoints/480up";
}
// タブレットのときの設定
@media (min-width: 600px) {
@import "breakpoints/600up";
}

@media (min-width: 960px) {
@import "breakpoints/960up";
}

@media (min-width: 1280px) {
@import "breakpoints/1280up";
}
// Retinaディスプレイで適用
@media (min-resolution: 192dpi)
,(-webkit-min-device-pixel-ratio: 2) {
@import "breakpoints/2x";
}
// 印刷時のみ適用される設定
@media print {
@import "breakpoints/print";
}

モバイルファーストが基本

続きを読む →

フロント部分を作るときに最初にやっておくべきこと(共通クラス(UtilityClass))

コメントを残す

サイト表示に統一感をもたらすには？

共通クラスを作って複数回同じことを書かないようにする

例

ある程度よく使うもの(フォントのサイズやマージンやパディング)を共通化する。

スマホ用とパソコン用で設定を変えると良い

JavaScript8(ヒーロースライダー)

コメントを残す

7.5から続きます

ヒーロースライダーを作成する

作成するもの

こちらでSwiperを利用する(今回はswiper.min.jsを利用)

https://swiperjs.com/get-started

導入方法

HTMLに記述を追加することと下をコピー&ペースト

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

CSSにこれも追加すること

.swiper {
  width: 600px;
  height: 300px;
}

SCSSの記述

@import "mixin";

  $cWhite: white;

@import 'hero-slider';

main.jsの記述

document.addEventListener('DOMContentLoaded', function () {
// newでインスタンス化
  const hero = new HeroSlider('.swiper-container');
  hero.start();
});

HTMLの記述

続きを読む →

Javascript7.5(ページローダー)

コメントを残す

7から続きます

2:ページローダーの実装

作成するもの

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
  <link rel="stylesheet" href="loader.css">
  <script src="./pace.js"></script>
</head>
<body>
  <div id="global-container">
    <a href="https://github.hubspot.com/pace/docs/welcome/" target="_blank">PaceJs</a>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<style>
img {
 max-width: 100%;
}
</style>
  </div>
</body>
</html>

SCSSの記述

続きを読む →

JavaScript7(モバイルメニュー)

コメントを残す

1:スマホ画面用のメニューを作る(mixinはいつもどおりなので省略)

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 全体を囲むglobal-cotainerをさくせい-->
  <div id="global-container">
<!-- -->
  <div id="container">
  <div class="mobile-menu__cover"></div>
<header class="header">
  <button class="mobile-menu__btn">
  <span></span>
  <span></span>
  <span></span>
  </button>
</header>
  </div>
<!-- __２つあるのはSCSSにて -->
  <nav class="mobile-menu">
    <ul class="mobile-menu__main">
      <li class="mobile-menu__item">
       <a class="mobile-menu__link" href="#">
        <span class="main-title">Our Service</span>
        <span class="sub-title">サービスについて</span>
       </a>
      </li>
     <li class="mobile-menu__item">
      <a class="mobile-menu__link" href="#">
        <span class="main-title">About us</span>
        <span class="sub-title">私達について</span>
      </a>
     </li>
     <li class="mobile-menu__item">
      <a class="mobile-menu__link" href="#">
       <span class="main-title">Contact us</span>
       <span class="sub-title">コンタクト方法</span>
      </a>
     </li>
    </ul>
   </nav>
</div>
<script src="main.js"></script>
</body>
</html>

main.jsの記述

続きを読む →

SCSS(カバースライド)

コメントを残す

カバースライドアニメーションを作る

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
<!-- ホバーしたときに暗くする -->
    <!-- <div class="cover-slide hover-darken inview">
<img class="img-zoom" src="images/image-1.jpg" alt="">
  </div> -->
<!-- アス比を保ちたいときの設定 -->
  <div class="cover-slide hover-darken inview">
  <div class="bg-img-zoom img-bg50"></div>
  </div>
  </div>
</body>
</html>

mixinの記述

@mixin animation($name, $duration: 1s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: forwards) {
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
delay: $delay;
iteration-count: $iteration-count;
direction: $direction;
fill-mode: $fill-mode;
 }
}

SCSSの記述

続きを読む →

JavaScript6.2(スライドアニメーション)

コメントを残す

6.1から続きます

3:スライドアニメーションをスクロールの監視で発火する

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="container">
  <!-- <div class="cover-slide hover-darken inview">
  <div class="bg-img-zoom img-bg50"></div>
  </div> -->
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
</div>
  <script src="scroll-polyfill.js"></script>
  <script src="scroll.js"></script>
  <script src="main.js"></script>
</body>
</html>

SCSSの記述

続きを読む →

Javascript6.1(リファクタリング+機能追加)

コメントを残す

６から続きます。

2:リファクタリング+機能追加

mixinはいつもどおりなので省略

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <section>
    <div class="animate-title">Start Animation.</div>
  </section>
  <section>
    <div class="animate-title">Use what you have.</div>
  </section>
  <section>
    <div class="animate-title">Do what you can.</div>
  </section>
  <script src="text-animation.js"></script>
  <script src="scroll-polyfill.js"></script>
  <script src="scroll.js"></script>
  <script src="main.js"></script>
</body>
</html>

<script src=”scroll-polyfill.js”></script>を追加

続きを読む →

JavaScript6(画面のスクロールを検知して発火)

コメントを残す

5.5から続く

1:画面のスクロールを検知してテキストアニメーションをする

mixinはいつもどおりなので省略

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>
<body>
  <section>
    <div class="animate-title">Start Animation</div>
  </section>
  <section>
    <div class="animate-title">Use what you have.</div>
  </section>
  <section>
    <div class="animate-title">Do what you can.</div>
  </section>
<!-- main.jsよりも先に読み込ませる -->
  <script src="text-animation.js"></script>
  <script src="main.js"></script>
</body>
</html>

SCSSの記述

@import "mixin";
html {
  font-family: "Teko", sans-serif;
}
body {
  margin: 0;
}
section {
  position: relative;
  height: 100vh;
  background-color: teal;

  &:nth-child(2) {
    background-color: mediumvioletred;
}
  &:nth-child(3) {
    background-color: orange;
 }
}
.animate-title,
.tween-animate-title {
  position: absolute;
// 文字が画面中央に来るようにする
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  font-size: 2em;

  &.inview {
    opacity: 1;
  & .char {
    display: inline-block;
 }
}
  & .char {
    opacity: 0;
 }
}

.animate-title.inview .char {
@include animation(
$name: kf-animate-chars,
$duration: 0.5s,
$timing-function: cubic-bezier(0.39, 1.57, 0.58, 1),
$fill-mode: both
);

@for $i from 1 through 30 {
  &:nth-child(#{$i}) {
    animation-delay: $i * 0.04s;
  }
 }
}

@keyframes kf-animate-chars {
0% {
  opacity: 0;
  transform: translateY(-50%);
}

100% {
  opacity: 1;
  transform: translateY(0);
 }
}

main.jsの記述

続きを読む →