そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
タグ
- すべて
- jQuery (17)
- 2ch (38)
- 3d (76)
- Ansible (38)
- Bluetooth (20)
- CMS (25)
- China (66)
- CodeIgniter (16)
- CreativeCommons (21)
- DDD (28)
- DOM (21)
- DeNA (27)
- IoT (24)
- Jenkins (22)
- LINE (62)
- MIT (20)
- Moon Gift (15)
- OpenSource (125)
- SEO (245)
- Safari (37)
- SocialBiz (19)
- TypeScript (220)
- WebDesign (230)
- Yahoo! (49)
- ad (379)
- adblock (20)
- adobe (30)
- affiliate (46)
- agile (62)
- ai (327)
- ajax (114)
- algorithm (58)
- amazon (107)
- analysis (93)
- analytics (59)
- android (350)
- animal (28)
- animation (118)
- anime (105)
- apache (39)
- api (291)
- app (887)
- apple (122)
- ar (62)
- architecture (149)
- art (136)
- async (21)
- atom (27)
- auth (54)
- avatar (16)
- aws (357)
- backup (29)
- bash (35)
- basic (684)
- beacon (16)
- beta (67)
- bicycle (31)
- bio (18)
- bitcoin (41)
- biz (1029)
- blockchain (52)
- blog (189)
- book (255)
- bootstrap (15)
- bot (57)
- browser (218)
- button (16)
- buzz (42)
- cache (36)
- cafe (24)
- calendar (29)
- camera (20)
- canvas (24)
- car (23)
- cdn (57)
- centos (16)
- cgm (41)
- chart (47)
- chat (103)
- cheatsheet (36)
- child (39)
- chrome (169)
- ci (70)
- cli (40)
- cloud (171)
- code (290)
- collaboration (58)
- color (44)
- comic (210)
- command (52)
- commercial (42)
- communication (199)
- community (149)
- company (30)
- compare (48)
- config (57)
- container (86)
- converter (23)
- cookie (66)
- cooking (46)
- cookpad (29)
- copyright (58)
- coupon (20)
- covid-19 (37)
- crawler (26)
- crime (74)
- cron (18)
- css (500)
- css3 (95)
- csv (21)
- culture (110)
- customize (50)
- data (146)
- db (317)
- death (39)
- debug (48)
- deeplearning (37)
- demo (22)
- deno (26)
- deploy (39)
- design (448)
- desktop (18)
- dev (5966)
- devops (124)
- dns (49)
- docker (272)
- document (53)
- domain (32)
- donation (30)
- download (133)
- draw (19)
- dropbox (24)
- ebook (65)
- ec (183)
- ec2 (19)
- eclipse (19)
- economy (32)
- edit (36)
- editor (111)
- education (123)
- election (21)
- electron (18)
- element (30)
- english (144)
- error (21)
- es6 (17)
- event (41)
- evernote (17)
- excel (41)
- extension (135)
- face (18)
- facebook (197)
- family (20)
- fashion (39)
- feed (18)
- figure (20)
- file (60)
- finance (72)
- firebase (26)
- firefox (93)
- flash (74)
- flow (16)
- fluentd (18)
- flux (21)
- font (126)
- food (169)
- form (43)
- framework (217)
- free (402)
- freesoft (89)
- frontend (68)
- fuelphp (28)
- future (46)
- gadget (357)
- game (567)
- gcp (17)
- generator (57)
- git (99)
- github (96)
- gmail (19)
- golang (247)
- google (448)
- gourmet (39)
- gov (74)
- gps (68)
- graph (76)
- graphql (85)
- grid (18)
- grpc (27)
- gui (22)
- guide (44)
- guideline (71)
- hack (152)
- handson (74)
- hatena (25)
- health (163)
- heroku (17)
- history (194)
- html (186)
- html5 (152)
- http (23)
- icon (72)
- ide (31)
- idea (847)
- ie (50)
- illustrator (17)
- image (331)
- insect (16)
- install (70)
- interview (152)
- ios (470)
- ip (28)
- ipad (59)
- iphone (392)
- it (36)
- jQueryMobile (18)
- japan (144)
- japanese (117)
- java (133)
- javascript (1602)
- job (21)
- joke (62)
- jquery (249)
- json (59)
- kayac (15)
- keyboard (29)
- kubernetes (89)
- lambda (57)
- language (70)
- law (109)
- layout (76)
- learning (172)
- lib (115)
- library (288)
- life (427)
- lifehack (109)
- lifehacks (35)
- links (22)
- lint (15)
- linux (212)
- list (61)
- literature (26)
- llm (68)
- local (16)
- log (60)
- logo (19)
- mac (429)
- machinelearning (31)
- mail (74)
- management (272)
- manual (32)
- map (125)
- markdown (61)
- marketing (480)
- mashup (32)
- matching (17)
- material (29)
- math (98)
- media (135)
- medical (50)
- mental (19)
- mercurial (39)
- method (188)
- microcredit (18)
- microservices (66)
- microsoft (71)
- mindmap (18)
- mixi (40)
- mobile (205)
- mockup (37)
- money (86)
- mongodb (24)
- monitoring (44)
- movie (107)
- music (161)
- mysql (179)
- nature (59)
- network (71)
- news (260)
- next.js (28)
- nft (27)
- nginx (36)
- nintendo (52)
- node.js (189)
- npm (51)
- npo (24)
- o2o (26)
- oculus (33)
- office (58)
- official (32)
- oop (26)
- os (33)
- osx (234)
- p2p (23)
- patent (17)
- pattern (61)
- payment (146)
- pc (33)
- pdf (110)
- performance (239)
- perl (18)
- person (23)
- photo (171)
- photoshop (42)
- php (458)
- plugin (77)
- politics (89)
- portal (34)
- postgresql (28)
- poverty (36)
- powerpoint (23)
- pr (34)
- presentation (102)
- privacy (134)
- programming (44)
- project (29)
- promotion (171)
- proxy (35)
- psychology (31)
- pwa (27)
- python (115)
- qa (26)
- rails (35)
- ranking (40)
- react (24)
- react.js (217)
- recipe (38)
- recruiting (35)
- redis (21)
- redmine (30)
- reference (45)
- report (143)
- research (36)
- responsive (46)
- review (150)
- robot (34)
- rss (33)
- ruby (110)
- rule (21)
- rust (62)
- sample (274)
- sass (17)
- science (210)
- scraping (21)
- scroll (46)
- scrum (15)
- sdk (28)
- search (233)
- security (735)
- selenium (20)
- sem (18)
- senior (43)
- server (402)
- serverless (36)
- share (180)
- shell (46)
- shibuya (19)
- shop (66)
- slack (40)
- smartphone (171)
- sns (155)
- social (199)
- society (42)
- software (45)
- sound (65)
- spam (34)
- sports (17)
- sql (84)
- ssh (44)
- ssl (39)
- startup (172)
- statistics (80)
- storage (50)
- story (44)
- study (56)
- svg (28)
- svn (22)
- table (20)
- tablet (16)
- task (43)
- tax (20)
- tdd (26)
- team (151)
- tech (203)
- telephone (16)
- template (112)
- terminal (50)
- test (380)
- tips (2447)
- todo (50)
- togetter (70)
- tokyo (107)
- tool (701)
- toy (43)
- tracking (16)
- travel (17)
- trend (217)
- trouble (266)
- tutorial (603)
- tv (28)
- twitter (270)
- ui (464)
- unity (32)
- ux (93)
- vagrant (31)
- validation (19)
- vector (42)
- venture (22)
- video (200)
- vim (33)
- vm (42)
- voice (21)
- vpn (15)
- vps (15)
- vr (116)
- vscode (32)
- vue.js (78)
- wasm (31)
- web (618)
- web2.0 (126)
- webpack (43)
- webservice (1499)
- webデザイン (157)
- web制作 (564)
- web開発 (17)
- wi-fi (25)
- wiki (50)
- windows (306)
- wish (90)
- word (31)
- wordpress (52)
- world (110)
- xss (23)
- youtube (46)
- あとで (18)
- これはすごい (45)
- はてな (15)
- まとめ (934)
- まとめサイト (24)
- アクセス解析 (28)
- アフィリエイト (23)
- オープンソース (59)
- ガジェット (52)
- ケータイ (47)
- ゲーム (20)
- セキュリティ (27)
- ソフトウェア (70)
- ダウンロード (20)
- テンプレート (22)
- デザイン (42)
- ドメイン (15)
- ニュース (29)
- ネタ (601)
- ブログ (55)
- プログラミング (46)
- ポータル (23)
- ライブラリ (44)
- 仕事 (43)
- 便利 (58)
- 共有 (24)
- 写真 (48)
- 動画 (54)
- 動画共有 (15)
- 動画配信 (16)
- 口コミ (26)
- 地図 (21)
- 広告 (36)
- 情報 (28)
- 新聞 (16)
- 本 (24)
- 検索 (87)
- 検索エンジン (28)
- 比較 (29)
- 無料 (20)
- 生活 (35)
- 画像 (89)
- 素材 (94)
- 統計 (24)
- 記事 (74)
- 調査 (30)
- 資料 (120)
- 開発 (100)
- 音楽 (29)
- 食 (17)
- dev (5966)
- tips (2447)
- javascript (1602)
- webservice (1499)
- biz (1029)
- まとめ (934)
- app (887)
- idea (847)
- security (735)
- tool (701)
css3とscrollに関するko-ya-maのブックマーク (1)
-
ko-ya-ma 2012/10/17
様々なタイプのパララックスエフェクトのサンプルを解説- html5
- css3
- jquery
- scroll
- tutorial
- basic
リンク -
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設定を変更しましたx