ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。 しかしWebブラウザ側でJavaScriptをオフにされるだけでJavaScriptベースのアニメーションは実現できなくなります。そこで参考にしたいのがSVG ANIMATIONSです。 SVG ANIMATIONSの使い方 SVG ANIMATIONSはCSSとSVGのみでアニメーションしています。JavaScriptも画像も使われていません。 複雑な幾何学模様系のアニメーションが多いです。 線が動く
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
Smoothslides - ケン・バーンズ効果を使ったカルーセル MOONGIFT
最近はWebサイトにカルーセルを載せて写真をスライド表示するのを多く見かけるようになりました。大抵右から左に写真が流れていくものが多いのですが、あまり多いと見飽きてしまいます。これではせっかくの写真が印象に残りません。 より写真を強調したカルーセルを考えるならばSmoothslidesを使ってみても面白そうです。 Smoothslidesの使い方 Smoothslidesを使うと写真が単に表示されるだけでなく、上下左右にゆっくりと動きます。写真がより印象深くなるのではないでしょうか。 これはケン・バーンズ効果と呼ばれ、静止画に動きと生命を与える手法として知られています。AppleのiPhoto、iMovieなどでも実装されているものになります。写真を楽しむ上で欠かせないテクニックと言えそうです。 SmoothslidesはJavaScript製、Creative Commonsのオープンソ
Smoothslides Demo
By Kevin Thornbloom A responsive jQuery slideshow with beautiful panning effects. 1) Include CSS in your website's header <link rel="stylesheet" href="css/smoothslides.theme.css"> 2) Add your images to a div with a class of smoothslides. Also give the div a unique ID to differentiate it from other Smoothslides on the page. You'll get better results with images that are the same size. 3) Add the ja
ウェブサイトの背景動画として使える短編動画を無料配布しているサイト「Coverr」 | ライフハッカー・ジャパン
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
![[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）](https://cdn-ak-scissors.b.st-hatena.com/image/square/bacd812f6000c78e30e028d375e68638a387b65a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090501-01.png)
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
Side Comments - Medium.com style commenting
SideComments.js A sweet-ass interface component to give your site Medium.com style comments. Download SideComments.js Version 0.0.3 Demo Below is an example of SideComments.js in action. Each section of text can be commented on. Go ahead and give it a try! SideComments.js In Action Each paragraph tag has the "commentable-section" class, making it a section which can be commented on after you've in
NoCode jQuery Slider : jQuery Slideshow : 2024 WOW!
An image slider is an image slider, and they're all roughly the same, correct? Not so quickly. What are the primary criteria for selecting any kind of web component? Compatibility, simplicity of setup, great performance, and an attractive design and feel. With our Slider we've tried to create the perfect html slider that covers all these needs and even more: Compatibility with the widest feasible
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles
Loading...
Ken Burns Zooming Effect Jquery Slider / Slideshow Script
Help Center - Slider Revolution