WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

jQuery

横ナビゲーションをfixed 横スクロールした時はfixedさせない

横スクロールした分ナビゲーションの位置をマイナスしてついてきていないように見せるデモ http://efu.sakura.ne.jp/web/sidemenu/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ナビゲーションをfixed 横スクロールした時はfixedさせない</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></link></meta></head></html>

CSS3の色指定 HSL

色をランダムで配置 http://efu.sakura.ne.jp/web/hsl/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>HSL</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #333; } </style> </link></meta></head></html>

丸メニュー

デモ http://efu.sakura.ne.jp/web/menu4/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>丸メニュー</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

文字を左からフェードで表示

デモ http://efu.sakura.ne.jp/web/fade/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>フェードアニメーション</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet"> </link></link></meta></head></html>

現在いるページのナビゲーションにクラスを追加

デモ http://efu.sakura.ne.jp/web/menu3/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーションのカレント</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

viewportの変更

デモ http://efu.sakura.ne.jp/web/viewport/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>iPadで見た場合viewportを変更</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></meta></head></html>

カルーセルスライダー

http://efu.sakura.ne.jp/web/carousel/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>カルーセルスライダー</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

YouTubeAPI サムネイルをクリックで動画を切り替える

デモ http://efu.sakura.ne.jp/web/youtubeapi/index2.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>YouTube API サムネイルクリックで動画切替え</title> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </link></meta></head></html>

jQueryでパラパラアニメーション

デモ http://efu.sakura.ne.jp/web/flip/画像1枚ずつ横に動かしてアニメーションさせる <html lang="ja"> <head> <meta charset="UTF-8"> <title>パラパラアニメーション</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

jQuery UI Datepicker

jqueryui.comjqueryui.comgithub.comデモ http://efu.sakura.ne.jp/web/datepicker/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Datepicker</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

jQuery UI Slider

公式サイト jqueryui.comデモ http://efu.sakura.ne.jp/web/slider/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Slider</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

グラーデーションをアニメーション

http://efu.sakura.ne.jp/web/grd/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>グラデーション</title> <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"><…</link></link></meta></head></html>

ドロワーメニュー

デモ http://efu.sakura.ne.jp/web/drawermenu/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドロワーメニュー</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </head> <body> </body></html>

スポットライト

http://efu.sakura.ne.jp/web/mask/以前書いた記事 mmmmofu.hatenablog.combackground-clip: textにした文字「●」をpaddingで動かしてスポットライト風にする。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>スポットライト</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

ページャー付きタブ切り替え

デモはこちら http://efu.sakura.ne.jp/web/paging/1ページ目2ページ目3ページ目 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページャー付きタブ切り替え</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </meta></head></html>

画像を保存させないようにする対策

右クリック禁止(PC) 全体(HTML) <body oncontextmenu="return false;"> 画像にのみ(jQuery) $(function(){ $("img").on("contextmenu",function(){ return false; }); }); 長押しアクションを禁止(スマホ) img{ -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; </body>…

スクロール中はページトップが非表示になる

http://efu.sakura.ne.jp/web/pagetop/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール中はページトップが非表示になる</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

遅れて付いてくるメニュー

http://efu.sakura.ne.jp/web/menu2/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>遅れて付いてくるメニュー</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </head> <body> </body></html>

Windowオブジェクト

windowオブジェクトはJavaScriptにあらかじめ用意されているオブジェクト。 全てのオブジェクトの親(グローバルオブジェクト)で windowの情報を取得したり操作や設定することができる。 windowの表記は省略することが可能http://efu.sakura.ne.jp/web/wind…

window.locationでURL情報を取得

デモ http://efu.sakura.ne.jp/web/location/?1481711331426#hash <html lang="ja"> <head> <meta charset="UTF-8"> <title>location</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> .text01 { font-size: 36px; text-align: center; } </style> <script> $(function…</meta></head></html>

ユーザーエージェントでスマホ用にviewportを切り替える

$(function(){ var contentWidth = 750; var iphone = navigator.userAgent.search(/iPhone/); var android = navigator.userAgent.search(/Android/); var ipad = navigator.userAgent.search(/iPad/); var ipod = navigator.userAgent.search(/iPod/); if(…

CSS3でメニューアイコンのアニメーション

デモ http://efu.sakura.ne.jp/web/menu/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>menu</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/script.js"></script> </head> <body> </body></html>

コンテンツを縦横斜めにスライドさせるjQuery faux-3D Viewport

デモはこちら http://efu.sakura.ne.jp/web/3d/jQueryとjQuery easingを読み込んでおく HTML <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery faux-3D Viewport</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </link></meta></head></html>

要素が下から上に表示されるアニメーション

下から上が上手くいかなかったのでメモ デモはこちら http://efu.sakura.ne.jp/web/btmtop/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>下から上に表示していくアニメーション</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </link></meta></head></html>

2列に並んだリストを押すと押したエリアの下がアコーディオンで開く

デモはこちら http://efu.sakura.ne.jp/web/accordion2/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <…</link></meta></head></html>

要素が順番にフェードインしながらスライドダウン

デモはこちら http://efu.sakura.ne.jp/web/fisd/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>SlideDown</title> <style> body { background: #FCFAF2; border-top: 10px solid #0C0C0C; margin: 0; } ul { width: 900px; height: 400px; margin: 50px auto 0; letter-spacing: -0.4em; font-size: …</meta></head></html>

cssText

「!important」を使用したい時など $(".rubiks_cube").css({'cssText': 'marginp:0 !important;padding:0 !important;' }); HTMLのstyle属性を上書きするので、 HTMLのstyle属性で指定したstyle、もしくはJSで変更したstyleが無効になる。 参考サイト www.we…

aタグをクリック時に一旦リンクを無効にしてアニメーションした後にページ遷移

<p><a href="./top/" target="_self">リンクボタン</a></p> $('a[target="_self"]').click(function(){ var url = $(this).attr('href'); $('.contents').delay(300).animate({'opacity':0},800,"easeInOutBack", function(){ location.href = url; }); return false; }); 一旦「return false」でaタグを…

jQuery Easing Plugin

jQueryのアニメーションのイージングは最初の状態だと「linear」と「swing」しか使えないが、 jQueryプラグインの「jQuery Easing Plugin」を使用すると、 様々なイージングを使用することができる。 デフォルトは「swing」サイトからファイルをダウンロード…

cookie.js

github.comcookie.jsはcookieを簡単に操作できるjQueryプラグインGitHubからダウンロードして読み込む cookieを保存する方法 $.cookie("KEY", "VALUE", { expires: 1 }); KEYにcookieの名前、VALUEに値を入力する。 {}の中には様々なオプションを設定するこ…