ジャングルオーシャンのアコーディオンメニューサンプルデモページ
1.複数開閉できる アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン３ コンテンツ１ コンテンツ２ コンテンツ３ 2.一個開けると他は閉じる アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン３ コンテンツ１ コンテンツ２ コンテンツ３ 3.一番目を開けておく（複数開閉できる） アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン３ コンテンツ１ コンテンツ２ コンテンツ３ 4.一番目だけ開けておく（一個開けると他は閉じる） アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３
簡単に画面いっぱいの縦スクロールページが作れるScrollifyの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは、はるです。 LPなどでよく見かける縦長のサイトで、各セクションが画面いっぱいに広がるページを、プラグインで簡単に作る方法を紹介したいと思います。 今回の記事では、このようなベースを作成していきます。 Scrollifyについて デモサイト：https://projects.lukehaas.me/scrollify/ github：https://github.com/lukehaas/Scrollify 利用するのは、「Scrollify」というプラグイン。 デモサイトにあるような、各セクションごとにひっつくようなレイアウトを簡単に制作できます。セクションで画面の高さを超える場合、そのセクション内でスクロールができるようにしてくれるのが特長です。 githubの履歴からわかるように、リリースが2014年と新しくなはいプラグインですが、他のものと比べ使いやすかったため、
おみくじプログラムの改造 - Qiita
次のレッスンのJavaScriptで作るスロットマシーン (全7回)に挑戦したのだがレベルが急に上がっていて、ほとんど理解できなかった。ここは一度、最初のレッスンに戻ってみる。どうやらプログラミングは既存のプログラムを改造する経験を積むことでもスキルが上がるらしいので、自分なりにチャレンジしてみた。 配列の中身を増やすだけでは芸がないので、いくつか変えてみたい。 修正、追加する機能 ランダムで生成される要素をおみくじとは別に、おみくじに対応するコメントも追加する おみくじ表示を画像にする 日頃からQiitaで活動されているプログラマーの方々には呼吸するくらい簡単なことかもしれませんが、この2つには苦しめられました。現在進行形です。 技術がともなってなかった JavaScriptでつくるおみくじを参考にすれば作れるかと思ったのだが、そのレッスンではランダムで作成される要素同士は連携しておらず
1日1回だけ引けるjavascriptおみくじ
<!DOCTYPE html> <title></title> <style type="text/css"> form > div { text-align : center; } </style> <body> <h1>今日の運勢</h1> <form action="#"> <div> <h2>スクリプトが有効な場合、ここに今日の運勢が表示されます</h2> <img src="777.png" id="un" alt="スクリプトが有効な場合、ここに今日の運勢が表示されます"><br> <input type="button" value="今日の一枚！" onClick="omikuji(document.getElementById ('un'));"> </div> </form> <script> var omikuji = (function (getCookie, se
【jQuery】重複しない複数の要素をランダムに表示する方法。（jQuery編）
例えば「1」〜「10」までの要素の中から３つだけランダムに抽出して表示させたい場合があります。 この際、抽出した要素が重複することなく、さらに順番も含めてランダムに表示させるにはどうしたらいいでしょうか？ 今日は、そんなときに重宝する便利な jQuery のテクニックを紹介します。 リストはもちろん、画像やブロック要素など、ほぼどんな形式にも対応できるので様々な場面で活用できると思います。 まずは jquery.randomdisplay.js と名付けた、以下の内容の javascript ファイルを用意します。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length
毎日自動更新。「今日のおすすめ」欄を作る [ホームページ作成] All About
毎日自動更新。「今日のおすすめ」欄を作るたくさんある「お勧め」の中から、毎日1つを自動的に選んで表示する「今日のお勧め」機能を作ってみましょう。1日の間、誰が何度見ても同じ内容が表示されます。翌朝9時に自動的に次の項目に変化します。 ※この記事は、前回の記事「複数の画像リンクからランダムに1つを表示」がベースになっています。 まだお読みになっていない場合は先にそちらをどうぞ。 自動更新する「今日のおすすめ」欄を作る たくさんある「お勧め」の中から、毎日1つを自動的に選んで表示する「今日のおすすめ」欄を作ってみてはいかがでしょうか。 毎日1つのコーナーを紹介したり、1つのイラストや写真を紹介したりするのに使うとおもしろそうです。 以下は、表示写真が自動的に毎日更新されるサンプルです。 写真はリンクになっていて、リンク先URLも写真に合わせて変化します。 ※9時0分～翌日8時59分までは何度見
![毎日自動更新。「今日のおすすめ」欄を作る [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
使いやすくて高機能なものが多数！スライダー実装時に便利なプラグインやチュートリアルまとめ - NxWorld
実際に使用して良かったものも含め、スライダー系のスクリプトやチュートリアルで覚えておきたいと思ってメモしてたのが溜まってきたので備忘録兼ねてまとめました。 とにかく高機能なものから動きがユニークなものまで様々なタイプがあり、ほとんどが最近実装する機会が多いと思うレスポンシブやタッチ・スワイプといった動きにも対応しています。 Slider Pro プラグイン名にProとついているのでパッと見は有料かと思うのですが、無料で使用できるjQueryプラグインです。 とにかく高機能でレスポンシブやタッチ・スワイプといったものはもちろん、下記のように様々な設定や機能が用意されています。 modular architecture responsive touch-swipe CSS3 transitions animated layers (and static) infinite scrolling
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
ドラッグによるテキストの選択をキャンセルする【CSS, HTML, JavaScript】 - Programming Magic
Webページでは普通、マウスでドラッグするとテキストを選択することができるが、JavaScriptやスタイルシートを使うことで選択を防ぐことができる。 ただし、これはサイトの文章をコピーさせない目的で使うことは推奨しない。 紹介する方法でドラッグによる選択を防いだとしても、Ctrl+Aの全選択を防ぐことができないことが多く、ソースを表示させればコピーできてしまう。 さらに、文章をコピーできないサイトは不便で、ユーザに不快な思いをさせてしまう可能性が高い。 このドラッグによる選択をキャンセルする方法は、JavaScriptなどでドラッグで特殊な効果を表現する際に、通常の選択はしてほしくないという場合などに使うと良い。 例えば、テーブルのセルをドラッグで選択するサンプルのような場合がある。 これでテキストを選択してしまうと、おかしく見えてしまう。 ドラッグによる選択をキャンセルす
Ideas for Subtle Hover Effects | Codrops
Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’
JSを読み込ませない[iphone,ipad,android]エージェント判定 | オレのWEBPAD
スマホサイト制作に必要だったので忘れないようにメモ。時間が空いたときにきちんと整理。 スマホやパッドなどでJavaScript[jQuery]を実行したくないときに使います。今回は端末認証ですがOSでもいけるでしょう。 記述もHTML内・JSファイル内の両方で可能。 【plugin.js内記述】条件判定でスマホとタブレットでJSの実行禁止 単純にifを利用し、もしiPhone/Android/iPadでなければ実効するといったものです。 利用したいjQueryなどのソースを以下の記述で囲めばOK。 if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){ //ここから以下へ実行するJavascriptを記述 ･････ //ここまで } 【HTMLヘッド内記述】条件判定でスマホとタブレットでJSの実行禁止 js内に記述するのと利用方法
画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript : 森のコーディング
8月28 画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript カテゴリ:javascriptjQuery Tweet 画像がいっぱい並んでるページなんかは、データが重くなるので、ページの表示に時間がかかる。 そんなときは、まっしろいまま待たせるんじゃなくて、 せめて、 「今ローディング中ですよー」 という、このグルグルまわるアニメーションを出してあげると、 少しはイライラが軽減される。 （ほんの少しだけ） それを、javascript ＆ jQueryでシンプルに実装するのを説明します。 サンプルをつくったのでまずは確認。 あぁ、ネコかわいいよ、、ねこ・・。 1.まずはローディング画像を用意 あのグルグルまわってる画像 はGIFアニメで作られてる。 適当に「loading画像」 で検索してきてもいいし、 こういうジェネレータサイトみたいなのもある。 htt
レスポンシブデザイン対応でエフェクトも豊富なイメージスライダー「camera.js」の実装メモ
前々からサイトのメインビジュアルをどうしようか迷っていたところ、レスポンシブデザイン対応の面白そうなスクリプトがあったので少し調べてみました。 どうも！noramasaです！ ウェブサイトのトップページに使うビジュアルって結構重要ですよね。 ビジュアル自体もそうですし、それの見せ方も静止画であったり動きのあるものだったり…。 動きのあるものでも、ゆったりとしたフェードなのか、スピード感溢れるスライドなのか…そのサイトに適したものを見つけたいです！ 今回は以前から気になっていて、自分のサイトに使う予定の「camera.js」についてご紹介♪ 「camera.js」とは… 最近話題のレスポンシブデザインにも対応しており、PC・スマートフォン両サイトに使えるイメージスライドショーのスクリプトです。 画像のみならず、動画にも対応しているのでオープニングムービーを流した後に写真のスライド…といったこ
【jQuery】背景画像を画面いっぱいでスライドショーさせる方法 ｜ KLUTCHE
ウインドウサイズに応じて画面いっぱいに伸縮する背景画像をスライドショーで表示するjQueryプラグインです。オプションも豊富なプラグインですが、シンプルな設置方法を紹介します。 デモ デモページ こんな感じの表現が可能です。 使用するjQueryプラグイン Supersized 全画面背景スライドショーでは定番のプラグインです。 同様のものは他にもありますが、安定性・拡張性ともに信頼のプラグインだと思います。 HTML jQuery本体と、jquery.easing.min.js、supersized.3.2.7.min.jsを使用しています。 Supersizedのサイトからサンプルをダウンロードすると含まれているので、自サイトにアップロードして読み込んであげます。 <script type="text/javascript" src="http://ajax.googleapis.co
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
How to Create a Simple Multi-Item Slider | Codrops
A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction. For today’s tutorial we want to show you how to create a simple item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing a
D3.jsを学習する際に見ると良いドキュメント - Qiita
1. Examples まず見るべきなは、実際に動かせる例がたくさん存在するギャラリーページ https://github.com/mbostock/d3/wiki/Gallery 最初は、上の方にあるのを幾つかクリックして「すごーい」と思えばいい。ただ、実際はちょっと下にある"Basic Charts", "Techniques, Interaction & Animation"という部分のほうが自分で使うとなった場合、参考になるはず。 2. Introduction 次に見るのはIntroductionページ http://d3js.org/ ここはd3jsのトップページでありながらドキュメントのIntroductionも兼ねている。 ...が、ここを読んでも全く使えるようになった気がしない。 ただ、 Selections Dynamic Properties Enter and Ex
データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」
どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
d3.js - 三つの小円