We call it Wavie.js An awesome javascript library for creating background waves. Github Download
Wavie.JS
We call it Wavie.js An awesome javascript library for creating background waves. Github Download
クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」
Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。 全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。 詳しくは以下 定番のマウスに対して吸い付くように動く派手過ぎず比較的取り入れやすいアニメーションから、アイコンが回転したり跳ねたりするような立体的なアニメーションまで様々な種類のエフェクトが実現可能です。マウスオーバーアニメーションは、分かりやすく影響度合いも大きいため、Webデザインにアクセントを与えたいという方にはおすすめの表現だと思います。 アニメーションの反映は比較的シンプルでClassを利用して簡単に実装
早稲田キャンパスを1分の水彩画風アニメーションで案内 “WASEDAnce Animated Campus Tour”
『踊る！早稲田大学1分キャンパスツアー ～WASEDAnce Animated Campus Tour～』動画公開 水彩画風ロトスコープアニメーションによる早稲田大学キャンパスツアー動画が完成しました。大隈記念講堂をはじめ、演劇博物館、會津八一記念博物館など、早稲田キャンパスの象徴的なスポットをポップなイラストで紹介します。制作者シシヤマザキさんの独特で柔らかなアニメーションにより、キャンパスを訪れたことがある方にもない方にも、ワセダに親しんでいただける楽しい動画です。 制作者・シシヤマザキさんのコメント 実際にキャンパス内のいろいろな場所で踊り、その映像をもとにアニメーションを制作しました。撮影時は、素晴らしい文化財の集合体である早稲田キャンパスと、セーラー服のもつ偉大なる力が相まって、勇気がみなぎりました！ ここでキャンパスライフが送れたら……という胸のときめきを大切にしたい、という思
レトロからモダンまで。ゲーム愛に溢れたカンファレンスオープニング
レトロからモダンまで。ゲーム愛に溢れたカンファレンスオープニング2016.04.20 10:06 scheme_a 元ネタ、いくつ分かるかな？ デザインやテクノロジー、ウェブに関する様々なイベントを企画し、北米や日本、オランダ、韓国など世界各国で開催している、FITC。 今年で15年目となるFITCは数々のイベントを手がけてきましたが、中でも発祥の地である、カナダ・トロントでのイベントは盛大です。4月17日から19日まで行われた今年のFITC Torontoも盛況のうちに終了しましたが、その後オンラインで公開された、カンファレンスのオープニングが非常に話題になっています。 本年度のカンファレンスのテーマは｢Time to Level Up（レベルアップの時）｣です。テーマを体現するオープニングは、過去から現在までの様々なテレビゲームのオマージュのオンパレード。最初期のゲームであるポンに始ま
【GDC 2016】岩田聡氏に贈るトリビュート映像がGDCAで披露―会場は大きな拍手に包まれる | Game*Spark - 国内・海外ゲーム情報サイト
『The Witcher 3: Wild Hunt』がGame of the Yearに輝いた第16回「Game Developers Choice Awards（GDC Awards）」。本イベントにて2015年7月に亡くなった任天堂の岩田聡氏に贈るトリビュート映像が公開されました。 映像は岩田氏の軌跡を辿る3分ほどのアニメーション映像。最後に記されたGDC2005での岩田氏の言葉「……in my heart,I am a gamer.（私の心はゲーマーです）」が印象的です。本映像の披露後、会場は大きな拍手に包まれており、その時の様子はTwitchのライブ配信の録画で確認可能。該当場面は2時間44分25秒から始まるので、興味のある人はチェックしてみてはいかがでしょうか。 《水京》
How to Create an Interactive Animated SVG Drum Kit
A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery. Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your keyboard, and that can also be programmed to play by itself! We’ll be making use of GreenSock’s TweenMax animation library, jQuery and the <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
Popmotion: The animator's JavaScript toolbox
The animator’s JavaScript toolbox.PowerfulSupports keyframes, spring and inertia animations on numbers, colors, and complex strings.Low levelSimple, composable functions, portable to any JS environment. The library behind the library, it powers the animations in Framer Motion.StableWritten in TypeScript and enjoys over 95% test coverage.TinyThe animate function is less than 5kb, and every utility
[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop
アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="path/to/Wallop.min.js"></script> </body> アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。 <head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-animation.c
![[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop](https://cdn-ak-scissors.b.st-hatena.com/image/square/c55fb72cc692f14ab3307eef2042769543abed0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015090103.png)
Physics
left click to create a point right click to select a point select multiple points to connect them hold down "d" and move mouse to drag Introduction A few years ago I wrote a little website called chubmarine.com. It was a physics simulation type thing, much like the one that's on this page. It's no longer active, but I thought it would be interesting to write about anyway. While it was cool to get
HTMLコード内でアニメーションする超マニアックなJSライブラリ「Dom-Animator.js」
普通にWebサイトを閲覧する人は、HTMLコードを見る機会は少ないと思います。 しかし、今回ご紹介する「Dom-Animator.js」を使う場合、ブラウザのデベロッパーツールなどでHTMLコードを見ないと、何が起きたかまったく分からないという面白いライブラリです。 どんなことが出来るのか？まずは、「Dom-Animator.js」を使うとどんな事が出来るのかを見てみましょう！ 公式サイトへアクセスすると、ブラウザのデベロッパーツールを開くように明記されています。 （参考） Macは、「Command」+「Option」+「I」 Windowsは、「Control」+「Shift」+「I」 で、デベロッパーツールが開きます。 そこで、そのまま開いてみると、コード内にひときわ目立つ「アスキーアート」がアニメーションしているのが分かります！ 分かりやすいように、GIFにしてみました。 このよう
[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com
![[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9ead73de963a2e762fa0becb8a28dab2b49e44e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011904.png)
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
whirl – CSSだけで実装されたローディング表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。 そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirlです。 whirlの使い方 whirlには様々なデザインが用意されています。 whirlの良いところは画像ではなくCSSだけでアニメーションを表現しているという点です。わざわざ画像をアップロードする必要もないのでwhirlだけで素早くローディングアニメーションが実現できます。 使い方としてもクラスを追加したり、表示するだけで使えますので手軽です。 <div clas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Akashic Engine
CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
Dom-Animator.js
RINN Inc.
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
