Y38Design

プロダクトデザインをはじめとして、
Webデザイン、グラフィックデザインなどを手がけるデザイナーY38のサイトです。

Profile Portfolio Blog

Profile

Portfolio

Blog

CSSでコピック

Webデザイン 2018年7月5日 木曜日 20:34:47

ずっとやろうとしてて放置してたコレ。

ようやくやってみた。
一応htmlはクリーンな感じ。

https://y38.org/scrolltest/index3.html

 

あ、Chorome / Safari / Mobile Safariでしか確認してないので注意

 

basicscroll

Webデザイン 2018年7月4日 水曜日 12:17:47

動きの設定はまだ甘いけど、まあとりあえずは良しとして、それよりMobile Safariで見るとぬるぬる動くのにmacで見るとぎこちない動きをする
スタイルで動く要素にwill-change:transformとすれば描画前に読み込んでくれて描画遅れを防ぐ、とあったんだけど変わらないのよなあ
ガクガク動くのはカッコ悪いからなんとかしたい

テスト

Webデザイン 2018年7月3日 火曜日 9:30:40

wordpressからのsns投稿、全文じゃなくて抜粋するにはディスクリプションに一部をコピペなりしないといけないのか…
なんとかデフォルトとして設定できないものか

basicscroll

Webデザイン

fromとtoに書く、top-middleとかの意味がよくわからず、書き直してリロードしてを繰り返してたんだけど、ようやく解説してあるサイトを見つけた

https://tr.you84815.space/basicscroll/data.html

middle- bottomと書くと、要素の中央(middle)がビューポートの下部( bottom)に達した時にアニメーションが始まる、ということらしい。

これで少しは制御しやすくなったかも。

あとはpropsの中身がよくわからない。透明度は.01から.99だからわかりやすいのだけど、ここの

https://codepen.io/electerious/pen/QGNxxx

0から100pxがわかりにくい

position:relativeのことだと思うんだけど、アニメーションしてズレて動くから値が掴みにくい

このへんはもっといじってみないとわかんないな

てか素直にjqueryのを探した方が使いやすいかもしれないけど、他のjsに非依存というのは利点だと思うから、なんとかモノにしたい

basic scroll

Webデザイン 2018年7月1日 日曜日 19:34:59

なんとか導入してみたけれどまだコピペの域を出ない

内容を把握した上で弄れば多彩な表現ができるのだけど、jsなのかbasicscroll独自のものなのかわからないけど、何をどう書いたらいいのかがわからない

でもひとまずは置くことができたので少しずつ触っていこう

basicscroll

Webデザイン 2018年6月29日 金曜日 9:08:02

試しててうまく動かないからここの見た目がアレなことになってる。

デモ通りに、そのままコピペすると動く。でもその中から自分の使いたいものだけ残すと動かない…

jsを弄ればいいんだろうけどまだ仕組みがよくわかってないから難しい。

パララックスというたいして実用的ではないものにこんなに時間を割いていいものか。

動いた

Webデザイン 2018年6月27日 水曜日 21:20:22

あ、動いた。

試しにwordpressから、さっきの静的ページのjsを読み込んでみたら動いた。
js内の記述がおかしかったかも。

basicscroll

Webデザイン

まだ試しているbasicscroll。

どうやっても動かない。何かがおかしいと思ってこことは別にページを作ってみた。

https://y38.org/scrolltest/

ここではちゃんと動く。

jsの呼び出しをbody末尾に記述するんだけど、もしかしたらwordpressが吐き出してるもろもろが悪さしてるのか?

パララックス試してみたいだけで他のなんでもいいのかとしれないけど、せっかくなら新しいの試したかったのに、もしwordpressが悪さしてるのだったら使えない…困った。

basicscroll

Webデザイン 2018年6月26日 火曜日 9:17:37

パララックスなんかが簡単に実装できるとかいうbasicscrollというスクリプトを使ってみたいのだけど、うまく動かない。

というか導入の仕方がよくわかんない。

basicscrollもそうだし、cssは変数を使うからscssぽいんだけどサーバでscssを使うやり方がさっぱりわかんない。

というか今書いた概念すら合ってるかわかんない。

頼りのcolissさんのところでも情報が少ない。

今までパララックスは実装したことないから試してみたいんだけどなあ

bxslider

Webデザイン 2018年6月22日 金曜日 20:04:18

いろんなサイト見ながらオプションを設定しようとしたのだけど、オプションつけたとたん動かなくなって、なんでや、と思ったらサンプル載せてた何個かのサイト全部、構文が間違ってた

いいのか、そんないい加減で…

toTop