タグ

JavaScriptとcssに関するperry-tipsのブックマーク (2)

  • ひびしんプログラミング【公式】 | ZERO to ONE Program Training

    副業はもちろん、転職や独立・起業、会社での昇進を考えたとき、「わからない」「知らない」では済ませられないプログラミングの基礎の基礎が1冊で学べます!未経験からスタートしたい人、IT超初心者だけど始めたい人、AIで無くなる仕事を見て不安になりたくない人へ、これからの未来のためにお役立て頂ければ幸いです。 まだお手元にお持ちでない方は、こちらから購入できます。 追加情報、よくある質問 書をよりスムーズに簡単に読みながら手を動かしてもらうために、追加情報を提供しています(2019/11/23更新)。「上手く行かないな?」というとき、まずはこちらのページをご覧ください。解決方法が掲載されているかもしれません。 追加情報やQ&Aはこちら> 完成版コード&素材 このたびは『文系でもプログラミング副業で月10万円稼ぐ!』をお買い上げいただきましてありがとうございます。書で解説しております完成版コード

  • マウスホバーで動き出す動画ページの作り方 (1/2)

    マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1:video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生(autoplay) / ループ(loop) / サムネイル画像(poster)を指定している。 ■ソースコード(HTML) <video autoplay loop poster="img/thumb.jpg

    マウスホバーで動き出す動画ページの作り方 (1/2)
    perry-tips
    perry-tips 2021/01/27
    “ あのサイトとはひと味違う!こだわりマウスオーバー20連発 マウスオーバーとマウスアウトで異なる動きを見せる、こだわりのマウスオーバーアニメーション。CSS3とjQueryを使って20個のバリエーションを作る。 ”
  • 1