読者です 読者をやめる 読者になる 読者になる

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

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

ワンページスクロールで作られたおしゃれな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