Skip to main content
本文に 1187 文字追加; タグを編集
ソース リンク
wataru
  • 1,133
  • 3
  • 38
  • 80

追記すいません。
index.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 where you are.</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="main.js"></script>
</body>

</html>

追記すいません。
index.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 where you are.</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="main.js"></script>
</body>

</html>
本文に 2755 文字追加
ソース リンク
wataru
  • 1,133
  • 3
  • 38
  • 80

text-animation.js

class TextAnimation {
    constructor(el) {
        // elには<div class.animate-titleが代入されている。..が入ってる
        console.log(el);
        this.DOM = {};
        // 順番おかしい 分割された値が出てくる。
        this.const test = document.querySelector(el);
        console.log(this.test);
        if(el instanceof HTMLElement) {
            this.DOM.el = el;
        } else {
            this.DOM.el = document.querySelector(el);
        }
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }
    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, '&nbsp;');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }
    animate() {
        this.DOM.el.classList.toggle('inview');
    }
}
class TweenTextAnimation extends TextAnimation {
    constructor(el) {
        super(el);
        this.DOM.chars = this.DOM.el.querySelectorAll('.char');
    }
    
    animate() {
        this.DOM.el.classList.add('inview');
        this.DOM.chars.forEach((c, i) => {
            TweenMax.to(c, .6, {
                ease: Back.easeOut,
                delay: i * .05,
                startAt: { y: '-50%', opacity: 0},
                y: '0%',
                opacity: 1
            });
        });
    }
}

main.js

document.addEventListener('DOMContentLoaded', function () {
//Intersectionは交差、Observerは監視する物。
    //<div class="animate-title"...</div>挟まれた要素まで取得できる。allだから同じ物をリストにして返してくれる。
    //監視したい要素がリストで格納される。
    const els = document.querySelectorAll('.animate-title');
    //このentriesはio.observe(child)、io.observe(child2)...のように監視する対象が複数ある場合にこちらにentriesに格納される。
    //関数だから順番は合ってる。コールバック関数として渡される。
    const cb = function(entries, observer) {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                // entry.targetはelに値する。
                // 最初はentry.targetが.animate-titleだった。
                const ta = new TextAnimation('.animate-title')
                ta.animate();
                //entry.target.classList.add('inview');
                // 監視を停止するには
                observer.unobserve(entry.target);
                
            } else {
                // console.log('out view');
                // entry.target.classList.remove('inview');
            }
            
        });
        //alert('intersectiong');
    }

    const options = {
        //交差対象にしたい親の要素を設定する事ができる。
        //今は画面に入るか入らないかだけど、それをタグないに入るかどうかで設定できる?
        root: null,
        //上から300pxの所で交差するように設定できる。
        //左右にも値を設定すると交差してない事になる。pxか%を付けないないとエラーになる。
        //              上    右  下   左
        rootMargin: "0px",
        //交差する部分の位置を設定できる。内側が0で外側が10.5で真ん中でも動作可能にする。
        threshold: 0

    }

    const io = new IntersectionObserver(cb, options);
    // queryselectorAllで取得したdiv要素
    els.forEach(el => io.observe(el));
});
class TextAnimation {
    constructor(el) {
        // elには.animate-titleが代入されている。
        this.DOM = {};
        // 順番おかしい 分割された値が出てくる。
        this.test = document.querySelector(el);
        console.log(this.test);
        if(el instanceof HTMLElement) {
            this.DOM.el = el;
        } else {
            this.DOM.el = document.querySelector(el);
        }
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }

text-animation.js

class TextAnimation {
    constructor(el) {
        //elには<div class...が入ってる
        console.log(el);
        this.DOM = {};
        // 順番おかしい 分割された値が出てくる。
        const test = document.querySelector(el);
        console.log(test);
        if(el instanceof HTMLElement) {
            this.DOM.el = el;
        } else {
            this.DOM.el = document.querySelector(el);
        }
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }
    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, '&nbsp;');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }
    animate() {
        this.DOM.el.classList.toggle('inview');
    }
}
class TweenTextAnimation extends TextAnimation {
    constructor(el) {
        super(el);
        this.DOM.chars = this.DOM.el.querySelectorAll('.char');
    }
    
    animate() {
        this.DOM.el.classList.add('inview');
        this.DOM.chars.forEach((c, i) => {
            TweenMax.to(c, .6, {
                ease: Back.easeOut,
                delay: i * .05,
                startAt: { y: '-50%', opacity: 0},
                y: '0%',
                opacity: 1
            });
        });
    }
}

main.js

document.addEventListener('DOMContentLoaded', function () {
//Intersectionは交差、Observerは監視する物。
    //<div class="animate-title"...</div>挟まれた要素まで取得できる。allだから同じ物をリストにして返してくれる。
    //監視したい要素がリストで格納される。
    const els = document.querySelectorAll('.animate-title');
    //このentriesはio.observe(child)、io.observe(child2)...のように監視する対象が複数ある場合にこちらにentriesに格納される。
    //関数だから順番は合ってる。コールバック関数として渡される。
    const cb = function(entries, observer) {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                // entry.targetはelに値する。
                // 最初はentry.targetが.animate-titleだった。
                const ta = new TextAnimation('.animate-title')
                ta.animate();
                //entry.target.classList.add('inview');
                // 監視を停止するには
                observer.unobserve(entry.target);
                
            } else {
                // console.log('out view');
                // entry.target.classList.remove('inview');
            }
            
        });
        //alert('intersectiong');
    }

    const options = {
        //交差対象にしたい親の要素を設定する事ができる。
        //今は画面に入るか入らないかだけど、それをタグないに入るかどうかで設定できる?
        root: null,
        //上から300pxの所で交差するように設定できる。
        //左右にも値を設定すると交差してない事になる。pxか%を付けないないとエラーになる。
        //              上    右  下   左
        rootMargin: "0px",
        //交差する部分の位置を設定できる。内側が0で外側が10.5で真ん中でも動作可能にする。
        threshold: 0

    }

    const io = new IntersectionObserver(cb, options);
    // queryselectorAllで取得したdiv要素
    els.forEach(el => io.observe(el));
});
本文に 3 文字追加; タイトルを編集
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

javascriptにて、 Javascript のコンストラクタ 内で処理の実行順について

下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。javascript。Javascriptは非同期処理のためでしょうか?

class TextAnimation {
    constructor(el) {
        // elには.animate-titleが代入されている。
        this.DOM = {};
        // 順番おかしい 分割された値が出てくる。
        this.test = document.querySelector(el);
        console.log(this.test);
        if(el instanceof HTMLElement) {
            this.DOM.el = el;
        } else {
            this.DOM.el = document.querySelector(el);
        }
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }

自分の想定では分割前の<div class="animate-title"...が <div class="animate-title"...出力されると思っていました

実際が、実際には分割された物がconsole.logで出力されました。

もう一つ気になった事が、コンストラクタ 内で下記のように変数を使用できると思っていたのですが、thisを付けないとtestは未定義と出ます。

test = document.querySelector(el);
console.log(test);

Pythonでは似たような書き方でselfなしでも無しでも実行できました。

この違いは非同期処理・同期処理の違いによるものなのでしょうか?

class Person:
    def __init__(self, name, age):
        name2 = name
        print(name2)
        self.age = age
        
taro = Person('太郎', 18)
#結果:太郎

Python での記述例:

class Person:
    def __init__(self, name, age):
        name2 = name
        print(name2)
        self.age = age
            
taro = Person('太郎', 18)
# 結果:太郎

すいません。よろしくお願いします。

javascriptにて、コンストラクタ 内で処理の実行順について

下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。javascriptは非同期処理のためでしょうか?

class TextAnimation {
    constructor(el) {
        // elには.animate-titleが代入されている。
        this.DOM = {};
        // 順番おかしい 分割された値が出てくる。
        this.test = document.querySelector(el);
        console.log(this.test);
        if(el instanceof HTMLElement) {
            this.DOM.el = el;
        } else {
            this.DOM.el = document.querySelector(el);
        }
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }

自分の想定では分割前の<div class="animate-title"...が出力されると思っていました

実際には分割された物がconsole.logで出力されました。

もう一つ気になった事が、コンストラクタ 内で下記のように変数を使用できると思っていたのですが、thisを付けないとtestは未定義と出ます。

test = document.querySelector(el);
console.log(test);

Pythonでは似たような書き方でselfなしでも実行できました。

この違いは非同期処理・同期処理の違いによるものなのでしょうか?

class Person:
    def __init__(self, name, age):
        name2 = name
        print(name2)
        self.age = age
        
taro = Person('太郎', 18)
#結果:太郎

すいません。よろしくお願いします。

Javascript のコンストラクタ 内で処理の実行順について

下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。Javascriptは非同期処理のためでしょうか?

class TextAnimation {
    constructor(el) {
        // elには.animate-titleが代入されている。
        this.DOM = {};
        // 順番おかしい 分割された値が出てくる。
        this.test = document.querySelector(el);
        console.log(this.test);
        if(el instanceof HTMLElement) {
            this.DOM.el = el;
        } else {
            this.DOM.el = document.querySelector(el);
        }
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }

自分の想定では分割前の <div class="animate-title"...出力されると思っていましたが、実際には分割された物がconsole.logで出力されました。

もう一つ気になった事が、コンストラクタ 内で下記のように変数を使用できると思っていたのですが、thisを付けないとtestは未定義と出ます。

test = document.querySelector(el);
console.log(test);

Pythonでは似たような書き方でself無しでも実行できました。

この違いは非同期処理・同期処理の違いによるものなのでしょうか?

Python での記述例:

class Person:
    def __init__(self, name, age):
        name2 = name
        print(name2)
        self.age = age
            
taro = Person('太郎', 18)
# 結果:太郎

すいません。よろしくお願いします。

ソース リンク
wataru
  • 1,133
  • 3
  • 38
  • 80
読み込んでいます