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

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

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

Codepenで見つけた|コピペで参照できるおしゃれなスライドエフェクト12選!|CodeDoIt.com

プログラミング

ホームページには綺麗な写真がよく使われます。そしてその写真をきれいに、かっこよくアニメーション付きで表示させ、ホームページをおしゃれにするのがスライドエフェクトです。ここでは、そんなおしゃれなスライドエフェクトを厳選して12個ご紹介していきます!

f:id:hajime0308:20170201182909p:plain

 

 

scssではなくcssを使用したい方は以下のサイトをご利用ください。

www.sassmeister.com

1.CSS image slider w/ next/prev btns & nav dots

See the Pen CSS image slider w/ next/prev btns & nav dots by Avi Kohn (@AMKohn) on CodePen.

2.Responsive CSS Image Slider

See the Pen Responsive CSS Image Slider by Dudley Storey (@dudleystorey) on CodePen.

3.3D Carousel Using TweenMax.js & jQuery

これはすごいですが、Teewn.jsを用いているので参照できる人は少ないかもしれないです。

See the Pen 3D Carousel Using TweenMax.js & jQuery by John Blazek (@johnblazek) on CodePen.

4.slider thumb

See the Pen slider thumb by abdelmonaem shahat (@voldmort20dark) on CodePen.

5.3D Carousel Gallery

See the Pen 3D Carousel Gallery by Dudley Storey (@dudleystorey) on CodePen.

6.One page scroll with depth effect (?)

See the Pen One page scroll with depth effect (?) by Nikolay Talanov (@suez) on CodePen.

7.Kontext

丸部分をクリックすると次のスライドに移行します。コピペでも動きます!

See the Pen Kontext by Hakim El Hattab (@hakimel) on CodePen.

8.1_SliderImages Jquery and Css3

これもおしゃれですね!

See the Pen 1_SliderImages Jquery and Css3 by Bilal-alshame (@Bilal-alshame) on CodePen.

9.Responsive Accordion (Background Images)

写真を複数枚並べる時に良いデザインですね!コピペで動きます。

See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.

10.Popout Slider

Pugで書かれていますね。

See the Pen Popout Slider by Nathan Taylor (@nathantaylor) on CodePen.

11.Slice Slider

おしゃれなスクロールデザインです!

See the Pen Slice Slider by Stephen Scaff (@StephenScaff) on CodePen.

12.Image Gallery flexbox + JS

写真のカーテンみたいですね。クリックした写真はアニメーション付きで横に拡大されます。

See the Pen Image Gallery flexbox + JS by joseba (@jkcu16) on CodePen.





スクロールはうまく利用することでホームページのオシャレ度がぐんと増します!写真を載せる際には、ぜひご利用ください。そして、このようなキュレーションをしているのが今作っている参加の以下のサイトです。今はとりあえず仮説としてブログに載せました。気になる点があればコメントどうぞ!

http://codedoit.com/

 

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com