Javascript ex2(サイト作成詳細Ver)

コメントを残す

サイトの作成手順などまとめ

いつでも、すぐに作れるように

1:まず初めにindex.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>
</head>
<body>
 
</body>
</html>

2：レスポンシブデザインにしたいので、Stylesというフォルダーを作成し、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";
}

3:フォルダーbreakpointsを作成してその中に各画面サイズ用の設定のためのscssを作成する(中身は後で作成します)。

4：ヒーロースライダーの機能の実装+Googlefontの利用とbootstrap-reboot.cssの準備)

index.htmlを以下のように記述して、googlefontsとbootstrap-reboot.css(中身は後で配置)を利用する。

<!DOCTYPE html>
<html lang="ja">
<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>Flower Garden</title>
<meta name="description" content="This site is a my site.">
<link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/vendors/swiper.min.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div id="global-container">
<div id="container">
<div id="content">
<div class="hero">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__title">Magnificence</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Solidarity</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Gentility</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/vendors/swiper.min.js"></script>
<script src="scripts/libs/hero-slider.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

↓の画像を参考に各ファイルを配置する

  1. フォルダーscriptsを作成してその直下にlibsのフォルダーを作成してヒーロスライダーのjsファイルを記述する。
  2. フォルダーscriptsの直下にvendorsのフォルダーを作成してswiper.min.jsを配置
  3. scriptsの直下にmain.jsを配置
  4. stylesの直下にフォルダーbreakpointsを作成して各scssファイルを作成する。
  5. stylesの直下にフォルダーmodulesを作成して各scssファイルを作成する。
  6. stylesの直下にフォルダーvendorsを作成してswiper.min.cssを配置する。
  7. stylesの直下にstyle.scssを配置する。

↑の詳細

1：hero-slider.jsの詳細

class HeroSlider {
constructor(el) {
this.el = el;
this.swiper = this._initSwiper();
}

_initSwiper() {
// returnでインスタンスに返す
return new Swiper(this.el, {
// オプション詳しくはSwiperで
// direction: 'vertical',
loop: true,
// effect: 'fade',
grabCursor: true,
effect: "coverflow",
// スライダーを中央揃えにする
centeredSlides: true,
// 1枚だけ表示する
slidesPerView: 1,
speed: 1000,
breakpoints: {
// 1024px以上は2枚表示する
1024: {
slidesPerView: 2,
},
},
});
}
// 空のオブジェクトを作る
start(options = {}) {
options = Object.assign(
{
delay: 4000,
// マウスで変更したあとでも4秒後、またオートでトランジション開始する
disableOnInteraction: false,
},
options
);

this.swiper.params.autoplay = options;
this.swiper.autoplay.start();
}
stop() {
this.swiper.autoplay.stop();
}
}

3の詳細：main.js

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

5の詳細：_mixin.scss

@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;
}
}
_hero-slider.scss



.swiper-container {
overflow: visible !important;
}

.swiper-slide {
height: 500px;
// 拡大してはみ出た部分を表示しない
overflow: hidden;

& > img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
// 拡大する
transform: scale(1.3);
transition: transform 1.9s ease;
}

&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 61, 125, 0.1);
}

&-active {
& > img {
transform: none;
}

& .hero__title {
// 透明度を解除
opacity: 1;
transform: translate(-50%, -50%);
}
}
}

.hero {
&__title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 20px));
color: $cWhite;
font-size: 25px;
// 文字が最前面にくるようにする
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease 1s, transform 0.3s ease 1s;
}

&__footer {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 2;
height: 68px;
width: 32px;
// アニメーションで上下に動いているように見えなくする
overflow: hidden;
}

&__downarrow {
position: absolute;
left: 0;
bottom: 0;
width: 6px;
// アニメーションを付けるために必要
@include animation(
$name: kf-arrow-anime,
$iteration-count: infinite,
$duration: 2s,
$timing-function: linear
);
}

&__scrolltext {
position: absolute;
// 90度回転
transform: rotate(90deg);
color: rgba(255, 255, 255, 0.7);
left: -8px;
top: 15px;
font-size: 1.2em;
}
}

@keyframes kf-arrow-anime {
0%,
50%,
100% {
transform: translateY(-10%);
}
30% {
transform: none;
}
}

5：ノーマライズする。

vendors直下にbootstrap-reboot.cssを配置する。(ここからget)

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

_base.scssに以下のように記述

// Stylesheet: ベーススタイル(スマホ用の設定)
body {
  font-family: "Kameron", "Noto Sans JP", sans-serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
.font-sm {
  font-size: 14px;
}
.font-md {
  font-size: 17px;
}
.font-lr {
  font-size: 17px;
}
.font-lg {
  font-size: 25px;
}
.mb-sm {
  margin-bottom: 16px !important;
}
.mb-lg {
  margin-bottom: 80px !important;
}
.pb-sm {
  padding-bottom: 16px !important;
}
.pb-lg {
  padding-bottom: 80px !important;
}
.content-width {
  width: 90%;
  margin: 0 auto;
  max-width: $contentMaxWidth;
}

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

7:ヒーロースライダー用の画像をimagesフォルダの中に配置する。

なんでもOK

8：テキストアニメーションの追加(流れで後で記述を追加する)

↓の画像を参考に各ファイルを配置する。(中身は後述)

  1. フォルダーlibsの直下にscroll.jsファイルを作成する。

  2. vendorsの直下にscroll-polyfill.jsを配置

  3. vendorsの直下にtext-animation.jsを配置

  4. vendorsの直下にTweenMax.min.jsを配置

  5. main.jsの記述を変更

  6. modulesの直下にtext-animation.scssを配置する。

  7. style.scssやindex.htmlに読み込むための記述をする。

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

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

index.htmlの中身<body>から

<body>
<div id="global-container">
<div id="container">
<div id="content">
<div class="hero">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__title">Magnificence</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Solidarity</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Gentility</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<div class= animate-title>text-animation</div>
<div class= "tween-animate-title">Tween-text-animation</div>
<script src="scripts/vendors/swiper.min.js"></script>
<script src="scripts/vendors/TweenMax.min.js"></script>
<script src="scripts/vendors/scroll-polyfill.js"></script>
<script src="scripts/libs/scroll.js"></script>
<script src="scripts/libs/text-animation.js"></script>
<script src="scripts/libs/hero-slider.js"></script>
<script src="scripts/libs/mobile-menu.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

_button.scssと_image-slide.scssをmodules直下に作成する。(記述は後ほど)

9：ローダーの追加

vendors直下にpace.jsを配置する。

htmlの<head>タグ内に読み込むよう記述(太字部分)

<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>Flower Garden</title>
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/loader.css">
<script src="scripts/vendors/pace.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/vendors/swiper.min.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>

styles直下にloader.scssを配置する

続きます

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です