4/4 毎日自動更新。「今日のおすすめ」欄を作る [ホームページ作成] All About
ソースのまとめ 今回の記事で作ったすべてのソースを以下にまとめて掲載しておきます。 HTMLファイルへコピー＆ペーストして試してみる際などにご活用下さい。 ■head要素内に書くJavaScript <script type="text/javascript"><!-- // 画像・URLリストを配列で作る var imglist = [ [ "photoA.jpg", "写真A", "pageA.html" ] , [ "photoB.jpg", "写真B", "pageB.html" ] , [ "photoC.jpg", "写真C", "pageC.html" ] , [ "photoD.jpg", "写真D", "pageD.html" ] //注 ]; // 1つ選んで表示する関数 function DailyImageLink() { // 日付を元にどれか1つを選ぶ var
![4/4 毎日自動更新。「今日のおすすめ」欄を作る [ホームページ作成] 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)
Timeline JS
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality. Tips & tricks Keep it short. We recommend not having more than
チラシでたどる震災１０００日 - 朝日新聞デジタル
津波が町を襲い、新聞も、折り込みチラシも届かなくなった。再び配られ始めた１枚１枚に、復興への思い、町が抱えた課題が映し出されていた。 サイトポリシー│サイトマップ│利用規約│web広告ガイド｜リンク｜個人情報│著作権│お問い合わせ・ヘルプ 朝日新聞デジタルに掲載の記事・写真の無断転載を禁じます。すべての内容は日本の著作権法並びに国際条約により保護されています。 Copyright © 2013 The Asahi Shimbun Company. All rights reserved. No reproduction or republication without written permission.
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法｜BLACKFLAG
このところ立て続けに、 Webページ上に初回アクセスのみ動画を表示させたい、 Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、 など、初回アクセス時に処理・制限を変える要望があり、 「jquery.cookie.js」を使ってのクッキー処理にて それらを制御するサンプルを作ってみたので、 メモ書き程度に紹介してみます。 今回のサンプルでは、 初回アクセス時のみページ上に「初回アクセスです。」の メッセージテキストを表示するサンプルです。 jQuery Cookie First Access Control まずは動作サンプルから。 下記のリンクをクリックして表示されるページは、 初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。 ※リロードしてアクセスが2回目以降となるとテキストは非表示になります。 ≫jQuery Cookie First A
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
JavaScriptでアニメーションを実現
JavaScriptでパラパラアニメを作るには、下記のコードを<body>内のアニメしたい場所に設置する。 iPhoneなど、Flash未対応のガジェットでアニメーションを実現できる。 作例 <img name="anim" src="01.png" />
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
本をめくるように画像をみせるjQueryプラグイン「FlipPage」
本をめくるように見せる方法は、以前はFlashを使ったり、複雑なJavaScriptでプログラムを組んだりと面倒でしたが、簡単にjQueryで表現できるようになりました。 div要素を本のページをめくるようにみせたい場合は、この「Flippage」を利用すると実現できます。 サンプルを作ってみました。 本をめくるようにみれるjQueryプラグイン「FlipPage」の使い方は、続きをご覧下さい。 「FlipPage」の設置方法 まずは、Flippage by marcbuilsのサイトから、Download.zipをダウンロードします。 ダウンロードしたzipファイルを解凍します。いろいろなファイルが入っていますが、実際に使うのは以下のファイルになります。 jquery.flippage.cssjquery.flippage.jsjquery.min.js（jQuery CDNを使うときは
クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」
TOP > plugin > クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 （Drop） そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas
FlexSlider
An awesome, fully responsive jQuery slider toolkit. Simple, semantic markup Supported in all major browsers Horizontal/vertical slide and fade animations Multiple slider support, Callback API, and more Hardware accelerated touch swipe support Custom navigation options Compatible with the latest version of jQuery Get started with FlexSlider in 3 easy steps! Step 1 – Link files Add these items to th
jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
Demo | jquery.vgrid.js
Demo list - Variable grid layout. demo001 - Simple Example demo002 - Basic Option Example demo003 - Any Height Grid Example demo004 - FadeIn Option Example demo005 - Sort Example demo006 - Dynamic Grid, Start/Finish Event Example demo007 - Dynamic Image Grid, Start/Finish Event Example demo008 - Multi Box Grid Example demo009 - Grid Element Show/Hide Example demo010 - Drag And Drop Sort Example
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
株式会社コンテンツ Contents Co.,Ltd.
株式会社コンテンツでは、 課題解決型の制作プロダクションとして、 創業以来たくさんのモノづくりをしてきました。 培ったクリエイティブと技術の力で、 新しい価値を生み出し社会をより良くするために、 さまざまなサービスやプロダクトを立ち上げています。 詳しく見る
グーグル製のJavaScript MVCフレームワーク「AngularJS」、正式版が公開 − Publickey
グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル（Model）の部分とユーザーインターフェイスの部分（View）、そしてビューとモデルのあいだで制御する部分（Controller）に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nelson Mandela’s Extraordinary Life: An Interactive Timeline | TIME.com
iDangero.us
Welcome to nginx!
Loading...
