Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

マスターしてみたいCSS エフェクト\parallax/

。最近ちらほら見かけるParallax。これ自在に操れるようになりたひ✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪

Pure CSS Parallax

    http://keithclark.co.uk/articles/pure-css-parallax-websites/

 f:id:DDramonQ:20160708025819j:image

 

 

2013年にはすでにあったらしく、海外では2014,15年くらいに少しWebトレンドになったとかならないとか。。(*ö*)✨

 

 

 

AWWWARD 

   http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html

 f:id:DDramonQ:20160708025826j:image

その中から個人的に良かったもの

 - http://melanie-f.com/en/

 - http://www.feedmusic.com/#/

後、Apple.,Inc( iPhone6sのページ )も効果が秀逸なParallaxでした✨✨♪ しか~し…。。タブレットからだと、漏れなく「フリーズ→ 電源切るしかなくなる→0(:3 )~ ('、3_ヽ)_」

注意が必要です😅💦 PCなら恐らく大丈夫だと思います、多分( ¯∀¯٥)w

 

 

CSS Transforms

ParallaxはCSSの3D描写を利用したものらしいです。HTMLやCSSはW3Cを筆頭に、様々な企業や大学の研究者の方が参加して技術開発がされているのですが、CSSのTransforms属性はまだ開発途上中らしく、初出は2009年なのですが、Working Draft段階で、まだ標準化されていませんでした。なのでブラウザやOSによっては、フリーズしたり上手く表示されなかったりするそうです( ˙◊˙◞ )◞ 

 

 

 

W3Cの " [REC] W3C Recommendation "までの道のり

 

僕も曖昧だったので、今回W3C + 様々なサイト を参考に以下に推奨段階(<REC>Recommendation)までのプロセスを図にしてまとめてみました🌟

 f:id:DDramonQ:20160708123707j:image

 - ED - Editor's Draft

     - WD - Working Draft

         - LC - Last Call

             - CR - Candidate Recommendation

                 - PR - Proposed recommendation

                     - REC - W3C Recommendation

 

 

 

 

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️