元保育士が営業を経てエンジニアになるまでの孤軍奮闘歴

好きなことをやり続け、学生時代には保育士資格を取得し保育士を経験。保育士としての仕事は楽しかったものの目的がないことに虚しさを感じ、自分でのサービス作りに関心を持つようになった。そこからは、プログラミングを勉強し始め、今は自分でサービス作れるようになるエンジニアを目指し孤軍奮闘中。

ワンページスクロールで作られたおしゃれなHomePage13選!-CodeDoIt.com

最近はペライチなど簡単にLPを作れる時代ですよね。そこで本記事では、ペライチにも負けない汎用性も高くおしゃれなLP、ワンスクロールページをご紹介します。

f:id:hajime0308:20170201182801p:plain

 

 

scssではなくcssをご利用したい方は以下のサイトがオススメです。

www.sassmeister.com

1.Easy One Page Scroll

See the Pen Easy One Page Scroll by André Cortellini (@AndreCortellini) on CodePen.

2.Header/Footer Parallax Effect

See the Pen Header/Footer Parallax Effect by Hudson Marinho (@hudsonmarinho) on CodePen.

3.Sticky Header CSS Transition

See the Pen Sticky Header CSS Transition by Brady Sammons (@soulrider911) on CodePen.

4. Zoom and Blur background Image

コピペして動きます!

See the Pen Zoom and Blur background Image by Zach Richard (@zrichard) on CodePen.

5.Batman nav.

スクロールするとTopにNavが出てくるおしゃれなデザインですね!コピペして動きます!

See the Pen Batman nav. by Srdjan Pajdic (@MightyShaban) on CodePen.

6.Cool layout with fancy page transitions and off-canvas menu

スクロールするとおしゃれに次の写真が現れます!コピペして動きます!

See the Pen Cool layout with fancy page transitions and off-canvas menu by Nikolay Talanov (@suez) on CodePen.

7.Curved Cut

コピペして動きます!

See the Pen Curved Cut by Hornebom (@Hornebom) on CodePen.

8.Vertical Layout with Navigation

jquery2.0環境で動きました。色合いがおしゃれですね

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

9.CSS background change on scroll

BELNDの部分を変えておしゃれなHomePageが作れそうですね!コピペで動きます!

See the Pen CSS background change on scroll by Giana (@giana) on CodePen.

10.Fullscreen drag-slider with parallax

珍しい横スクロール版です!コピペで動きます!

See the Pen Fullscreen drag-slider with parallax by Nikolay Talanov (@suez) on CodePen.

11.Skewed One Page Scroll

斜めに写真が割れて次のページに行きます。コピペで動きます!

See the Pen Skewed One Page Scroll by Nikolay Talanov (@suez) on CodePen.

12.Life timeline

自己紹介ページにうまく使えそうです!コピペで動きます!

See the Pen Life timeline by Nicolas Slatiner (@slatiner) on CodePen.

13.Paral & Lax

流行りのカーテンデザインですね!コピペで動きます!

See the Pen Paral & Lax by Daniel Riemer (@zitrusfrisch) on CodePen.

今後エンジニア初心者が増え、Wixしかりペライチしかり簡単にHPを作ることができる世の中になっていくのだろう。まぁ、そうした理由もあるが、元々のきっかけは単純。CodePenは僕はすごく大好きで見ていると「すごい!」と驚くことが多く、その驚きを共有したいとも思ったことからCodepenのメディアを作っていずれバイアウトみたいなのを考えCodeDoIt.comというサイトを作った。しかし、メディアの知識もない僕は、アクセスを増やすくことができずにいたためまずはブログで書いてみようと思い載せました。他にもいろいろあるので見てください!!

http://codedoit.com/

 

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com