2年 ago
12550 Views

リニューアルに使いたいオシャレな動きCSS&JSパーツまとめ20選

CaptionHoverEffects

季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。

cssSlider

名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。
WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に設置することができます。
cssSlider

MockupSlideshow

3D TRANSFORMSを使ったモックアップスライダー。携帯やPCの中をスライドするからアイディア次第で使い方色々♪こちらは有料(10ドル)になります
MockupSlideshow

Diapo

動画も購入ボタンもいけるjQuery 1.4+とIE7・8対応スライダー。シンプルなので使いやすそうです。
Diapo

WOW Slider

日本語もある有名なWOWslider。モダンブラウザとIE対応の上軽量でかなりの種類の中からエフェクトも決めれるのでjavascript設置初心者にも簡単にできるタイプ。
WOWslider

jQuery Sticky Menu with Background Parallax & Blur Effects

ファーストビューをフル画面で表示しスクロールに合わせてパララックスするタイプ。最近よく見かけるタイプですね。
Background Parallax

jQuery Smooth Parallax Scroll

スムーズにパララックスするjquery
Smooth Parallax

Turn Images Polaroids with CSS3

ポラロイド風CSSアニメーションイメージギャラリー。
Background Parallax

sliding image panels with css3

メインで使いたいオシャレなCSSのみのイメージスライダー
Images Polaroids

Animated Headlines

ちょっとオシャレにヘッドラインに動きをつけたいなら、こんなアニメーションはいかがでしょうか?10種類のアニメーションが用意されてます
animated-headlines

Hover Effect Ideas

マウスオーバーエフェクト30種類のってる
Hover Effect Ideas

slick

レスポンシブに対応したカルーセルスライダー。何かと通販では部分的に使うので便利なタイプですね。
slick

Owl Carousel 2

60オプションからカスタマイズできるカルーセルスライダー。モバイルのタッチやドラッグにも対応してます。
Owl Carousel 2

Elastic SVG Elements

SVGシェイプアニメーションを利用したメニューやボタンなどのエフェクト9種類
Elastic SVG Elements

Animated Content Tabs with CSS3

CSSアニメーションタブコンテンツ
Content Tabs

Creative CSS3 Animation Menus

シンプルなCSStransitionsを活用したメニュー
Animation Menus

dropdownMenu With CSS3

カラフルCSSアニメーションドロップダウンメニュー。CSSとFnot Awesome iconフォントを使ったメニューです。
dropdownMenu

Buttons

カラフルなCSSを使ったボタン
Buttons

Animated Download Button With CSS3

CSSアニメーションのダウンロードボタン
Animated Download Button

Caption Hover Effects

CSSの3D transformsなどを用いたマウスオーバーでタイトルが出る7種のアニメーションエフェクト
Caption Hover Effects

3D Thumbnail Hover Effects

オシャレな3Dマウスオーバーエフェクト
3D Thumbnail Hover Effects

Article Tags:
· · ·
Article Categories:
html&CSS · Javascript · アニメーション · まとめ · 素材
12345 ( サイト評価: 3.67 out of 5)
Loading...

Comments to リニューアルに使いたいオシャレな動きCSS&JSパーツまとめ20選

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ