マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
作成：2016/11/7 更新：2016/11/07 Web制作 > 404ページやランディングページに今時のおしゃれなエフェクトを付与したい。今回はCSSのみで簡単に実装できる、背景を動かすエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 テキスト部分だけの背景を動かす ストライプなど繰り返しの要素を作るrepeating-linear-gradient関数（repeating-linear-gradient - CSS | MDN）を使い、グラデーションの繰り返しを作ります。さらにmix-blend-mode: screen;で、 要素を混合しています。 mix-blend-mode: screen; background-image: repeating-linear-gradient(-45deg, transparent, tran
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いつか使いたいアニメーションJS/CSSメモ - Qiita