フレームがクールにアニメーションするスライドショー実装デモ:phpspot開発日誌Animated SVG Frame Slideshow | Codrops フレームがクールにアニメーションするスライドショー実装デモ。 枠をSVGを使ったアニメーションで変形させつつ画像・テキストを次のスライドに送る斬新なスライドを実装できます 関連エントリ レスポンシブなスライドするパネル型の斬新なUIレイアウトデモ 円形を拡大しながらスライドを切り替えるスライダーサンプル
Multi-Layout Slideshow | Codrops
A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js. Today we’d like to share a simple decorative slideshow component with you. The idea behind this slideshow is to have an individual layout for each slide, accompanied by a distinct effect. The images of each slide is meant to have a decorative purpose which could be suitable for an article header
JQuery lightGallery Examples
HTML Structure Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery. <ul id="lightGallery"> <li data-src="img/img1.jpg"> <img src="img/thumb1.jpg" /> </li> <li data-src="img/img2.jpg"> <img src="img/thumb2.jpg" /> </li> ... </ul> Javascript <script type="text/javascript"> $(document).ready(function() { $("#li
Inspiration for Item Transitions | Codrops
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations. Today we’d like to share some item transition inspiration with you. We tried to keep the idea of the transition general, so we did three different use
jQueryで作る、サムネイルがカルーセルスライドするレスポンシブなイメージギャラリー
「Elastislide – A Responsive jQuery Carousel Plugin | Codrops」の応用版のような感じで、サムネイル部分がカルーセルスライドする、レスボンシブなイメージギャラリーのチュートリアルが公開されていましたので参考に「サンプル」を作ってみました。 レスポンシブな点と沢山の画像を見せるのにかっこいいなぁと思って使ってみましたが、「BorisMoore/jquery-tmpl」を使っていたりで、私には知識不足でよく分からず、コピペして使わせて頂いただけという感じです…。 チュートリアルページ：Responsive Image Gallery with Thumbnail Carousel | Codrops デモ：Responsive Image Gallery チュートリアルページよりデモのファイルもダウンロードできます。 作り方 画像はプレビ
Awkward Showcase – A jQuery Plugin | Awkward Group - Digital Production Agency
Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more. Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website. Download on BitBucketView Demo
レスポンシブWebデザインに対応したjQueryスライドショープラグイン
RefineSlide / Camera | a free jQuery s... / CarouFredSel他...全7件
jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】｜BLACKFLAG
今ではあちこちで見かけるようになった Webページでの背景全体の画像フルスクリーン表示。 単純に一枚の画像を表示するパターンや 複数画像を切り替えて背景でフルスクリーンスライドショーにしたり ランダムで表示する画像を切り替えたり などなど、魅せ方はさまざまですが、 これらをjQueryを使ってできるだけシンプルなスクリプトで 実装ができないか試してみたので紹介してみます。 今回は、単一画像／スライドショー／ランダム の全部で3パターン紹介しますが、 HTMLとCSSは全て同じ構成になりますので 先にこの２つのソース構成について。 まずはHTMLから。 ◆HTML <div id="container"> <div id="contents"> <div id="wrapper"> <h1>jQuery FullScreen BackGround IMG</h1> <p>ここはコンテンツエリ
画像が個別にアニメーションしながら切り替わるイメージグリッド実装デモ:phpspot開発日誌
Animated Responsive Image Grid | Codrops 画像が個別にアニメーションしながら切り替わるイメージグリッド実装デモ 次のように画像が並んでおり、ランダムに数個が別の画像にアニメーションしながら切り替わる感じがオシャレです。 会社概要ページとかでメンバーを並べる、というような用途に使うと面白いかも。 サンプルダウンロードで利用することも可能。 関連エントリ 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」
Fullscreen Slideshow with HTML5 Audio and jQuery | Codrops
In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city. In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in orde
Roundup of 30 jQuery Image Gallery/Slider Tutorials & Plugins
In the last few years jquery image sliders and jQuery image galleries become very popular in blogs and especially in portfolio sites and are also useful for any other type of site for displaying images and photos. Fortunately, adding a jQuery gallery does not have to be difficult, even if you don’t have much experience with JavaScript and jQuery. One of the easiest solution to attract your visitor
3分でフラッシュスライドショーを作成 - Flash Presentation Engine Ver 1.4.1
画像を3枚準備しましょう。 それぞれファイル名を001.jpg～003.jpgと変更します。 エキスパートモードでは任意の画像ファイル名を指定可能です。 ・各画像ファイル(001.jpg～003.jpg) ・定義ファイル(config.xml) ・HTMLファイル(misfpe.html) ・FPE本体(misfpe.swf) ・フラッシュプレイヤーチェック関数(flash_check.js) ・FPE制御関数(flash.js) 適当なフォルダを作成し画像ファイル、定義ファイル、HTMLファイル、FPE本体、JavaScirptファイル(flash.js,flash_check.js)を全て同一のフォルダに移動します。 JavaScriptファイル郡(flash.js,flash_check.js)は配布ファイル中の「jsフォルダ」に格納されています。 a.config.xmlとは co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tiny Circleslider: A lightweight cross browser circular carousel.
最近公開されたjQueryスライドショープラグインいろいろ
CSS3のみでクロスフェードするワイルドなスライドショー:phpspot開発日誌
http://solidstate.jp/ImageDisplay/slideshow/script_141.html