[B! javascript][JavaScript][Javascript] [8ページ] k

cow2design.com

This domain may be for sale!

k_ume75 2015/05/18

リンク

ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験

スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。タイトルが（謎）な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery）でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの

k_ume75 2015/05/15

リンク

JavaScript 言語概要 - JavaScript | MDN

JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScript JavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数値と文字列日付と時刻の表現正規表現インデックス付きコレクションキー付きコレクションオブジェクトの利用クラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターリソース管理国際化JavaScript モジュール中級編Advanced JavaScript objectsAsynchronous JavaScriptClient-side web APIs言語概要JavaScr

k_ume75 2015/05/11

リンク

[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js

最近のWebページで人気があるのは、ビジュアルの連続性。パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。モーダルウインドウとサイドバーのデモコマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data

k_ume75 2015/04/21

リンク

CODEPREP

CODEPREPはオンラインプログラミング学習サービスです。1日10分プログラムを書くことで「毎日こつこつプログラムを書く習慣」と「作ったものを動かす体験」を提供し、プログラミング学習の「継続」をサポートしていきます。そうして、一人でも多くのユーザにプログラミングの楽しさを感じてもらうことをサポートしてまいります。

k_ume75 2015/04/17

リンク

ブログの記事内画像を楽してRetinaディスプレイに対応させる方法

「Retina な Mac を買ったはいいけど、自分のWebサイトやブログの画像がぼやけて見えるのが気になる」という方は多いと思います。ロゴ画像であれば Illustrator から SVG 形式で書き出すだけで対応できますが、やっかいなのがブログ本文内の画像です。メインビジュアルの画像など限られたものであれば、たとえば「image.jpg」という画像の Retina 用として「image@2x.jpg」という縦横2倍の画像を用意することもできると思います。しかし、ブログ本文内の画像は数も多く、「image@2x.jpg」のようなファイル名の画像もいちいち用意していられないと思います。そこで、このブログでは jQuery 用の JavaScript を使ってなるべく手間のかからない対応をすることにしました。このブログでは、WordPress で記事を書くときに［メディアを追加］を

k_ume75 2015/04/13

リンク

[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js

スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定まずは、コアとなるフレームを作成します。この中に

k_ume75 2015/04/03

リンク

Vanilla JS

Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few: FacebookGoogleYouTubeYahoo Wikipedia Windows LiveTwitter AmazonLinkedInMSN eBayMicros

k_ume75 2015/03/27

リンク

JavaScriptでURL書き換えを便利にするユーティリティライブラリ「url.js」:phpspot開発日誌

url.js JavaScriptでURL書き換えを便利にするユーティリティライブラリ「url.js」特定のパラメータを追加・更新・削除したり、URLの組み立て等、他の言語でも欲しいぐらい便利なライブラリです追加・更新・削除も１つの関数を覚えてしまえば実現できるところが覚えやすくてよさそう関連エントリ JavaScriptベースのOAuth認証ライブラリ「hello.js」

k_ume75 2015/03/23

javascript

リンク

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモデモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjQu

k_ume75 2015/03/19

リンク

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。少しのコードで実装可能な 20 の jQuery 小技集目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな

k_ume75 2015/03/17

リンク

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex

k_ume75 2015/03/16

リンク

レスポンシブのサイトでスマホの時だけtelリンクを有効にする｜ Tips Note by TAM

PCサイトに電話番号を記載する場合は、テキストか画像で電話番号を表示し、スマホサイトなら、電話番号にtelリンクを貼って、スマホから直接電話をかけられるようにすると思います。 PC・スマホ・タブレットと、さまざまなデバイスにワンソースで対応しているレスポンシブのサイトの場合はどうでしょうか。ソースにあらかじめtelリンクを設定しておくと、PCで見た際に「プロトコルが不明」「開けません」というメッセージが返ってきてしまいます。（もともとtelリンクは、ガラケーやスマホ向けの機能なので、当然と言えば当然です） telリンクを設定しなければ問題ないのですが、そうすると、スマホで見たときに、電話番号をタップして電話をかけることができません。電話をかける機能があるのに直接電話できないのは、ちょっと不親切です。こういう時は、JS・jQueryを使って、スマホの時だけ電話番号にtelリ

k_ume75 2015/03/05

リンク

プログラミングのキホン、if文を使ってみよう！

前回の課題第3回では、変数とfunction（関数）を使ったJavaScriptを覚えました。変数は何かを入れて名前を付けておけるマッチ箱のようなもの、関数は入り口から何かを入れると、出口から処理した結果が出てくるようなイメージでしたね。まずは前回の課題の答えから見てみましょう。課題は、「足し算ができる関数」を使ったJavaScriptにチャレンジしてみてください。それができたら、変数や関数を使って、かけ算や割り算、入力された文字をつなげるなど、さまざまな関数を作って実験してください」ということでした。例えば、「足し算ができる関数」を使ったJavaScriptはこうなります。tasizanというのが足し算を行う関数です。 <html> <body> <script type="text/javascript"> function tasizan(a,b){ var c=Number(a

k_ume75 2015/03/04

javascript

リンク

変数とfunctionで、はてなボックス出現！

第2回「イベントで『右クリック禁止』を禁止してみよう」では、JavaScriptのイベントについて解説しました。自分で色々と試して、イベントについて広く理解を深めてもらえたら良いなと思います。さて、早速ですが前回の課題の答えから見ていきましょう。課題は、「<img>タグを使ってマウスが重なると画像が変わり、マウス画像から離れると元の画像に戻るJavaScript」でした。答えは以下のとおりです。

k_ume75 2015/03/04

javascript

リンク

初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ16選 -

Photo by dotConferences こんにちは。谷口です。プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス

k_ume75 2015/03/04

リンク

[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモデモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。デモページ：Demo 3 In: bounceIn, Out: bounceOut a

k_ume75 2015/03/04

IE10+/横からにゅっと出てくるのおもしろいな～

リンク

[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox

demo: video YouTubeの動画もさまざまなアニメーションで表示できます。 Stackboxの使い方 Step 1: 外部ファイル当スタイルシート・スクリプトとjqury.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../build/css/stackbox-docs.min.css"> </head> <body> ... <script type="text/javascript" src="//ajax.google apis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../build/js/stackbox-docs.min.js"></script> </body> Step 2: HTML まずは、モーダ

k_ume75 2015/03/04

リンク

Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ

作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。エンジニア速報は Twitter の@commteで配信しています。もくじインタラクティブ１．クリック時のエフェクト２．フォームクリック時のエフェクト３．テキストに１１種の動きを出すエフェクト４．分離するエフェクトフルスクリーンの見栄えをよくする５．フルスクリーン縦スライド３つ６．全画面+オーバーレイ７．フルスクリーン背景＋ローディング８．写真から背景色を抽出９．background-size 対策ドロワーメニュー１０．ドロワーメニュー３つスクロールエフェクト１１．スクロ

k_ume75 2015/03/02

リンク

【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③ | unitopi - ユニトピ -

こんにちは！ unitopi新米ライターの、ケインでございます。このシリーズも最終回。今回も、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得・追加（削除）」について、今回は「要素の追加と削除」のお話をさせていただきます！ちなみに今回は、説明の仕方がこれまでの２回と異なるアプローチになっているので、その点ご承知おきください！（※なぜなら紹介する量が多そうだからです…） ※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！ ※このシリーズのこれまでの記事は「その①」及びその②になります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！【JavaScriptの場合】 jQueryに比べると少ないですが、それなりに表現方法の数がありますので、どんなものがあるか、一覧を

k_ume75 2015/02/19

javascript

リンク

はてなブックマーク

タグ

関連タグで絞り込む (0)

javascriptとJavaScriptとJavascriptに関するk_ume75のブックマーク (830)

お知らせ

今週のはてなブックマーク数ランキング（2025年8月第2週）

今週のはてなブックマーク数ランキング（2025年8月第1週）

月間はてなブックマーク数ランキング（2025年7月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス