作品を完成させるために必要な知識やプロセスを教えていただける方
ご覧いただきありがとうございます。Web上でのインタラクティブな作品を作りたいと考えております。
【どんな】
奥にスクロールしていき、なおかつ遷移していくサイト（以下参考サイト）
http://2011.beercamp.com/
http://noze.space/archives/226
【困っていること】
そうするために最適なプロセスや、必要な知識が不足している。（例：cssのtranslateZをjavascriptで取得できないのだろうか／transformの値がmatrixで表示されるが肝心のｚ値がそこにはないetc...）
【こんな方を探しております】
・cssでのtransform、translate3dや、Javascript、jQueryが得意な方
・１ヶ月間サポートしていただける方（制作のための時間は十分に割けるので、１ヶ月間で完成させたいと考えております。）
・予算は~6000（相場を参考にしております）
現在学生で、アートをウェブでインタラクティブな表現で見れるサイトを作りたいと考えており、Chromeで動けば問題ない、具体的な作品の構想もできている、jQueryでなにかプラグインがあるはず・・・と安易な考えを抱いていたのですが、どうやら自分にはかなりハイレベルなことをしようとしているということに気づき、この度メンターさんを探しております。
スキルとしては、これまで独学でHTML/CSSを学び、現在企業様の方でコーダー見習いとして課題としてサイト制作も６件ほどしております。なのでマークアップの知識は問題なく、slickやアコーディオンメニューのためにjQueryを使用する事もあるため、少しずつJSやjQueryも勉強しているといった次第です。
こんにちは。
getComputedStyleは試してみました?
https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle
参考サイトのサンプルなら…
window.getComputedStyle(document.getElementById('scaler')).transform
"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 4.86, 1)"
こんな感じで文字列が返るので、これをパースすればいいのかな?
外してたらスミマセン。
頑張って。
gpsoft 様
コメントありがとうございます。
アドバイスを参考にやってみたのですが、ほかのCSSやJsに問題があるのか、matrix3dではなくmatrixが表示され、zの部分は表示されませんでした。
id部分のCSSstyleDeclationをjsで呼び（初心者なもので言葉遣い間違っていたらすみません）、transformのスタイルを確認した際には、matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 4.86, 1)といった値が出ているのですが、なぜか引っ張り出せず・・・
ですがとてもいいヒントを得られました。お時間割いていただきありがとうございました。
お疲れさまです。
matrix3dではなく、matrixになるということは、zが0なんでしょうね。
http://noze.space/samplepage/20170921/sample_1.html
↑例えば、このサンプルのページで、
スクロールバーが一番上にあるときは、#scalerのzは0なのでmatrix(つまり2D)だけど、
少しでも下へスクロールすると、zが0より大きくなるので3Dに変わる
ってことかなぁ。
ちなみに、「#scaler」っていうのは、「id属性がscalerな要素」っていう意味です。
つまり、5つのsection要素を囲んでいるdiv要素のことです。
スクロールバーを動かしながら、↓これらの値がどう変化するか、見てみるといいかも。
$('#scaler').css('transform')
$('#scaler .section-1').css('transform')
$('#scaler .section-2').css('transform')
参考まで。