スクロールでCSS「opacity」を変化させるcssとjavascript

Filed under: JavaScript — kdcs @ 2024年2月24日 土曜日 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="none">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="">

<style>
body { margin: 0; padding: 0; }
/*-----------固定FV----------*/
.fv{
    background: #055a8c;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.fv p{
    color: #fff;
    line-height: 2;
    text-align: center;
    font-size: 20px;
}
 
/*-----------オーバーレイ----------*/
.overlay{
    width: 100%;
    padding-top: 100vh;
    padding-bottom: 100vh;
    background: #000;
    opacity: 0;
    position: relative;
    text-align: center;
    font-size: 20px;
}
 
.overlay p{
    margin: 50vh auto 0;
    background: #000;
    color: #fff;
    max-width: 300px;
    padding: 20px;
    line-height: 1.5;
}
/*-----------次のコンテンツ----------*/
.contents{
    width: 100%;
    height: 500px;
    position: absolute;
    background: #000;
}
 
.contents p{
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-align: center;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


</head>
<body>

<div class="fv">
    <p>スクロールしてください<br>↓↓↓↓↓↓</p>      
</div>
<div class="overlay"><!--不透明度を変えるコンテンツ-->
    <p>#fff背景のopacityが0→1.0に変わります。</p>      
</div>
<div class="contents">
    <p>次のコンテンツ</p>
</div>

<script>
    $('div.overlay').each(function () {
      var $win = $(window),
        $winH = $win.height(),
        $connect = $(this),
        position = $connect.offset().top,
        current = 0.3,
        scroll;
      $win.on('load scroll', function () {
        scroll = $win.scrollTop();
        current = (0 - (position - scroll) / $winH);
        if (current > 0.7999) {
          current = 0.8;
        }
        if (scroll > position - $winH) {
          $connect.css({
            opacity: current
          });
        }
      });
    });
</script>

</body>
</html>

javascriptでページトップスクロールとページ内スクロールのコンフリクト回避

Filed under: JavaScript — kdcs @ 2024年2月13日 火曜日

cssでスムーズスクロールが可能になっているが、ios（Safari15.4）以降でないと効かない。

html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
}

そのため、javascriptでの対応となるがページトップスクロールとページ内スクロールは内容が被ることが多いので記述がコンフリクトしないようにしなければ、どちらも動作しなくなってしまう。

コンフリクト回避できる記述があったのでこちらに保存
この記述ではオフセット（停止位置を任意の値だけずらす）ことも可能

このjavascriptを使用してもiosやIEではスムーズスクロールが出来ないのでpolyfillのsmoothscroll.jsを利用する。
※スクロールのjavascriptより前にsmoothscroll.jsを読み込ませる。

smooth scroll behavior polyfillというpolyfillパッケージが公開されており、smoothscroll.jsを読み込むことで以下のモダンブラウザでもスムーズスクロールが実現可能。
srcをクリックするとsmoothscroll.jsが表示される。

こちらはiosやIE以外に適用できるスクロールの記述

document.addEventListener('DOMContentLoaded', () => {
  // ヘッダーエレメントを取得。
  const headerElement = document.querySelector('.header');
  // バッファ（オフセット）の値を設定。スムーズスクロールの際にこの値だけ位置をずらす。
  const buffer = 60;
  // href属性の値が"#"から始まるすべての<a>要素を取得
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    // 各<a>要素にクリックイベントのリスナーを追加
    anchor.addEventListener('click', (event) => {
      // デフォルトのクリック動作をキャンセル
      event.preventDefault();
      // ヘッダーの高さを取得。ヘッダーエレメントがない場合は0とする。
      const headerHeight = headerElement ? headerElement.offsetHeight : 0;
      // スクロール時の総オフセットを計算（ヘッダーの高さ + バッファ）
      const totalOffset = headerHeight + buffer;
      // クリックされた<a>要素のhref属性の値を取得
      const targetId = anchor.getAttribute('href');
      // ターゲットとなるエレメントを取得
      const targetElement = document.querySelector(targetId);
      // IDが指定されていない、またはターゲットのエレメントが存在しない場合
      if (targetId === "#" || targetId === "" || !targetElement) {
        alert('適切なスクロール先がありません');
        return; // 以降の処理をスキップ
      }
      // smoothScroll関数を呼び出してスムーズスクロールを実行
      smoothScroll(targetElement, totalOffset);
    });
  });
  // スムーズスクロールを行う関数
  const smoothScroll = (target, offset) => {
    // スクロール先の位置を計算
    const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
    // 計算された位置にスムーズにスクロール
    window.scroll({
      top: targetPosition,
      behavior: 'smooth'
    });
  }
});

アイコンフォント「Fontello」にX（Twitter）アイコン追加

Filed under: tool — kdcs @ 2024年2月6日 火曜日

アイコンフォント「Fontello」にX（Twitter）アイコン追加する方法

こちらからX(Twitter)のsvgデータをダウンロード。

Webフォントを配布している「IcoMoon」でXロゴのsvgファイルをアイコンフォント化する。
名称は「logo_x」
こちらの記事を参照

「Fontello」で作成した現在使用中のアイコンフォントに組み込む
※ここではi-font3に組み込む

アイコンフォントのZipデータをダウンロードし、解凍する。

icomoon/fontsフォルダの中身を全てfontフォルダにコピー

css/i-font3.cssに以下を追加
icomoonのオリジナルcssのアイコンフォント読込先をfontsから../fontに変更
クラスをiconからiconxに変更

/* -------------------------------------------------------------
   オリジナル X（Twitter）icomoonにて作成 ここからicommonの記述
   fontsを../fontに変更、classを「iconx」にしてi-font3と切り分け                      
 --------------------------------------------------------------- */

@font-face {
  font-family: 'icomoon';
  src:  url('../font/icomoon.eot?yuwvt9');
  src:  url('../font/icomoon.eot?yuwvt9#iefix') format('embedded-opentype'),
    url('../font/icomoon.ttf?yuwvt9') format('truetype'),
    url('../font/icomoon.woff?yuwvt9') format('woff'),
    url('../font/icomoon.svg?yuwvt9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="iconx-"], [class*=" iconx-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconx-logo_X:before {
  content: "\e900";
}

後はiタグのクラスをiconx-logo_xにする

<i class="fa iconx-logo_X"></i>

XAMPP8.0.15のMariaDBをMysql8.0にする

Filed under: xampp — kdcs @ 2024年1月27日 土曜日

ロリポップより、2024年1月25日付のお知らせにて新規作成データベース（MySQL）のバージョンが8.0になるとのこと。
これより先に2023年11月16日付のお知らせにて「phpMyAdmin 5.2.1」にアップデートしたとの案内あり。

この先、新規でWordPressをセッッティングする際はPHP8系＋MySQL8.0の組み合わせになるのでローカル環境をXAMPPで作成する。

MySQLのダウンロード先はこちら
phpMyAdminのダウンロードはこちら

※phpMyAdmin5.2.1はXAMPP8.2.12に同梱されているphpMyAdmin 5.2.1を使用する

XAMPPのMariaDBをMysql8.0にする手順 (2024.1.27)
※XAMPPのバージョンは8.0.15 (64bit)
※Mysqlのバージョンは8.0.36 (64bit)

C:\XAMPP\phpMyAdminをphpMyAdmin_8.0にリネーム
XAMPP8.2.12内のphpMyAdminフォルダをコピーする

C:\XAMPP\mysqlをmysql_mariaにリネーム
ダウンロード解凍したMySQL8.0.36フォルダをコピーし、mysqlにリネーム

C:\xampp\mariadb\bin\my.ini を C:\xampp\mysql\bin\my.ini にコピーする

テキストエディタでmy.iniを開き、[mysqld]以下にあるkey_buffer=16Mをコメントアウト

その後コマンドプロンプトで以下を実行（コピペで使用可能）

cd C:\xampp\mysql
bin\mysqld --initialize-insecure
start /b bin\mysqld
bin\mysql -u root

以下mysqlコマンド

CREATE USER pma@localhost;
SOURCE C:/xampp/phpMyAdmin/sql/create_tables.sql;
GRANT SELECT, INSERT, DELETE, UPDATE, ALTER ON phpmyadmin.* TO pma@localhost;
ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY '';
ALTER USER pma@localhost IDENTIFIED WITH mysql_native_password BY '';
\q

mysqlコマンド終了

bin\mysqladmin -u root shutdown

以上でコマンドプロンプト終了

phpMyadminのパスワード
phpMyAdmin\config.inc.php

/* Authentication type and info */
$cfg[‘Servers’][$i][‘auth_type’] = ‘config’;
$cfg[‘Servers’][$i][‘user’] = ‘root’;
$cfg[‘Servers’][$i][‘password’] = ”;
$cfg[‘Servers’][$i][‘extension’] = ‘mysqli’;
$cfg[‘Servers’][$i][‘AllowNoPassword’] = true;
$cfg[‘Lang’] = ”;

auth_type の値を config から cookie に変更

ログインするとエラーが出る
「設定ファイルの中に記述されているパスフレーズ（blowfish_secret）が短すぎます。」

phpMyAdmin\config.inc.php
$cfg[‘blowfish_secret’] = ‘xampp’;

xamppのところ32文字以上入れる

デフォルトではphpMyAdminのrootにパスワードが設定されていないのでログイン時
ユーザー名のrootだけで（パスワード未入力）ログインできる

なので、rootにパスワードを設定する
ログインしたら「ユーザーアカウント」→「rootの権限を編集」→「change password」で
パスワードを入力、再入力欄にも入力し、保存をクリックする。

XAMPPを起動させる

スクロールで要素を下からフワっとフェードインさせる「実装中」

Filed under: css,JavaScript — kdcs @ 2023年11月17日 金曜日

jQueryを使わないタイプ
※1行目が「.scroll(function ()」だとページをリロードしたときに要素が表示されないので「.on(‘load scroll’, function ()」とすることでスクロールとリロード両方で動作するようになる。
※適用したい要素のclassに「fadeUp」を記述。スクロールでclassに「on」が付加される。

$(window).on('load scroll', function (){
	$('.fadeiUp').each(function(){
		var elemPos = $(this).offset().top,
		scroll = $(window).scrollTop(),
		windowHeight = $(window).height();

			if (scroll > elemPos - windowHeight + 150){
				$(this).addClass('on');
			}
	});
});

css
※通常は.fadeUpと.fadeUp.onの2つ。要素3つを順番にフェードアップさせる場合(2)(3)を追加する。

.fadeUp {
  transition: 0.8s ease-out;
  transform: translateY(80px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}
.fadeUp.on:nth-of-type(2) {
    transition-delay:200ms;
    -webkit-transition-delay:200ms;
}
.fadeUp.on:nth-of-type(3) {
    transition-delay:400ms;
    -webkit-transition-delay:400ms;
}

サイト内検索

カテゴリー

最近の投稿

↑上に戻る