『HELLSING』(ヘルシング)は、平野耕太による日本の漫画。少年画報社の青年向け漫画雑誌『ヤングキングアワーズ』に27号(1997年5月2日発売)から2008年11月号まで連載されていた。全10巻。主に20世紀末のイギリスを舞台とし、大英帝国の王立国教騎士団、通称「ヘルシング機関」と、これに所属するアーカード、セラス、インテグラの3人を主軸に、吸血鬼との戦いを描いたアクション漫画。2009年3月時点で累計発行部数は400万部を突破している[1]。 題名の「ヘルシング」はブラム・ストーカーの恐怖小説『吸血鬼ドラキュラ』の登場人物エイブラハム・ヴァン・ヘルシング教授に由来し、主人公の1人であるインテグラがヘルシング教授の子孫であるとされている。ただし、ヘルシング教授の名前の綴りは“Helsing”である。また、作者本人の過去の作品からの登場人物(名前、外見問わず)の流用が多く、ナチスの残党
『ペンギンズ・メモリー 幸福物語』(ペンギンズメモリーしあわせものがたり)は、1985年に公開された日本のアニメーション映画。1983年に放送されたサントリーCANビールのテレビCMにてイメージキャラクターとして登場したペンギン(パピプペンギンズ)が人気を博し、制作されたアメリカン・ニューシネマ風の劇場用アニメーション作品。 概要[編集] 元となったサントリーのテレビCMはペンギンのキャラクターが登場するアニメーションとなっており、静かなバーでスローテンポのジャズを唄う女性シンガーの姿を見て、1人でビールを飲んでいた客の男性が感極まって涙を流す。そして所ジョージの「泣かせる味じゃん」というナレーションで終わるというものであった。当初はこのペンギンが歌っていた曲の詳細が明かされず、歌手と楽曲名のクレジットも表示されていなかったため、誰が歌っている何と言う曲なのかという謎が広り、大きな話題とな
こんにちは。相変わらずドラクエ10三昧の日々を過ごしている橋本です。 さて、今日はHTML5でリッチなコンテンツを簡単に作成することができるJavascriptライブラリ「CreateJS」について、サンプルを交えつつ簡単に使い方を見ていきたいと思います。 そもそもCreateJSとは何かといいますと、以下の4つのライブラリ、ツール群をパッケージングしたものがCreateJSとなります。 EaselJS Canvasを簡単に扱うためのライブラリ TweenJS トゥイーンやアニメーションを扱うためのライブラリ SoundJS 音声データを扱うためのライブラリ PreloadJS 外部ファイルの読み込みを制御するためのライブラリ 今回はこの中でも、EaselJSとTweenJSの使い方についてサンプルコードを書きながら見て行きたいと思います。 SoundJSとPreloadJSについては、音
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
なお、複数のCSSプロパティを変化させることも可能です。通常のAの状態では幅100pxなのを、マウスオーバしたBの状態のときに幅200pxに広げるようにします。a:hoverのセレクタに「width:200px;」を加え、「transition-property: background」の後ろにカンマを打って、「width」を追加します。 /*ボタンに対して何もしていない状態(A)*/ a{ display:inline-block; color:#fff; width:100px; padding:10px; text-align:center; background:blue; text-decoration:none; /*アニメーション指定*/ transition-property: background, width; transition-duration:1s; trans
CSS3アニメーションの基本:脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(1)(1/3 ページ) エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。 しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ!」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。
http://d.hatena.ne.jp/gryphon/20130805/p2 からちょっと続く。 どれがオリジナルかもうわからんけど、とにかく横浜に「実物大パトレイバー」が登場し、それが写真を撮られまくり、投稿が相次いだ。それをまとめたものが多数ある。 http://togetter.com/li/543538 http://matome.naver.jp/odai/2137346739293738201 http://patlabor-nextgeneration.com/ おまけで http://togetter.com/li/190448 実写版公式サイトとされるもの。 http://patlabor-nextgeneration.com/ んで。 http://newskenm.blog.fc2.com/blog-entry-5482.html @Ito_Kazunori『パ
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
いやーもうそろそろ夏っすね。女子の浴衣にドキッとくる季節ですね。 彼女居ませんが。 さて、タイトル通りなんですが、CSSだけで忍者くんに手裏剣を投げさせてみました。意外に楽しかったので公開してみたいと思います。 この子に投げさせてみたよ 可愛いでしょ?(自分で言うな)夜な夜なレイヤーを重ね合わせこの子は生まれました。 まぁ、僕なんですが。 この記事を書く為に忍者セットを作成したんですが、意外にも手裏剣を作るのが大変でした。3レイヤーで出来てます。 レスポンシブ化しようとしましたがめんどくさくなって固定にしました。固定良いよ固定。 目次に戻る 実装方法 参考にしたサイト CSS アニメーション - CSS | MDN さて、実装方法ですがCSS3のアニメーションを利用して動かしています。 ロジック的には キーフレーム という CSS3アニメーション の機能を使い、左手やら手裏剣やらを個別にア
スプライトシートアニメーション マウスオーバーでスプライトシートアニメーション ※画像にマウスオーバーして下さい。 #sprite { cursor: pointer; background: url(/sample/2012/img/sprite.png) no-repeat left top; width: 240px; height: 110px } #sprite:hover { -webkit-animation: sprite-animation 2s steps(32) infinite } @-webkit-keyframes sprite-animation { 0% {background-position: 0px 0} 100% {background-position: -7680px 0} } マウスオーバーするとスプライトシートアニメーションが実行されますね。
jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite (clic
Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screenca
デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。 「show sprite」をチェックするとその仕組みがよくわかります。 「animation-duration」の数字を変更すると、アニメーションの速度が変わります。 デモページ:スプライトを表示 スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。 デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。 CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
動くぞ!きれいだぞ! ヘ(・_・ヘ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破! 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました!(わーい!) 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します! あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集! 説明不要! 気になったコードは是非のぞいてみてください!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く