BinaryDevelop
  1. ホーム
  2. Web

モバイル、PC向けWebエフェクト

2022-02-15 01:13:23
<パス <ブロッククオート

モバイルウェブ効果

ヘッダータッチイベント

モバイルブラウザは互換性が高く、これまでのJSの互換性の問題を考慮する必要がないため、安心してネイティブJSでエフェクトを書くことができますが、モバイルにはモバイルならではの側面があります。例えば、タッチイベントのtouch（タッチイベントとも呼ばれる）は、AndroidとIOSの両方で利用可能です。

touchオブジェクトは、タッチポイントを表します。タッチポイントは、指やスタイラスである場合があります。タッチイベントは、ユーザーの指（またはスタイラス）がスクリーンまたはトラックパッドに作用したときに応答します。

一般的なタッチスクリーンイベント

TouchEventオブジェクト(TouchEvent)

TouchEventは、タッチプレーン（タッチスクリーン、タッチパッドなど）上の指の状態の変化を記述するイベントのクラスです。これらのイベントは 1 つまたは複数のタッチを記述するために使用され、開発者はタッチの移動、タッチの追加と削除などを検出することができます。

touchstart、touchmove、touchend イベントはそれぞれイベントオブジェクトを持つことになります。

タッチイベントオブジェクトの共通オブジェクト一覧


通常は要素にタッチイベントを登録するので、targetTocuhesを覚えておくことが焦点になります。

モバイル用ドラッグエレメントのJSコード実装。 

// (1) touchstart: Get the initial coordinates of the finger, and get the original position of the box
// (2) move finger touchmove: calculates the distance the finger slides and moves the box
// (3) leave finger touchend:
var div = document.querySelector('div');
var startX = 0; // get the initial coordinates of the finger
var startY = 0;
var x = 0; //Get the original position of the box
var y = 0;
div.addEventListener('touchstart', function(e) {
    // Get the initial coordinates of the finger
    startX = e.targetTouches[0].pageX;
    startY = e.targetTouches[0].pageY;
    x = this.offsetLeft;
    y = this.offsetTop;
});

div.addEventListener('touchmove', function(e) {
    // Calculate the distance the finger moves: the coordinates of the finger after it moves minus the initial coordinates of the finger
    var moveX = e.targetTouches[0].pageX - startX;
    var moveY = e.targetTouches[0].pageY - startY;
    // Move our box The original position of the box + the distance the finger moves
    this.style.left = x + moveX + 'px';
    this.style.top = y + moveY + 'px';
    e.preventDefault(); // default behavior to prevent screen scrolling
});

classList属性

classList属性は、HTML5で追加された新しい属性です。これは要素のクラス名を返すもので、要素内のCSSクラスを追加、削除、トグルするために使用されます 

<style>
        .bg {
            background-color: black;
        }
</style>

<body>
    <div class="one two"></div>
    <button> switch light</button>
    <script>
        // classList returns the class name of the element
        var div = document.querySelector('div');
        // console.log(div.classList[1]);
        // 1. Adding a class name does not overwrite the previous class name by appending the class name after it.
        div.classList.add('three');
        // 2. Delete the class name
        div.classList.remove('one');
        // 3. toggle class
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            document.body.classList.toggle('bg');
        })
    </script>
</body>

共通開発プラグイン

モバイルは高速な開発が要求されるため、いくつかのプラグインの助けを借りて開発されることが多いです。

JSプラグインとは、一定の仕様に則り、エフェクトの表現を容易にするために記述され、特定の機能を持ち、呼び出しやすいjsファイルのことである。画像を回転させるプラグインやウォーターフォールプラグインなど

プラグインの利用
  • jsプラグインファイルの紹介
  • を使用して、必要な構文に従ってください。

What：一般的に問題を解決するために特別に存在し、単一の機能を持ち、比較的小さいものです。例えば、モバイル向けの一般的なプラグイン：iScroll、Swiper、SuperSlider

<ブロッククオート

PCベースのWebエフェクト

オフセットシリーズ オフセット

offset はオフセットに変換され、関連プロパティの offset ファミリーを使用して、要素の位置（オフセット）、サイズなどを動的に取得します。

  • 親要素からポジショニングで要素の位置を取得する
  • 要素自体の大きさ（幅高さ）を取得する
  • 注：返される値には単位はありません

共通の属性です。


イラストレーション


オフセットとスタイルの違い。

ケース - ボックス内のマウスの座標を取得します。

効果のデモです。

実装コード(JS)です。 

// Click inside the box, want to get the distance of the mouse from the left and right of the box.
// First get the coordinates of the mouse in the page (e.pageX, e.pageY)
// Second get the distance of the box in the page (box.offsetLeft, box.offsetTop)
// Subtract the distance of the box in the page from the coordinates of the mouse to get the coordinates of the mouse in the box
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
	// console.log(e.pageX);
	// console.log(e.pageY);
	// console.log(box.offsetLeft);
	var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;
	this.innerHTML = 'x coordinate is ' + x + ' y coordinate is ' + y;
})

例 - モーダルなドラッグ＆ドロップボックス。

  • ポップアップ レイヤーをクリックすると、モーダル ボックスが表示され、グレーの半透明なマスキング レイヤーが表示されます。
  • 閉じる] ボタンをクリックすると、モーダルボックスが閉じるとともに、グレーの半透明オクルージョンレイヤーも閉じます。
  • モーダルボックスの最上段にマウスを合わせると、マウスを押したままページをドラッグしてボックスを移動することができます。
  • マウスを離すと、モーダルボックスのドラッグ移動が停止します。

エフェクトのデモです。

実装コードです。 

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
            margin-top: 20px;
        }
        
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
            display: block;
        }
        
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">Click, pop-up login box&l

可視領域シリーズクライアント

クライアントはclientに変換され、プロパティのclientファミリーを使用して、要素の視覚的領域に関する情報を取得します。clientファミリーの関連プロパティを使用して、要素のボーダーサイズ、要素サイズなどを動的に取得することができます。

共通のプロパティです。

クライアントとオフセットの最大の違いは、ボーダーが含まれていないことです

イラストはこちら

シリーズスクロール

scroll はスクロールと訳され、関連プロパティの scroll ファミリーを使用すると、要素のサイズやスクロール距離などを動的に取得することができます。

共通の属性です。

イラストはこちら

スクロールバーです。

  • ブラウザの高さ（または幅）がページ全体を表示するのに十分でない場合、自動的にスクロールバーが表示されます。
  • スクロールバーが下にスクロールしたとき、見えなくなるページの上の高さを、ページのスクロールした先のヘッダーと呼びます。
  • onscroll イベントは、スクロールバーがスクロールされたときに発生します。

ケース - 右サイドバーを固定した。

  • 元のサイドバーの位置は絶対位置
  • ページがある位置までスクロールすると、サイドバーが固定配置に変更される
  • ページがスクロールし続けることで、ページの先頭が表示されるようになる

表示される効果

実装コードです。 

<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>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">Back to top</span>
    </div>
    <div class="header w">header area</div>
    <div class="banner w">banner area</div>
    <div class="main w">main section</div>
    <script>
        //1. Get the element
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop is the size of the scrolled header must be written to the outside of the scroll
        var bannerTop = banner.offsetTop
        // the value that should change when the sidebar is positioned fixed
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // Get the main body element
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. page scroll event scroll
        document.addEventListener('scroll', function() {
            // window.pageYOffset the head of the page being scrolled
            // console.log(window.pageYOffset);
            // 3 . When the scrolled page header is greater than or equal to 172, the sidebar should be fixed
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. When our page scrolls to the main box, the goback module is displayed
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
    </script>
</body>

3シリーズの役割分担の違い。


その主な用途

注：ページのスクロール距離はwindow.pageXOffsetから取得します。

アニメーションの原理
コアとなる原則: タイマー setInterval() によってボックスの位置を移動し続ける。

実装の手順

  1. ボックスの現在位置を取得する
  2. 現在位置から移動距離1を加えた位置のボックスを取得する
  3. タイマーを使って、この動作を繰り返し行う
  4. タイマー終了条件を追加する
  5. この要素は、element.style.left を使用するために、位置決めを追加する必要があることに注意してください。

シンプルなアニメーション機能のラッパーです。 

// Simple animation function wrapping obj target target target position
function animate(obj, target) {
    var timer = setInterval(function() {
        if (obj.offsetLeft >= target) {
            // stop the animation which essentially stops the timer
            clearInterval(timer);
        }
        // move evenly to the right 1px at a time
        obj.style.left = obj.offsetLeft + 1 + 'px';

    }, 30);
}

ジョギング効果の原理。

  1. ジョギングアニメーションは、エレメントの動きの速度を変化させるもので、多くの場合、ゆっくりと停止させることによって行われます
  2. コアとなるアルゴリズム。(目標値-現在位置)/10が各移動における距離のステップとなります。
  3. 停止条件は、現在のボックスの位置が目標位置と等しくなったらタイマーを停止すること
  4. ステップの値は丸める必要があることに注意してください 
// Jogging animation function wraps obj target object target position
        // Idea.
        // 1. Make the box move a smaller distance each time, and the speed will fall off slowly. // 2.
        // 2. Core algorithm: (target - current position) / 10 is the distance of each move.
        // 3. The stop condition is: the timer will stop when the current box position equals the target position
function animate(obj, target) {
    // Clear the previous timer first and keep only the current timer
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // Write the step value to the timer
        var step = (target - obj.offsetLeft) / 10;
        if (obj.offsetLeft == target) {
            // stop the animation which essentially stops the timer
            clearInterval(obj.timer);
        }
        // change the step value to a slowly decreasing value by adding 1 each time step formula: (target - current position) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

複数の目標値間を移動する。

移動開始時に、ステップが正または負のどちらであるかを判断する

  • 正の場合は、段差を切り上げる
  • 負の場合は、ステップサイズを切り捨てます

アニメーション機能は、別のJSファイル animate.js でラップされています。 

function animate(obj, target, callback) {
    // Clear the previous timer first and keep only the current one running
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // Write the step value to the timer
        // change the step value to an integer to avoid decimal problems
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // stop the animation which essentially stops the timer
            clearInterval(obj.timer);
            // the callback function is written to the end of the timer
            // if (callback) {
            // // callback function
            // callback();
            // }
            callback && callback();
        }
        // change the step value to a slowly decreasing value by adding 1 each time Step formula: (target value - current position) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します