概要 HTMLのスライダーをテンプレートを使ってサクッと実装しようと思い、PHOTPSHOPVIPさんのサイトの中にあった、THREE Image Transitionを自分のサイトに取り入れてスライダーを実装しようと思いました。 しかし、少しハマってしまいました。 そのまま、コピー&ペーストではダメな様です。 そこで、自分なりの解決方法をメモも兼ねて記載しておきます。 （初投稿のため、至らない部分がありましたら申し訳ございません。） 解決方法 テンプレートに加えて、以下のプログラムをindex.html上に追加しました。 index.html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/bas.js"></script> <link href="css/styles_myself.css" rel="stylesheet"> <script src="js/scripts_myself.js"></script> styles_myself.cssとscripts_myself.jsは、サイト上のテンプレートをそのままコピペしてあります。 ファイルのパスは各々調節してください。 その後の調整 実装が完了すると以下の様になると思います。 しかし、このままだとスライダーだけのページになってしまうので、追加したcssを編集します。 styles_myself.css body { margin: 0; /* overflow: hidden; */ } canvas { /* background-image: radial-gradient(#666, #333); */ } #instructions { position: absolute; color: #fff; bottom: 0; padding-bottom: 6px; font-family: sans-serif; width: 100%; text-align: center; pointer-events: none; } background-imageとoverflowをコメントアウトすることで背景を消し、スライダーを表示させることができます。 最後に このスライダーはThree.jsが使われているそうです。 私は、Three.jsは触ったことがないばかりか、HTML,css,JavaScriptについての知識もあまりないので、もしより良い改善策がありましたら、ご教授ください。 また著作権などの権利については、ご自身でお調べになってから使ってくださいね！ 最後まで見ていただき、ありがとうございました。 参考にさせていただいたサイト https://photoshopvip.net/100275 https://codepen.io/zadvorsky/pen/PNXbGo
HTMLのスライダーをテンプレートを使ってサクッと実装しようと思い、PHOTPSHOPVIPさんのサイトの中にあった、THREE Image Transitionを自分のサイトに取り入れてスライダーを実装しようと思いました。 しかし、少しハマってしまいました。 そのまま、コピー&ペーストではダメな様です。 そこで、自分なりの解決方法をメモも兼ねて記載しておきます。 （初投稿のため、至らない部分がありましたら申し訳ございません。）
テンプレートに加えて、以下のプログラムをindex.html上に追加しました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/bas.js"></script> <link href="css/styles_myself.css" rel="stylesheet"> <script src="js/scripts_myself.js"></script>
styles_myself.cssとscripts_myself.jsは、サイト上のテンプレートをそのままコピペしてあります。 ファイルのパスは各々調節してください。
実装が完了すると以下の様になると思います。 しかし、このままだとスライダーだけのページになってしまうので、追加したcssを編集します。
body { margin: 0; /* overflow: hidden; */ } canvas { /* background-image: radial-gradient(#666, #333); */ } #instructions { position: absolute; color: #fff; bottom: 0; padding-bottom: 6px; font-family: sans-serif; width: 100%; text-align: center; pointer-events: none; }
background-imageとoverflowをコメントアウトすることで背景を消し、スライダーを表示させることができます。
このスライダーはThree.jsが使われているそうです。 私は、Three.jsは触ったことがないばかりか、HTML,css,JavaScriptについての知識もあまりないので、もしより良い改善策がありましたら、ご教授ください。 また著作権などの権利については、ご自身でお調べになってから使ってくださいね！ 最後まで見ていただき、ありがとうございました。
https://photoshopvip.net/100275 https://codepen.io/zadvorsky/pen/PNXbGo
はじめに 今回はタイトルにある通りスクロール時にフワッと要素が浮き上がってくる機能を実装したので備忘録として記録していきます。 今回はjQueryを使っての実装になるのでそちらの準備をしてから実装に入って下さい 私自信プログラミング初心者なので間違いなどあればご指摘の程よろしくお願いします！ ステップ１ フワッとさせたい要素を作る <div class="container"> </div> <div class="container2"> <h1>フワッと現れる</h1> </div> .container { height: 100vh; width: 100%; background-color: aquamarine; } .container2 { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; background-color: rgb(147, 147, 197); } こちらはなんの変哲もないhtmlとcssです。 h１タグの部分をスクロールと共に出現するように実装していきます！ ステップ２ JavaScriptの記述 基本的にスクロールに応じてアニメーションを付けるためのJsの流れは １、ブラウザの表示できる領域の高さを取得 ２、スクロール位置を取得 ３、アニメーションをさせたい要素のY軸（縦）の位置を取得 ４、アニメーションさせる要素かどうかを判断する ５、アニメーションをさせる要素だった場合、クラス.fadeInを追加 これらをコードにすると $(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollPosition = $(window).scrollTop(); $('.scroll').each(function () { const targetPosition = $(this).offset().top; if(scrollPosition > targetPosition - wHeight + 60) { $(this).addClass("fadeIn"); } }); }); }); まず1、２行目でスクロール時のアクションを定義します。 3行目でブラウザ表示領域の高さをconst wHeightに代入しています。 4行目でスクロール位置の高さをscrollPositionに代入しています。 5行目でクラスscrollが付与されてる要素を繰り返し処理を行っています。 6行目でアニメーションを行いたい要素の高さを取得しています。 7行目でif文でスクロール位置 > 対象となる要素の縦位置 – 表示領域の高さ + 60を定義 ここで+60などを指定しないと画面の下部でアニメーションが行われていて確認が難しくなるためです。 なのでここの値はお好みの値を指定して下さい。 8行目で条件式を満たした場合クラスfeadInを追加してます。 ステップ３ cssでアニメーションを定義する /*1.フェードインアニメーションの指定*/ .scroll {opacity: 0;} /*一瞬表示されるのを防ぐ*/ .fadeIn { animation-name: fadeIn; animation-duration: 5s; animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; transform: translate(0); } } cssで実際にアニメーションを作っていきます。 まずfeadInクラスの説明をします こちらでアニメーションの名前やかかる時間などの設定をしていきます！ animation-nameでアニメーションの名前を定義しています。 animation-duration: 5s;でアニメーションにかかる時間を設定しています。 animation-fill-mode: forwards;でアニメーション後そのままの状態を維持する記述です。 次に@keyframesでアニメーションの挙動を設定していきます @keyframesのあとは上で設定したアニメーションの名前を記述して下さい。 実際にこの部分の記述でどのように要素を変化させるかを設定していきます。 今回は0%の時と100%の時の要素の状態を定義していますが、50%や75%など細かく設定する事ができるのでお好みで設定してみて下さい。 これで一通りの準備ができましたので挙動を確認してみましょう！ https://gyazo.com/c8e8aa5f59ec2226d79fcb479c9ed6f6 最後に 僕自身フロント実装は苦手なのですが実際アニメーションを作ってみるととても楽しいですし、モダンなサイト作成には必須な技術かと思うので、今後も少しずつ扱えるようにしたいと思いました！！ まだまだプログラミング初心者のためご指摘などあればよろしくお願いします！
今回はタイトルにある通りスクロール時にフワッと要素が浮き上がってくる機能を実装したので備忘録として記録していきます。 今回はjQueryを使っての実装になるのでそちらの準備をしてから実装に入って下さい 私自信プログラミング初心者なので間違いなどあればご指摘の程よろしくお願いします！
<div class="container"> </div> <div class="container2"> <h1>フワッと現れる</h1> </div>
.container { height: 100vh; width: 100%; background-color: aquamarine; } .container2 { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; background-color: rgb(147, 147, 197); }
こちらはなんの変哲もないhtmlとcssです。 h１タグの部分をスクロールと共に出現するように実装していきます！
基本的にスクロールに応じてアニメーションを付けるためのJsの流れは １、ブラウザの表示できる領域の高さを取得 ２、スクロール位置を取得 ３、アニメーションをさせたい要素のY軸（縦）の位置を取得 ４、アニメーションさせる要素かどうかを判断する ５、アニメーションをさせる要素だった場合、クラス.fadeInを追加
これらをコードにすると
$(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollPosition = $(window).scrollTop(); $('.scroll').each(function () { const targetPosition = $(this).offset().top; if(scrollPosition > targetPosition - wHeight + 60) { $(this).addClass("fadeIn"); } }); }); });
まず1、２行目でスクロール時のアクションを定義します。 3行目でブラウザ表示領域の高さをconst wHeightに代入しています。 4行目でスクロール位置の高さをscrollPositionに代入しています。 5行目でクラスscrollが付与されてる要素を繰り返し処理を行っています。 6行目でアニメーションを行いたい要素の高さを取得しています。 7行目でif文でスクロール位置 > 対象となる要素の縦位置 – 表示領域の高さ + 60を定義 ここで+60などを指定しないと画面の下部でアニメーションが行われていて確認が難しくなるためです。 なのでここの値はお好みの値を指定して下さい。 8行目で条件式を満たした場合クラスfeadInを追加してます。
/*1.フェードインアニメーションの指定*/ .scroll {opacity: 0;} /*一瞬表示されるのを防ぐ*/ .fadeIn { animation-name: fadeIn; animation-duration: 5s; animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; transform: translate(0); } }
cssで実際にアニメーションを作っていきます。 まずfeadInクラスの説明をします こちらでアニメーションの名前やかかる時間などの設定をしていきます！ animation-nameでアニメーションの名前を定義しています。 animation-duration: 5s;でアニメーションにかかる時間を設定しています。 animation-fill-mode: forwards;でアニメーション後そのままの状態を維持する記述です。
次に@keyframesでアニメーションの挙動を設定していきます @keyframesのあとは上で設定したアニメーションの名前を記述して下さい。 実際にこの部分の記述でどのように要素を変化させるかを設定していきます。 今回は0%の時と100%の時の要素の状態を定義していますが、50%や75%など細かく設定する事ができるのでお好みで設定してみて下さい。
これで一通りの準備ができましたので挙動を確認してみましょう！
https://gyazo.com/c8e8aa5f59ec2226d79fcb479c9ed6f6
僕自身フロント実装は苦手なのですが実際アニメーションを作ってみるととても楽しいですし、モダンなサイト作成には必須な技術かと思うので、今後も少しずつ扱えるようにしたいと思いました！！ まだまだプログラミング初心者のためご指摘などあればよろしくお願いします！
仕事が休みだった事もあり専属メンター(身内)によるPythonアプリケーション講座...の予定だったもののほぼほぼ環境構築で終了。 学習内容 ターミナルの活用方法 現在地 $ pwd 移動 $ cd ○○○○ 現在地のファイル一覧 $ ls 他にも事前に環境出来てればpipenv shellで仮想環境に入れるとかあったけどあまり理解は出来てない。要学習。 HTML/CSS Udemyにて。 CSSの内部参照 <style> p{font-size: 20px;} </style> ※headの中に書き込むことにより対応したタグのスタイルを一括で設定できる。 CSSの外部参照 <link rel="stylesheet" href="ファイル名"> ※headの中に書き込むことにより外部のCSSを引っ張ってこれる。同一ページ内に記載されないのでコードが見やすくなる。 上記二つを併記した場合は下に書いてある方が後に実行されるため優先されて表示される。 一行だけスタイルを変えたい場合は一番最後に実行されるようにインラインで書く。
仕事が休みだった事もあり専属メンター(身内)によるPythonアプリケーション講座...の予定だったもののほぼほぼ環境構築で終了。
$ pwd
$ cd ○○○○
$ ls
他にも事前に環境出来てればpipenv shellで仮想環境に入れるとかあったけどあまり理解は出来てない。要学習。
Udemyにて。
<style> p{font-size: 20px;} </style> ※headの中に書き込むことにより対応したタグのスタイルを一括で設定できる。
<link rel="stylesheet" href="ファイル名"> ※headの中に書き込むことにより外部のCSSを引っ張ってこれる。同一ページ内に記載されないのでコードが見やすくなる。
上記二つを併記した場合は下に書いてある方が後に実行されるため優先されて表示される。
一行だけスタイルを変えたい場合は一番最後に実行されるようにインラインで書く。
target="_blank"を用いて別タブ表示を実装しようと思い、色んな記事を見ていたのですが、 セキュリティ面とパフォーマンス面の2点で脆弱性があるとの記事を見かけたので、対策を実施。 HTML <a href="リンク" target="_blank" rel="noopener noreferrer"> noopenerと、noreferrerの2つを加えてあげれば対策になるようです。 noopener を指定することで、リンク先からwindow.openerを使ってリンク元が参照できなくなる。さらに、リンク先とリンク元が別のものとして扱われるためパフォーマンスに対しての対策にもなる。 しかし、ブラウザによっては、noopenerがサポートされていないため、noopenerと合わせてnoreffererを指定するのが好ましい。 noreffererを指定することで、リンク先にリンク元のリンク情報が送られないようになるため、 noopenerと同じくリンク先からの参照ができなくなる。 らしいです。 参考サイト https://wwg.co.jp/blog/3807
target="_blank"を用いて別タブ表示を実装しようと思い、色んな記事を見ていたのですが、 セキュリティ面とパフォーマンス面の2点で脆弱性があるとの記事を見かけたので、対策を実施。
<a href="リンク" target="_blank" rel="noopener noreferrer">
noopenerと、noreferrerの2つを加えてあげれば対策になるようです。
noopener を指定することで、リンク先からwindow.openerを使ってリンク元が参照できなくなる。さらに、リンク先とリンク元が別のものとして扱われるためパフォーマンスに対しての対策にもなる。
しかし、ブラウザによっては、noopenerがサポートされていないため、noopenerと合わせてnoreffererを指定するのが好ましい。
noreffererを指定することで、リンク先にリンク元のリンク情報が送られないようになるため、 noopenerと同じくリンク先からの参照ができなくなる。
らしいです。
https://wwg.co.jp/blog/3807
JSXの記法 JSXファイルはreturnに1つのタグしか持てないというルールがあります。 そのため、以下のようにリストを２つ並べようとすると、2つのulタグをreturnが持つことになり、 import React, { Component } from 'react'; class App extends Component { render() { return ( <ul> <li>Coke</li> <li>Soda</li> <li>Orange Juice</li> </ul> <ul> <td>Hamburger</td> <td>Fries</td> <td>Salad</td> </ul> ); } } export default App; 以下のようにエラーになってしまいます。 Adjacent JSX elements must be wrapped in an enclosing tag 余計なdivタグ これを回避するためによく使われるのは、 以下のようにdivタグで全体を囲って1つの要素を返すようにする記法です。 import React, { Component } from 'react'; class App extends Component { render() { return ( <div> <ul> <li>Coke</li> <li>Soda</li> <li>Orange Juice</li> </ul> <ul> <li>Hamburger</li> <li>Fries</li> <li>Salad</li> </ul> </div> ); } } export default App; しかし、この記法だと余計なdivタグが入ってしまいます。実際、開発ツールで確認すると rootのdiv要素を開いたらさっき書いたdivが出てきてdivdivしちゃってぱっと見づらいですね。 要素が増えてくるとdivをいちいち一つ一つ開けないと中身がみれないので不便です。 divタグの代わりにReact.Fragmentを使う そこで便利なのがdivではなく、React.Fragmentを用いる記法です。 import React, { Component } from 'react'; class App extends Component { render() { return ( <React.Fragment> <ul> <li>Coke</li> <li>Soda</li> <li>Orange Juice</li> </ul> <ul> <li>Hamburger</li> <li>Fries</li> <li>Salad</li> </ul> </React.Fragment> ); } } export default App; React.Fragmentはそれ自体に意味を持たないので、開発ツールでは表示されません。したがって、rootの下にulタグが2つあるのが一目でわかり、画面に2つのリストが表示されていることと直感的にも合います。 結論 JSXのルール（1つしか要素返せない）に従うためだけのdivはReact.Fragmentに変えて可読性を高めよう！ 補足 React.Fragmentは1つしか要素返せないJSXのルールに対して、コードの構造を保つために作られたものです。そのため、divタグとは別物です。例えばReact.FragmentにclassNameを指定したり、styleを指定することはできません。そういう使い方をしたいときは普通にdivを使いましょう。 参考 https://ja.reactjs.org/docs/fragments.html https://stackoverflow.com/questions/49069746/workaround-to-add-classname-to-fragment-in-react
JSXファイルはreturnに1つのタグしか持てないというルールがあります。 そのため、以下のようにリストを２つ並べようとすると、2つのulタグをreturnが持つことになり、
import React, { Component } from 'react'; class App extends Component { render() { return ( <ul> <li>Coke</li> <li>Soda</li> <li>Orange Juice</li> </ul> <ul> <td>Hamburger</td> <td>Fries</td> <td>Salad</td> </ul> ); } } export default App;
以下のようにエラーになってしまいます。
Adjacent JSX elements must be wrapped in an enclosing tag
これを回避するためによく使われるのは、 以下のようにdivタグで全体を囲って1つの要素を返すようにする記法です。
import React, { Component } from 'react'; class App extends Component { render() { return ( <div> <ul> <li>Coke</li> <li>Soda</li> <li>Orange Juice</li> </ul> <ul> <li>Hamburger</li> <li>Fries</li> <li>Salad</li> </ul> </div> ); } } export default App;
しかし、この記法だと余計なdivタグが入ってしまいます。実際、開発ツールで確認すると rootのdiv要素を開いたらさっき書いたdivが出てきてdivdivしちゃってぱっと見づらいですね。 要素が増えてくるとdivをいちいち一つ一つ開けないと中身がみれないので不便です。
そこで便利なのがdivではなく、React.Fragmentを用いる記法です。
import React, { Component } from 'react'; class App extends Component { render() { return ( <React.Fragment> <ul> <li>Coke</li> <li>Soda</li> <li>Orange Juice</li> </ul> <ul> <li>Hamburger</li> <li>Fries</li> <li>Salad</li> </ul> </React.Fragment> ); } } export default App;
React.Fragmentはそれ自体に意味を持たないので、開発ツールでは表示されません。したがって、rootの下にulタグが2つあるのが一目でわかり、画面に2つのリストが表示されていることと直感的にも合います。
JSXのルール（1つしか要素返せない）に従うためだけのdivはReact.Fragmentに変えて可読性を高めよう！
React.Fragmentは1つしか要素返せないJSXのルールに対して、コードの構造を保つために作られたものです。そのため、divタグとは別物です。例えばReact.FragmentにclassNameを指定したり、styleを指定することはできません。そういう使い方をしたいときは普通にdivを使いましょう。
https://ja.reactjs.org/docs/fragments.html https://stackoverflow.com/questions/49069746/workaround-to-add-classname-to-fragment-in-react
