skrollrでパララックスのランディングページを作ってみよう〜追記あり〜 – Freyja's Ramblings
2022.1.16 更新 皆さまこんにちは。 本日はskrollr再び！skrollrを使ってペラいちのランディングページを作ってみます。 まずはこちらにDEMOを作ってみましたのでご覧ください。 （※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m ) skrollrってなに？ パララックス（視差）効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。 skrollrをダウンロード skrollrの基本的な使い方は前回の記事をどうぞ。 ⚫︎パララックスが簡単に実装出来る！skrollrの使い方 ⚫︎skrollrを使ってシングルページのパララックスサイトを作ってみました スクロールで画像にパースペクティブ感を出す 今回は大きく分けてセクシ
パララックスが簡単に実装出来る！skrollrの使い方
2022.1.16 更新 皆さまこんにちは。 本日はパララックス(視差効果)が簡単に実装出来るskrollrというライブラリをを使ってみましたので、ご紹介しようと思います。 デモを作ってみましたので、こちらをご覧下さい。 skrollr.jsをダウンロードし、htmlファイルに読み込む まずGitHubからskrollr.jsをダウンロードします。 html側にはskrollr.min.jsファイルとjqueryを読み込ませます。 下のコードをhtmlのどこかにペースト、以上です。簡単ですね！ <script src="js/skrollr.min.js"></script> <script> var s = skrollr.init(); </script> デモではほぼ全てのdivにdata属性をつけて動かしています。 ポイントは、 data-○○=”ここに普通にcssを書く”色はrg
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
【jQuery入門】hide()でHTML要素を非表示・表示(show / toggle)する方法！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、jQueryで特定のHTML要素を簡単に非表示にすることができる「hide()」メソッドについて学習していきましょう！ この記事では、 ・「hide()」とは？ ・「hide()」の使い方 という基本的な内容から、 ・「hide()」のアニメーション ・表示・非表示の活用 などの応用的な使い方に関しても解説していきます。 この記事で、「hide()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！ 「hide()」とは？ それでは、まず最初に「hide()」メソッドについての基本的な知識を学習しましょう！ 「hide()」は、特定のHTML要素を非表示にすることが可能です。 また、単純に非表示にするだけでなくアニメーション効果を付与してゆっくり消えていくような演出も簡単に実現できるのが特徴です。 対象となるHTML要素は、テキスト・
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow