ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
【2016年度版】学生に届け！キャッチコピーが心に響く、新卒／インターン採用サイト超まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
寒い。。寒いよ。。。毛布。。欲しいよ。。。そんな感じのディレクター、鮫島です。 気づけばもう完全なる冬ですね。冬のときは夏が恋しいのに、夏のときは冬が恋しくならないのってなんでですかね。 さて2013年の12月に「学生に届け！キャッチコピーが心に響く、2015年度新卒採用サイト超まとめ」という記事を公開したのですが、思いのほか反響が良く、「よし、毎年書こう」と神に誓った気がするので、今年も2016年度版として各企業の新卒採用サイト超まとめを頑張って書きたいと思います！ ちなみに、新卒エントリーが2015年3月から開始と、時期が大きく変動したので、【新卒採用】と銘打っているところもあれば、【インターン採用】と言葉を変え、学生に向けたメッセージを届けているみたいです。 なので、今回ご紹介するまとめには【新卒採用】と【インターン採用】が混ざっていること、予めご了承くださいm(__)m それではい
アコーディオンまとめ8選！ | 株式会社LIG
(……きこえますか……きこえますか) Σ(◉◒◉)ん？ (……どうもです……はやちです(:3_ヽ)_) ？？？(◉◒◉)三(◉◒◉)？？？ (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お 俺にか……？？ (以前「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ ほほう Flexible Slide-to-top Accordion （矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI
jarallax.jsの使い方解説
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 （注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。） jarallax.jsとは？ パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら： http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
