指定時間経過後に処理を実行させたい場合は、setTimeout関数を使用します。 setTimeoutの処理を停止（中断）する場合は、clearInterval関数を使用します。 setTimeoutは1回のみ実行されます。 なお、再帰的にsetTimeoutを使用している場合、指定している関数の処理が完了するまでタイマーは開始されません。 構文
指定時間経過後に処理を実行 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
指定時間経過後に処理を実行させたい場合は、setTimeout関数を使用します。 setTimeoutの処理を停止（中断）する場合は、clearInterval関数を使用します。 setTimeoutは1回のみ実行されます。 なお、再帰的にsetTimeoutを使用している場合、指定している関数の処理が完了するまでタイマーは開始されません。 構文
PC版もちゃんと素敵！スマホ幅の見せ方を工夫したWebサイトデザイン事例12選 | デザインメモ 2.0
スマホに特化したLP（ランディングページ）って、デスクトップ幅でみると違和感のある見た目になっていることがありませんか？または、そういうデザインを作ったというデザイナー読者さんもいるかもしれません。 私自身も、ターゲットユーザーがスマホ閲覧多い&制作スピードが求められる場合、デスクトップ幅の対応はそんなにやらないこともありますが…わかってはいてもモヤッとするものです。 そんな折、ここ最近 スマホ幅にしっかり特化しているけど、デスクトップ幅でも綺麗にみせる工夫を凝らしたWebサイトデザインをちらほら目にするようになったので、改めて探してまとめてみました！ 【update】 2022/10/20 事例を3つ追加しました 2022/11/01 事例を2つ追加しました
CSSアニメーション例 上下左右に動く
アニメーションを適用する要素の基本プロパティ/値 前提として、CSSアニメーションを適用するクラスには、それぞれ次のプロパティ/値を設定しておきます。ラベンダー色の200x200のボックスです。アニメーションの開始状態によって少し値をいじりますが、都度解説します。 また、要素を動かすため（topプロパティやleftプロパティで操作するため）、positionプロパティをrelativeにしています（leftとtopの初期値として0を設定）。 CSS クラス名 { width: 200px; height: 200px; background-color: Lavender; position: relative; left: 0; top: 0; } CSS @keyframes moveToRight { 100% { left: 200px; } } .moveToRight { wi
画面遷移 | 動くWebデザインアイディア帳
書籍情報 紙面だからこそできるまとめ方でコードを説明し、 全体を俯瞰して調べることが出来る構成になっています。 もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。 購入をしてくださった方には特典がありますので是非チェックしてみてください！
setTimeoutはダサいぞ。JavaScript Promiseを使って処理を順番に実行しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？ 以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので
コピペで5分！右から出てくるおしゃれなハンバーガーメニューの作り方【レスポンシブ対応】
こんにちは、daimaです。 本日は私も業務でよく使っている おしゃれでコンパクトな ハンバーガーメニューのサンプルコードを コピペしてすぐに使える形でご紹介したいと思います。 最終更新2021/01/30 : ・ナビ部分の開閉の仕組みを調整(画像など張り付けた時にずれて移動してしまっていたのを修正) ・ナビの中身のheightがナビのheightを超えた場合にスクロールが効くように修正 レスポンシブ対応のハンバーガーメニューをコピペで簡単に設置したい ハンバーガーボタンはスクロールしてもずっとついてきて欲しい ナビが開いているときにナビ以外の部分をクリックしたらナビを閉じてほしい ナビが出現するときは画面端からスムーズに出現してほしい 細かいデザインや動きは自分で調整したい 最新の主要ブラウザ(Chrome、EDGE(IE)、Firefox、safari)に対応していてほしい このような
CSSハンバーガーメニューをアニメーションでおしゃれに！【標準タイプ】｜デシノン
CSSで使えるハンバーガーメニュー【標準タイプ】をまとめてみました。 codepenから引用しています。 ハンバーガーメニュー【標準タイプ】 コピペで実装 今回は標準タイプのハンバーガーメニューを集めました 標準タイプですがおしゃれに活用してみませんか？ ぜひコピペで実装してみてください！ カラフルなメニュー出現！ 上から登場！カラフルなメニュー See the Pen Menu Animated Dropdown and Icon by Leena Lavanya (@leenalavanya) on CodePen. マインクラフトちっくな世界観 いくつもの四角がバラバラと出現！ See the Pen Assembling menu concept (canvas) by Alex Nozdriukhin (@alexnoz) on CodePen. 下からやってくる 画面下のライン
【まとめ】簡単にパララックスサイトが作れるjQueryプラグイン16選
だいぶイマサラ感はありますが、やっぱパララックスサイトはかっこ良いですしまだ需要もあるはずなので、簡単にイケてるパララックスサイトが作れるjQueryプラグインのまとめをさせてください。 イマサラですがまとめておきたいのです。 では早速いきます。 プログラミングやWordPressを習得するのに一番近道な方法とは？ おすすめパララックスjQueryプラグイン18選 ① Nikebetterworld Parallax Effect サイトURL http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ デモページ http://ianlunn.co.uk/plugins/jquery-parallax/ 使い方参考ページ parallax.jsをいじってパララックスのデモ作ってみた。 | キリンブログ ナイキのパララッ
サイトに彩りを！ちょっと変わったおもしろいプラグインのまとめ
今回はちょっと変わった、おもしろいプラグインをまとめました。 程度を守ればエフェクトがあるとサイトも華やかに見えますね。 要素が揺れるアニメーションを実現！『CSShake』 DEMO GitHub このプラグインを使用するとホバー等をした時に要素が揺れるアニメーションを付けることができます。 あまり揺れさせすぎると怖い感じになってしまうので注意してください…。 おもしろ系のサイトなんかではバンバン使えそうですね。 ホバー時に他の要素をぼかす『Item Blur Effect with CSS3 & jQuery』 DEMO Download 要素をホバーしたときにその要素以外の物を全てぼかし、フォーカスを当てたような感じを表現してくれます。 ホバーした要素の文章を読ませたい、なんて時に使えそうですね。 テキストにフラットアイコンのようなシャドウをつけてくれる『flat-shadow』
トップページがド派手に動くWEBサイトまとめ≪10選≫
WEBデザインで表現できることは日進月歩でどんどん増えていき、これを加速させている理由がJavaScriptという言語であることは皆さん周知のことかと思います。 そんなJavaScriptを使用している魅力的なサイトをご紹介いたします。 2,100社以上のWeb制作実績！ BtoB企業で成果を出すWeb制作プラン公開中！ Webサイトを制作するだけではなく、戦略・施策立案、Web制作、SEO、MAを活用したリードナーチャリング、コンテンツマーケティングなど、Webマーケティングの川上から川下まで、一気通貫で支援が可能です。少しでもWebリニューアル、ホームページ制作に興味がある方はお気軽に詳細をみていってください！ 詳細を見てみる 動きのあるサイトとは 動きを加えたサイトにすることによるメリットを考えてみました。 メリット ・魅力的なサイトになる 動きの無いサイトに比べて、視覚的効果がある
Three.jsのOrbitControlsで手軽にカメラを制御する - ICS MEDIA
Three.jsにはカメラの動きを自動的に制御する OrbitControls クラスが存在します。 次の用途で役立つ機能です。 周回軌道を描くように、カメラを配置する ポインター操作でカメラの配置やアングルを変更する 導入方法 OrbitControls.jsは、Three.jsライブラリの本体に含まれていないので注意が必要です。CDNで利用するときは、以下のimportmapを記載して、three/addons/というエイリアスを貼ります。 <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.152.2/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/" } }
lazylinepainterをつかって簡単SVGアニメーション
BLOG SVGアニメーションといえばCSSのみでもいけますよね？ 例えばこんな感じで( -`д-´)ｷﾘｯ <style> #cloud { stroke: salmon; stroke-dasharray: 2000; stroke-dashoffset: 2000; stroke-width: 2; -webkit-animation: cloud_line 10s linear 0s infinite; animation: cloud_line 10s linear 0s infinite; } @keyframes cloud_line { 0% { stroke-dashoffset: 2000; } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes cloud_line { 0% { stroke-dashoffset:
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
ScrambleTextPlugin
Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text (or the original text) over the course of the tween (left to right). Visually it looks like a computer decoding a string of text. Great for rollovers. See
jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」
twitter facebook hatena google pocket 画像の見せ方にはいろいろあります。 Image splitting effect with CSS and JQueryでは、マウスオーバーすると画像が中央から左右に分かれて開くようなチュートリアルを紹介しています。 自動ドアが開くように表示することでユーザーに驚きを与えられるかもしれません。 sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> まずjqueryを読み込んだら以下のような記述をします。 <div class="box_container"> <div class="images_holder"> <div class="image_div l
【斜め背景】CSS＋jQueryでペンキを塗るようなアニメーションを簡単実装！ | スタッフブログ | 株式会社クーネルワーク
こんにちは、keishibukiでございます。 最近「斜め背景をガーッとペンキを塗るような感じでアニメーションさせて！」 という依頼がありました。 それってjavascriptとかゴリゴリに書かないと実装出来ないのでは？と思っていたのですが、思いの外CSSとjQueryの簡単な記述だけで作れました。 かなり簡単なので是非お試しあれ！ まずは斜め背景を作ってみよう！下記のような形になります。 HTML<div id="main"> <div class="layer-01"></div> <div class="layer-02"></div> <div class="content-width"> <div class="container"> <h1>コンテンツ</h1> <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。こ
簡単な Three.js のサンプルを試そう - ICS MEDIA
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。 サンプルを再生する サンプルのソースコードを確認する まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。 <html> <head> <meta charset="utf-8" /> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js" } } </script> <script t
うぇぶもよう
スマホサイトに最適なスワイプに対応したライトボックス「swipebox.js」 2016年1月15日 2017年12月12日 jsWeb制作レスポンシブ備忘録 案件でスマホでも使いやすい画像を拡大表示してくれるライトボックスを探していたところ 辿り着いたのが「swipe.js」。 ちなみに画像以外にも、YoutubeもOKみたいです。 これ、スマホで見たときに使いやすいので今後使う機会が増えそうです。 使い方やカスタマイズ方法を忘れないうちにメモ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトで3D表現のコンテンツを作成する
【20％OFF】「タカ書体」最新作もパッケージ版ならお得に!! - デザインポケット
