Q&A
###前提・実現したいこと
パララックスサイトの作成でSkrollr.jsを使っています。
こちらのプラグインは「data-スクロール値=CSSプロパティ」という様に値を指定してその時の要素の状態を決めるのですが、いかんせん何度となく同じようなCSSプロパティを指定すると冗長かつメンテナンス性に欠けます。
この際にdata属性で指定しているCSSをCSSファイルに書いたり、何か変数的な感じでメンテナンス性に配慮した書き方に出来ませんでしょうか？
###該当のソースコード
<div id="section-2"data-500="opacity:0;"data-750="opacity:1;"data-1000="transform:scale(3); opacity:0;">
###試したこと
属性セレクタ？は使用してみたのですが上手くいきませんでした。
回答1件
0
ベストアンサー
scrollerjsいいですよね！
僕も以前scrollerjsでパララックスページを作成しましたので懐かしいです！（笑）
さて、メンテナンスの話ですが、cssでdata-xxxを指定することは可能だと思うのですが、
css側で今htmlに書いているスタイル（opacityとか）を指定するとscrollerjsがそのスタイルを取得してくれなくなるのでその方法は厳しいと思います。
そうなるとscrollerjsがDOMの解析を行う前に、DOMにdata-xxxをsetしていくjsを作るのもありなんですが、
htmｌレンダリング→jsでDOMにdata属性を付与→scrollerjsでdata-属性の解析に入るという手順を踏むので
少し重くなりそう & 初期レンダリングまでの時間がかかりそうなイメージが有ります。
書き方でどうにかするしかないかとも思います。
例えば
html
1<div id="section-2"data-500="opacity:0;"data-750="opacity:1;"data-1000="transform:scale(3); opacity:0;">
を
html
1<div id="section-2" 2 data-500="opacity:0;" 3 data-750="opacity:1;" 4 data-1000="transform:scale(3);opacity:0;">
というふうに書いてあげたりとかです！
根本的な解決になっておらずすいません。。。
投稿2016/06/17 07:17
総合スコア1869
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/17 07:28
2016/06/17 07:30