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でまとめてダウンロードできます。 購入をしてくださった方には特典がありますので是非チェックしてみてください！
【JS】ハンバーガーメニューの実装方法【CSS】サンプルコード付き BREEZE
今回は「JavaScript」と「CSS」を使ったハンバーガーメニューの実装方法を紹介していきたいと思います。 Webサイトにハンバーガーメニューを実装したいと考えている方、よかったら覗いて見てください。 2021/12追記：一部ソースコードを修正いたしました！ ハンバーガーメニューの実装今回は左上にあるハンバーガーメニューをタップすると、左側からナビメニュー が出てくる仕組みでコードを組みます。 サンプルを用意したのでそちらをご覧ください。 ハンバーガーメニュー：サンプル HTML、CSS、JavaScript、順に見ていきましょう。 HTMLHTMLはサクッと説明していきます。 ナビメニュー ハンバーガーメニューの中に表示される、ナビメニューの骨組みです。 後でJSでID名を取得したいので、navタグにはidでクラス名を与えるのを忘れないようにしてください。 よくあるナビの構成ですね！
備忘録 slickでslidesToshowの値を可変にする方法 | Maromaro Blog
こんにちは。Maromaroのtakaです。 slickでslideToshow（slickで画面に表示する枚数の設定）の値を可変にしたいと思ったことはありませんか？ 表示したい画像数を設定した時に、場合によっては指定した数より少ない枚数の画像しかない場合など、 あるかと思います。指定した枚数より少ない場合は画像の表示がおかしくなることが多々発生します。 そんな時にslickで可変に出来ると表示も崩れず、良い感じになります。 今回は備忘録として上記内容を記事にしました。 そもそもslickとは？webサイトのトップページなどに多くみられる、画像やコンテンツを左右に切り替える、 スライダー slider(カルーセル carouselとも）。 jQueryのプラグインとして色々なスライダーが提供されていますが、 中でも設定の簡単さとオプションの充実度からよく利用されているのが『slick』です
jQueryでスムーススクロールを実装する方法【初心者向け】現役エンジニアが解説
[PR] フロントエンドで副業する学習方法を動画で公開中 スムーススクロールの書き方 スムーススクロールの書き方について紹介していきます。 JavaScriptのコード $(function(){ $('a[href^="#"]').click(function(){ let speed = 500; let href= $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); 解説 1行目の、$(function(){では、jQueryの無名関数を
【jQuery】指定の要素数毎に自動で「続きを読む」ボタンを生成 | LIOT BLOG
使い所がかなり限られるコードですが、たとえば1ページ内に同じ要素をリストで大量に並べるときに、ユーザーに分割して見せたい場合などに使えそうなコードを共有します。 指定した要素の数ごとに少しずつ表示させます。自動で追加される「続きを読む」ボタンを押せば、分割した数ごとに順次表示されるようになります。 DEMO まず詳しい動きについては下記の動作デモページを用意しましたのでご確認ください。jQuery本体のバージョンは3.3.1を使用しているので、古いバージョンによっては動かない可能性もあります。 » 動作デモページはこちら 動作デモページではリスト要素を3件ずつ自動で分割するようになっています。このあとご紹介するコードをそれぞれ順番にコピーして、ご自分の環境に合わせて修正してみてください。（またはデモページのソースをそのままコピーしてください。） 設置方法jQuery本体の読み込みCDNで配
ユニークで面白いサイト・ホームページ18選を総まとめ【2023年最新版】企画のコツもご紹介します！ | Web幹事
Top > ホームページ制作発注ガイド > ホームページのデザイン参考例の記事一覧 > ユニークで面白いサイト・ホームページ18選を総まとめ【2023年最新版】企画のコツもご紹介します！ 「ホームページのリニューアルで、なんか面白いコンテンツ考えて。」 と上司から無茶振りされて困ったことはありませんか？ インターネット上には様々な「面白いコンテンツ」があふれています。しかし、多すぎて探すのも一苦労。トレンドの移り変わりも激しく、なかなかキャッチアップするのが難しい状況です。 そこで本記事では、ユニークで面白いホームページを総まとめ。2020年版としてご紹介します。 デザイン アニメーション 企画 など、シーン・目的別に分類してご紹介。 またユニークなコンテンツを企画するためのコツも伝授いたします。 ぜひ参考にしてください。 ※企画も一緒に考えてくれる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/" } }
slick サンプル集
slick.jsのデモページです。詳しい使い方はこちらの記事からどうぞ。 単体画像 複数表示（レスポンシブ） サムネイル付き センター寄せ両サイド表示（レスポンシブ） 画像遅延読み込み 詳しい使い方はこちら
jQueryでsetIntervalを使って特定の間隔でfunction処理を繰り返し行う（タイマー処理）方法｜BLACKFLAG
JavaScriptでのfunctionを一定の間隔で繰り返し処理を行う時の指定に使う「setInterval」。 jQueryでこの指定を使うこともでき、単純な記述ですが、さまざまなループ処理などにも使えるので参考までに使い方をメモ書きしておきます。 $(function(){ setInterval(function(){ ～ここに処理を記載～ },1000); }); 最後の数値部分は繰り返し処理を行う間隔になります。 例えば、3秒ごとに画像の位置を10pxずつ、ズラす場合は $(function(){ $('img').css({left:'0',position:'absolute'}); setInterval(function(){ $('img').stop().animate({left:'+=' + '10' + 'px'},1000); },3000); }); この
jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法｜BLACKFLAG
JavaScriptでfunctionの関数や様々な処理等を“何秒後”に実行、といった指定をする時に使う「setTimeout」。 jQueryでもこの指定を使うことが出来るのですが、必要な時に限って記述方法を忘れてしまっていることが多いので、ここにメモ書きしておきます。（ごく単純な記述なのですが…） $(function(){ setTimeout(function(){ ～ここに処理を記載～ },1000); }); 処理を記載する箇所の後ろにある数値は、“何秒後”に処理させるか、の値になります。 例えば、ページを読み込んだ後、3秒後にbodyをフェードインさせる場合。（フェードインするアニメーション時間は1秒） $(function(){ $("body").css({opacity:'0'}); setTimeout(function(){ $("body").stop().ani
単純だけど簡単な背景画像のパララックスを実現するjQueryのスクリプト | Web Mugen
スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。 とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。 Demo 必要なファイル jquery.js 対応ブラウザ Google Chrome Safari Firefox Internet Explorer7～ Opera ※Windowsのみの確認です。また、Internet Explorer以外は記事投稿時の最新版を対象にした確認です。 コーディング＆設定 HT
今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」 | ECサイト｜システム開発会社｜スターフィールド
タイトル通り、今まで見てきた中で、一番高機能なスライドショーかもしれません。 機能が豊富で、その設定もそこまで難しくないということで、 使いやすいプラグインです。 レスポンシブにも対応しており、 動画を組み込んだり、フルスクリーンにもできたりします。 簡単に特徴をあげると、 ・スライドアニメーションのエフェクトが豊富 ・スキン(カラー)が豊富にある ・サムネイル、ナビゲーション、ページング等の設定がいろんなパターンに対応 ・レスポンシブ対応 ・スライドのローダーが付いている ・キャプションが付けられる といったところでしょうか。 ローダーが付いているのは、今までにほとんど見たことなかったので、 けっこういいですね。 ただ、html5なので、ieはそこまで対応していないかもしれません。 （いけてie8くらいまでかな） デモを作成したので、ぜひ見てみてください。 DEMO
指定文字数以上入力させない方法 - JavaScript
指定文字数以上入力させないようにすることが出来ます。郵便番号や電話番号等、文字数の決まっているものについて役に立つでしょう。
Javascriptで数値の先頭のゼロを削除する方法と、数字の先頭にゼロつける方法
2012-10-07 643 1581 例えば「01」や「02」など、先頭にゼロがついている数値を「1」という数値に直す場合は、Number関数を使用します。 var str = "05"; var num = Number(str); //結果 num == 5 逆に決まった桁数で先頭にゼロをつけなければいけないケース（ゼロパディング）もよく出くわします。その場合は下記の方法がおそらく最短コード。 var num = 5; var str = ('0' + num).slice(-2); //結果 str == '05' slice関数を使うとスマートにゼロパディングができます。先頭にゼロをつけて、右から2桁だけ取得するという動作をしています。 ＜javascriptゼロパディングのユーザー定義関数＞ ゼロパディングはそこそこ使うことがあるので、関数化しておくと便利です。 //ゼロパディ
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Marquee jQuery Pluginを使って文字を流す
wow.jsとAnimate.cssでスクロール連動アニメーション
タブ2段組 - jsdo.it - Share JavaScript, HTML5 and CSS
http://infinityforest.net/home/archives/3055
