サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
●はてなブックマークって？
●アプリ・拡張の紹介
●ユーザー登録
●ログイン
●ログアウト
kathew
id:kathew
●
44,302
ブックマーク
●
-
お気に入り
●
-
お気に入られ
タグ
●すべて
●
.htaccess
(70)
●
2ch
(2908)
●
3D
(149)
●
3DS
(109)
●
AA(51)
●
AI(120)
●
AprilFool
(30)
●
BGM
(76)
●
CD(60)
●
CM(27)
●
CSS3
(178)
●
DB(480)
●
DNS
(35)
●
DQN
(39)
●
DVD
(36)
●
DragonQuest
(92)
●
EC(30)
●
FPS
(82)
●
FTP
(58)
●
FamilyComputer
(29)
●
FinalFantasy
(147)
●
FireEmblem
(66)
●
HDD
(46)
●
HTML
(311)
●
HTML5
(292)
●
Hyper-V
(29)
●
IE(126)
●
IME
(44)
●
IS01
(33)
●
IT(33)
●
KDDI
(28)
●
LINE
(47)
●
LTE
(27)
●
MIDI
(34)
●
MMO
(192)
●
MVNO
(33)
●
MikuMikuDance
(27)
●
MonsterHunter
(50)
●
MyList
(24)
●
MySQL
(608)
●
NAVER
(67)
●
NHK
(100)
●
PUBG
(34)
●
PhantasyStar
(22)
●
PlayStation
(138)
●
PlayStation3
(79)
●
RPG
(402)
●
RSS
(67)
●
RagnarokOnline
(33)
●
RaspberryPi
(29)
●
RogueLike
(84)
●
SNS
(117)
●
SONY
(39)
●
SRC
(65)
●
SSL
(100)
●
SmashBros.
(47)
●
SquareEnix
(24)
●
SuperRobotWars
(73)
●
TV(326)
●
UI(258)
●
VTuber
(80)
●
VisualStudio
(52)
●
WYSIWYG
(37)
●
WebDAV
(28)
●
action
(93)
●
adobe
(22)
●
ajax
(85)
●
amazon
(274)
●
android
(926)
●
animal
(272)
●
animation
(84)
●
anime
(970)
●
anonymous
(187)
●
apache
(144)
●
api
(133)
●
app
(1866)
●
apple
(88)
●
archive
(60)
●
arrange
(144)
●
array
(81)
●
art
(98)
●
atom
(96)
●
au(131)
●
auction
(41)
●
audio
(80)
●
auth
(93)
●
aws
(135)
●
backup
(70)
●
bat
(29)
●
battleroyale
(41)
●
bicycle
(31)
●
biology
(23)
●
blog
(293)
●
bms
(23)
●
book
(270)
●
bookmark
(287)
●
bookmarklet
(59)
●
bootstrap
(95)
●
browser
(270)
●
business
(450)
●
button
(27)
●
cache
(40)
●
cakePHP
(800)
●
calendar
(32)
●
camera
(55)
●
campaign
(110)
●
canvas
(36)
●
capture
(45)
●
car
(73)
●
card
(43)
●
cat
(116)
●
centos
(191)
●
cg(38)
●
character
(73)
●
china
(197)
●
chrome
(258)
●
cinema
(32)
●
client
(52)
●
cloud
(120)
●
code
(44)
●
coffeescript
(23)
●
color
(76)
●
comic
(759)
●
command
(158)
●
comment
(38)
●
communication
(119)
●
compose
(28)
●
composer
(51)
●
concrete5
(78)
●
cookie
(37)
●
cooking
(103)
●
copyright
(269)
●
crime
(540)
●
cron
(25)
●
css
(922)
●
csv
(33)
●
culdcept
(27)
●
culture
(65)
●
customize
(27)
●
data
(209)
●
database
(26)
●
date
(155)
●
debug
(101)
●
demo
(22)
●
design
(2118)
●
desktop
(60)
●
development
(3923)
●
diary
(235)
●
dictionary
(55)
●
diet
(22)
●
display
(37)
●
docker
(373)
●
docomo
(35)
●
document
(121)
●
dog
(34)
●
domain
(35)
●
dot
(22)
●
download
(91)
●
drama
(28)
●
drink
(31)
●
drive
(42)
●
driver
(26)
●
dynamodb
(29)
●
earthquake
(104)
●
ebook
(130)
●
eclipse
(46)
●
economics
(61)
●
editor
(183)
●
education
(304)
●
emulator
(42)
●
enchant.js
(23)
●
encode
(43)
●
engine
(40)
●
english
(33)
●
enquete
(36)
●
entertainment
(133)
●
error
(125)
●
event
(142)
●
evernote
(30)
●
excel
(205)
●
extension
(292)
●
facebook
(48)
●
fashion
(63)
●
file
(174)
●
firefox
(327)
●
flash
(122)
●
font
(411)
●
food
(808)
●
form
(295)
●
framework
(110)
●
gadget
(526)
●
game
(6238)
●
gender
(131)
●
generator
(142)
●
gimp
(29)
●
git
(255)
●
github
(47)
●
gmail
(52)
●
go(32)
●
goods
(77)
●
google
(729)
●
graph
(24)
●
graphic
(86)
●
greasemonkey
(70)
●
grid
(33)
●
gundam
(142)
●
hack
(33)
●
haiku
(25)
●
hardware
(151)
●
hatena
(802)
●
health
(204)
●
history
(133)
●
home
(27)
●
hosting
(34)
●
http
(66)
●
iOS
(209)
●
icon
(112)
●
ide
(80)
●
idea
(52)
●
illust
(258)
●
image
(557)
●
install
(24)
●
interior
(40)
●
internet
(122)
●
interview
(150)
●
ipad
(50)
●
iphone
(403)
●
itunes
(43)
●
japan
(57)
●
japanese
(67)
●
java
(84)
●
javascript
(1472)
●
jquery
(587)
●
json
(29)
●
kathew
(22)
●
keyboard
(86)
●
keyword
(43)
●
kindle
(55)
●
korea
(104)
●
language
(50)
●
laravel
(828)
●
launcher
(30)
●
law
(45)
●
layout
(52)
●
letsencrypt
(23)
●
library
(245)
●
license
(33)
●
life
(672)
●
lifehack
(174)
●
linux
(496)
●
live
(68)
●
local
(35)
●
log
(37)
●
logo
(26)
●
mabinogi
(139)
●
mad
(154)
●
magazine
(39)
●
mail
(291)
●
maintenance
(55)
●
management
(39)
●
map
(99)
●
mario
(32)
●
markdown
(55)
●
marketing
(51)
●
material
(644)
●
media
(172)
●
medical
(252)
●
medley
(29)
●
memory
(68)
●
mercurial
(48)
●
microsoft
(143)
●
migration
(26)
●
military
(57)
●
mixi
(25)
●
mobile
(1092)
●
mod
(26)
●
model
(28)
●
money
(80)
●
mouse
(52)
●
movie
(1883)
●
mp3
(57)
●
mugen
(32)
●
music
(1223)
●
name
(22)
●
nature
(42)
●
navigation
(56)
●
netbeans
(33)
●
network
(214)
●
news
(1392)
●
niconico
(1493)
●
nintendo
(320)
●
nintendoDS
(74)
●
node.js
(59)
●
novel
(81)
●
nuclear
(32)
●
office
(47)
●
official
(110)
●
online
(337)
●
oracle
(57)
●
oredoco
(39)
●
os(93)
●
p2p
(38)
●
package
(39)
●
paint
(23)
●
password
(29)
●
pattern
(22)
●
payment
(50)
●
pc(340)
●
pdf
(114)
●
performance
(179)
●
perl
(41)
●
pet
(30)
●
phone
(23)
●
photo
(501)
●
photoshop
(57)
●
php
(1617)
●
pixiv
(41)
●
play
(121)
●
player
(25)
●
plugin
(336)
●
pokemon
(195)
●
politics
(638)
●
postfix
(32)
●
print
(39)
●
privacy
(37)
●
programming
(571)
●
promotion
(41)
●
proxy
(24)
●
psp
(129)
●
question
(184)
●
railway
(62)
●
ranking
(64)
●
react
(96)
●
reader
(29)
●
recipe
(277)
●
recruit
(58)
●
redmine
(68)
●
reference
(1574)
●
regexp
(56)
●
release
(78)
●
remote
(84)
●
responsive
(73)
●
review
(168)
●
robot
(67)
●
ruby
(37)
●
sale
(69)
●
samba
(29)
●
sass
(28)
●
science
(152)
●
scroll
(29)
●
search
(164)
●
season
(47)
●
security
(592)
●
sega
(38)
●
seo
(66)
●
server
(343)
●
service
(1147)
●
session
(47)
●
setting
(47)
●
share
(39)
●
shell
(37)
●
shop
(23)
●
shopping
(134)
●
shortcut
(34)
●
simulation
(25)
●
skyrim
(26)
●
slide
(47)
●
social
(65)
●
society
(737)
●
softbank
(34)
●
sound
(84)
●
space
(30)
●
spam
(52)
●
sports
(163)
●
sql
(181)
●
ssh
(73)
●
star
(35)
●
steam
(117)
●
storage
(107)
●
string
(26)
●
study
(137)
●
svg
(40)
●
sweets
(70)
●
switch
(163)
●
sync
(23)
●
table
(44)
●
tablet
(42)
●
tales
(23)
●
technology
(135)
●
template
(54)
●
test
(88)
●
text
(70)
●
texture
(26)
●
theme
(81)
●
thinking
(33)
●
thunderbird
(24)
●
tips
(3051)
●
titanium
(33)
●
tkool
(154)
●
togetter
(259)
●
travel
(63)
●
trouble
(1029)
●
tumblr
(24)
●
tutorial
(136)
●
twitpic
(39)
●
twitter
(1002)
●
ubuntu
(81)
●
unity
(68)
●
update
(78)
●
upload
(60)
●
usb
(47)
●
user
(23)
●
utility
(370)
●
ux(23)
●
vagrant
(40)
●
validate
(65)
●
viewer
(31)
●
virtualization
(48)
●
vista
(30)
●
vita
(47)
●
vocaloid
(212)
●
voice
(49)
●
voiceActor
(23)
●
vr(62)
●
vue
(241)
●
vuetify
(33)
●
wallpaper
(64)
●
web
(5334)
●
wifi
(50)
●
wii
(96)
●
wiki
(138)
●
wikipedia
(109)
●
wimax
(28)
●
windows
(1002)
●
windows10
(57)
●
word
(31)
●
wordpress
(273)
●
work
(172)
●
working
(88)
●
world
(59)
●
xbox360
(59)
●
xp(35)
●
yahoo!
(93)
●
youtube
(263)
●
あとで読む
(337)
●
いじめ
(32)
●
けものフレンズ
(30)
●
これはすごい
(616)
●
これはひどい
(1211)
●
まとめ
(1313)
●
まどか☆マギカ
(113)
●
ゆっくり
(31)
●
コミケ
(27)
●
ツクール
(33)
●
ネタ
(3890)
●
フジテレビ
(26)
●
事故
(178)
●
初音ミク
(89)
●
同人
(148)
●
増田
(37)
●
大阪
(28)
●
将棋
(39)
●
手書き
(45)
●
東方
(652)
●
楽天
(44)
●
歌ってみた
(45)
●
演奏してみた
(60)
●
災害
(132)
●
育児
(52)
●
自殺
(29)
●
艦これ
(26)
●
虚構新聞
(24)
●
訃報
(32)
●
読み物
(32)
●
銀河英雄伝説
(29)
●
電子書籍
(70)
●
風来のシレン
(26)
●
game
(6238)
●
web
(5334)
●
development
(3923)
●
ネタ
(3890)
●
tips
(3051)
●
2ch
(2908)
●
design
(2118)
●
movie
(1883)
●
app
(1866)
●
php
(1617)
関連タグで絞り込む (6)
●
design
●
gallery
●
javascript
●
library
●
photo
●
web
タグの絞り込みを解除
imageとslideに関するkathewのブックマーク (4)
●
34 users
●
coliss.com
●テクノロジー
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessible Before-After Slider Beer Slider -GitHub Beer Sliderの特徴 Beer Sliderのデモ Beer Sliderの使い方 Beer Sliderの特徴 Beer Sliderは2枚の画像を使用して、ビフォーとアフターを表示できるスライダーです。 単体で動作するシンプルなスクリプト vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。 jQuery, Zeptoに
kathew
2018/09/19
●javascript
●web
●design
●slide
●library
●image
●photo
●
3 users
●
design-develop.net
●テクノロジー
WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー﹁Beer Slider﹂です。 上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。 詳しくは以下 ソースは比較的シンプルで、普段からWEB制作をしたことがある方であれば、問題なく実装できるレベルだと思います。実際のデモやコードのサンプルは﹁Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized﹂からご覧いただけます。 ソース自体は﹁GitHub – pehaa/beerslider: A vanilla JS
kathew
2018/09/19
●web
●design
●javascript
●library
●slide
●image
●photo
●
40 users
●
coliss.com
●暮らし
Flashのように美しいフェードで画像を次々に表示するスライドショーのスクリプトをlab111から紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="myBlackcubeSlideShow"> <li><img src="photo1.jpg" alt="Foto 1" /></li> <li><img src="photo2.jpg" alt="Foto 2" /></li> <li><img src="photo3.jpg" alt="Foto 3" /></li> </ul> </textarea>
kathew
2010/01/19
●slide
●image
●javascript
●gallery
●web
●design
●
135 users
●
coliss.com
●暮らし
余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。 Simplest jQuery Slideshow demoこのスクリプトを作成したきっかけは、知人からの依頼だそうです。 当サイトでも多数紹介しているjQueryのプラグインで同様の動作をするものがありますが、多機能すぎるためクロスフェードするだけのシンプルで軽量のものを作成することにしたそうです。 そこで、コードの目標を20行以下で挑んだところ、作成してみると、下記のように大幅に短いものになってしまったとのことです。 ※動作には別途jquery.jsが必要です。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> $(function(){ $('.fadein img:
kathew
2009/12/15
●web
●design
●slide
●image
1
お知らせ
ランキング
今週のはてなブックマーク数ランキング︵2024年7月第3週︶
ランキング
今週のはてなブックマーク数ランキング︵2024年7月第2週︶
お知らせ
はてなブックマーク透明性レポート︵2024年2月-2024年4月︶
もっと読む
公式Twitter
●@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
●@hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●公式アカウント
●ホットエントリー
●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しましたx
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider
スワイプでBefore/Afterを表現するスライダー﹁Beer Slider﹂
[JS]画像をフェードで切り替えるスライドショーのスクリプト -blackbox | コリス
[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow