保育士していた学生が起業してビジネスの成功者になるまで...

保育士の働く環境、学童と児童館で教育を受けれられる環境を作るために活動。ビジョンは「子どもに人生の糧をつくる」である。ここではそんな活動の経緯と自分のアイデアをまとめていきます。

Codepenで見つけた|コピペで使える!HTML,CSS,JSで書かれたオープニングデザイン6選!|CodeDoIt.com

サイトを開いたときにテキストが動くなど始まりを始まりを告げるようなものがあると驚きとともにサイトの印象は一気に強くなり、サイトを覚えてもらうことに成功します。ここでは、そんなオープニングデザインの中でもおしゃれで思わず見入ってしまうコピペで使えるデザインをご紹介していきます。

f:id:hajime0308:20170201182035p:plain

 

scssをcssに変換したい方は以下のサイトをご利用ください。

www.sassmeister.com

1.SVG map with SASS Random Powered Animation

See the Pen SVG map with SASS Random Powered Animation by Jack Nycz (@jackairtight) on CodePen.

2.·● MOTION for the web ●·

PugやStylusで描かれているので使える人は少ないかもしれないですが、非常におしゃれなので紹介しました!

See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen.

3.numbers cube counter

See the Pen numbers cube counter by Gregor Adams (@pixelass) on CodePen.

4.VelocityJS demo

コピーして動かすこともできますし、何よりおしゃれですね!すごいアニメーションです!

See the Pen VelocityJS demo by LegoMushroom (@sol0mka) on CodePen.

5.Type Animation: Staggered Slice Effect

See the Pen Type Animation: Staggered Slice Effect by Stephen Scaff (@StephenScaff) on CodePen.

6.Snow-clearing Squirrel Loader

See the Pen Snow-clearing Squirrel Loader by Chris Gannon (@chrisgannon) on CodePen.

僕は今後CodeをシェアしてUI、UXを初心者でも簡単に実装することができる時代がくるのではないかと読んでいる。偶然でもこのサイトを見てくださった方。 もし、そんな世界の実現に向けてメディアの運営について気にになる点があれば匿名でも良いのでコメントください。

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com