【Adobe XD】ホバーアニメーションの応用編~パララックス風の動きを再現してみよう~ 前回の記事では、Adobe XDの「ホバーステート機能」を使った画像のホバーアニメーションの作り方をご紹介しました。今回の記事では、・・・ View More
スクロールするのが楽しくなる【skrollr.js】を紹介します。 単調になりがちなシングルホームページに変化を! パララックス、スライドなど、スクロール時のエフェクトを効果的に入れることで、飽きのこないWEBページをつくりませんか? 今回はskrollr.jsのサンプルページから、すぐに使えそうなものをご紹介したいと思います。 導入が少し難しいので、HP作成に慣れてきてから試してくださいね! それでは、デモページをご覧ください。 デモページは、こちら ↓デモページのサンプルコードは以下となります。 ▼HTML <!--【デモ1】--> <div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:ro
TOPJavaScript パララックス用ライブラリ skrollr.js を使ってみた パララックス用ライブラリ skrollr.js を使ってみた 公開日:2015.11.20 更新日:2017.10.18 JavaScript, パララックス 有名パララックスサイト用ライブラリskrollr.jsを使ってみました。 IE7にも対応しており、(transformプロパティは未対応)実用的です。 今回作ってみたサンプルページ skrollr.js の使い方 CSSを読み込む <link href="src/skrollr.css" rel="stylesheet" type="text/css" /> JSを読み込む(下部) <script type="text/javascript" src="dist/skrollr.min.js"></script> <!--[if lt IE 9
それぞれのレイヤーごとのスクロール速度をずらことで、奥行きの感じられる動作を実装することができます。 今回は、jQueryを使って、背景画像の縦スクロールと横スクロールのパララックスを実装してみます。 ・縦の時間差スクロールサンプルページ ・横の時間差スクロールサンプルページ html <body> <head> <link href=style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="scroll.js"></script> </head> <div id="scroll_bg01"> <div id="scroll_bg02"> <div id="scroll_bg03"> </
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. かつて、ナビゲーションメニューは決まってページの一番上に表示されていました。その後、メニューが左か右のカラムに収まっていた時期がありました(中でも特に、左側がメニューのレイアウトが好まれていました)。そして、横からメニューがスライドして出てくる『ドロワーメニュー』の時代が訪れました。突如現れたこのメニューは、とても理にかなっていました。まるでパズルの最後のピースがようやく見つかったかのようです。 そしてこのドロワーメニ
<body> <a class="menu"> <span class="menu__line menu__line--top"></span> <span class="menu__line menu__line--center"></span> <span class="menu__line menu__line--bottom"></span> </a> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">Works</a></li> <li class="gnav__menu__item"><a href="">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く