信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    高機能スライダー「Swiper」の魅力的なオプションについて

    こんにちは、ささです。今回は高機能スライダーの大定番「Swiper」の魅力的なオプションを使った実装サンプルを一部ご紹介します!色々なスライダープラグイン試してみましたが、個人的にこれが一番使いやすいプラグインではないかと思っています。◆Swiperとはhttps://codepen.io/HOanhhOanhh/pen/eorEVR/レスポンシブ対応やスワイプ操作が可能なため、スマホサイトへの実装がしやすく、前・次ボタン、ページネーション、スクロールバー、スライド速度、エフェクトなど様々なオプションを備えた高機能プラグインです。※実装方法や設定の詳細は、下記URLをご参照ください。http://idangero.us/swiper/get-started/基本的な設定をするだけで、シンプルなスライダーの実装が可能ですが、Swiperの魅力は豊富なオプションだと思います。様々なオプションを駆使すれば、以下のような面白い動きをさせることが可能です。◆実装サンプル・Swiper Cover Flow Sliderhttps://codepen.io/michiel-huiskens/pen/jMjozYメイン画像を中央に表示し3Dでスライドが切り替わる、カバーフロー効果を使用したスライダー・3D Cube Slider with Swiper.jshttps://codepen.io/digistate/pen/OzOZgY四角い箱がくるくる回転する、キューブ効果を使用した3D回転スライダー・Slider transitionshttps://codepen.io/fluxus/pen/rweVgp縦スクロールとパララックス効果を使用したスライダーこれらはほんの一部のオプションで作られたもので、Swiperにはまだまだ多くのオプションが存在します。※ご興味ある方は、下記URLをご参照ください。http://idangero.us/swiper/api/#parametersSwiperを使いこなして、より魅力的なスライダーを実装してみてはいかがでしょうか!
  • テクログ

    思わず押したくなる!?ボタンエフェクト5選

    こんにちは、ささです。今回は思わず押したくなるような、ボタンエフェクトを5選ご紹介いたします!HTMLとCSSのみで実装が可能なためお気軽にお試しができます!◆Button hover effects with box-shadowhttps://codepen.io/giana/pen/BZaGyPbox-shadowを使ったシンプルなエフェクト◆Layered Buttonhttps://codepen.io/rauldronca/pen/EWeEvVパネルが積み重なってくるシンプルなエフェクト◆luxury buttonshttps://codepen.io/dbox/pen/bdzeEwグラデーションが美しい高級感のあるエフェクト◆CSS BUTTON HOVERhttps://codepen.io/ImranPardes/pen/YvmRpz次のページへ行きたくなる!?アニメーションが使われたエフェクト◆Bubble coloring buttonhttps://codepen.io/comehope/pen/eKqZjy泡がもこもこ浮き上がってくる楽しいエフェクトどんなページでもボタンをクリックして見てもらわないことには何も始まりません。これらのエフェクトを加えることで、少しでも多くクリックしてもらえるようなボタンを実装していきたいですね!