ブックマーク / sterfield.co.jp (3)

  • jQueryでページ上に表示されるローディングのバーを作ってみる | スターフィールド株式会社

    スマホのブラウザやYoutubeの動画のページなどで、 ページの上にロードの状況を知らせるバーを見かけます。 画像が多いなど、ページ全体のファイル容量が大きくなってくると、 ページの読み込みが完了するまでに少し時間がかかってしまうことがあります。 サイトを軽くするのが一番適切ですが、 それが難しい場合、このローディングのバーがあると、読み込み状況を知ることができて、 少しだけですが、不安が軽減されます。 スマホでWEBページを見るときはデフォルトのブラウザにこの表示があるので何もする必要はありませんが、 PCでも同様に表示したい時もあるかもしれません。 味の明太子 博多中洲いとや また、↑こちらのサイトのようにローディングバーをデザインの一部に取り込んでしまうのも面白いと思います。 今回は、こちらのサイトも参考に、このトップのローディングバーをjQueryを使って作ってみました。 ↓こちら

  • jQuery を使ってランダムで要素を表示する | スターフィールド株式会社

    <div id="wrapper"> <p>ランダムで画像表示</p> <div id="random"> <div><img src="images/img01.jpg" alt="花" /></div> <div><img src="images/img02.jpg" alt="花" /></div> <div><img src="images/img03.jpg" alt="花" /></div> <div><img src="images/img04.jpg" alt="花" /></div> <div><img src="images/img05.jpg" alt="花" /></div> <div><img src="images/img06.jpg" alt="花" /></div> <div><img src="images/img07.jpg" alt="花" /></d

  • クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン | スターフィールド株式会社

    jQueryプラグインのスライダーの紹介は久しぶりになります。 いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、 ご紹介させていただきます。 その名も「Slider Pro」公式サイトはこちらSlider Pro サイト自体もけっこうかっこいいですね! 一応僕が試してみたDEMOもあります。 DEMO 簡単ですが、特徴としては、 ・レスポンシブ対応 ・スワイプ対応 ・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等) ・高さ自動対応 ・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる ・フルスクリーンモードにできる ・上記からいろんなレイアウトに簡単に変更できる! 「Slider Pro」の使い方 まずは公式サイトからダウンロードをお願いします! まずCSSを読み込み、

    クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン | スターフィールド株式会社
  • 1