[ スタジオ・ハッピィバリー ]

みんなを
ハッピィにする
WEBサイトを。

[ スタジオ・ハッピィバリー ]

Labo: Web 1CSS3でページスクロール

image: css3_pageScroll
以前、jQueryでページスクロールのプラグインを作ったのですが、スマフォだとJSのためかアニメーション部分が少々もたつきます。今ではブラウザもCSS3アニメーションに対応していますのでJSからCSS3のアニメーションに切り替えて再度制作してみました。
More

機能の説明:上部の15個のサムネイル画像をクリックすると、該当のブロックまでスクロール、右下の上矢印ボタンをクリックで元に戻る。というもの。よくある機能です。 css3のアニメーションだと動作が滑らかになります。が、いくつかの問題がありました。

ひとつは 'transform': 'translateY で高さを設定すると座標値が scrollTop に反映されない。
具体的には右サイドのスクロールバーがウインドウに同期しないで単純に長くなってしまう。下へスクロールすると上に戻せなくなってしまいます。その不具合に対応するためアニメーションが終了した直後に'transform': 'translateY の値を元に戻し(そうするとウィンドウが元に戻ってしまうので、位置をそのままにするために)再度scrollTopの値を変更するようにしています。
そうすることで、瞬時に座標を入れ替えて見た目は変化せず、長くなったスクロールバーの長を元に戻すようにしています。

もうひとつはCSSの問題ではないですが、スクロールの所要時間。スクロール時間もスクロール量に合わせて変化させないと、短いときは戻りが遅くイライラさせられ、長いときは瞬時に戻って自分がどこにいるのかわからなくなってしまいます。短いときはすばやく、長いときはそれなりに、スクロールするように設定しました。

スクロールのアニメーションがもたもたするときはブラウザのキャッシュを多め(推奨250MB以上)にしてみてください。
CSS3でページスクロール
***

Labo: Visual 1個性的なビジュアルアートに最適なKPT6のご紹介

image: kpt6_visualArt_01
その昔、今からほぼ20年前KPTという一世を風靡したフォトショップのプラグインがありました。20年前のプラグインなのにいまだ造形感覚を刺激する魅力に溢れてます。今回このプラグインの簡単なご紹介を。
More
当時はPCのクロックも100khz前後。メモリも100MB前後。まだフロッピーディスクでした(汗)。でもさくさく動いてました。
斬新なビジュアルをいっぱい作ったものです。それなのに操作が独特だったためか一般受けはしなくて自然と消えてしまいました。(悲)

しかしこのソフトじゃないと創れないビジュアルってあるんですよね。
ずうっと使い続けたいんですが、今ではWindows7ですらインストールできません。苦肉の策でXPにインストールしたものをそのままWin7へコピーしてなんとか使ってます。
というかフォトショップのバージョンもCC2018は言わずもがな、フォトショップCSでなんとか起動できるという・・・。

このロゴはそのKPT6の中に含まれているGELっていう機能で作りました。タブレットで描いたラインがもこもことリアルな立体になって行きます。Zブラッシュみたいなものですが、あそこまでパラメータの調整とか面倒ではないです。2Dですし。いやあ、やっぱりすごいです、このソフト!
KPTにはGER以外にも面白いユニークな機能がたくさんあります。

スタジオ・ハッピィバリーでは通常のソフト以外にもこれらの独創的なツールも使い他にはないユニークで斬新なビジュアルを多数ご提案します。
Photoshop CS で十分なんじゃあと思う今日この頃

ハッピィバリーのサービス

「WEBサイト構築」「印刷媒体の企画デザ/イン」「3DCGイラスト」「CI/ロゴタイプ・シンボルマーク」れぞれ4本の基本サービスを通じてお客様に喜んでいただけるサービスを提供します。

WEBサイト構築

WEBサイトの運営に必要な全てをお受けします。ドメインの取得・管理移行からコピーワーク、商品・建物・モデルの撮影、広告までお客様が必要とされる全てをお任せください。
また、WEBに不慣れのお客様でも、エクセルを使って簡単にWEBサイトの更新ができる「エクセルで簡単WEB更新システム」もご用意しています。

印刷媒体の企画デザ/イン

チラシ、ポスター、名刺、書籍装丁など印刷・出版物の企画・デザインもお任せください。

3DCGイラスト

特にアート系の3DCGを得意とします。また、3DCGベースのキャラクターデザインはもっとも得意とするところです。医薬品効果、人体解剖などの医療用の3DCG、 医療用のデジタル・コンテンツではその強みを生かし3DCG制作、プログラム、UI、企画デザインと一貫してお受けすることでお客様の理想を100%反映させています。

CI/ロゴタイプ・シンボルマーク

ロゴタイプはデザインの基本、あらゆるビジネスの基盤です。お客様の会社やブランドのイメージを、斬新で力強く表現します。

ハッピィバリーとは

Webサイトの構築・制作・運営専門の事業所です。WEBサイトを必要とする方のお手伝いをします。そのために必要となるドメイン取得、サーバー運営、撮影、デザイン、コピーワークからWEB広告まで全て賜ります。使う人見る人すべてが『ハッピィ』になるサイトをお届けします。

ハッピィバリーの制作理念

WEBサイトに求められることは・・・ユーザーにとって有益な情報を定期的、また必要な時に迅速に提供できること。その情報をユーザーが求めやすいようにすること。スタジオ・ハッピィバリーではこの2点を柱に、誰のために、何のため、何を伝えるべきかをご提案します。

お問い合わせ情報

屋号
スタジオ・ハッピィバリー
所在地
〒009-0006 神奈川県相模原市中央区淵野辺3-3-15-1406
電話番号
080-3085-7680
e-mail
jor@studio-happyvalley.com
Design Site
studio-happyvalley.com
3DCG Site
digital-sculpture.org