Skip to content

Commit 08446ac

Browse files
soranjirosoranjiro
authored
Merge pull request #109 from soranjiro/fix/pagespeedindex-update
page speed indexに基づく修正
2 parents 702f3ef + 93808a6 commit 08446ac

14 files changed

Lines changed: 140 additions & 426 deletions

‎apps/web/src/app.html‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,27 @@
4646
<style>
4747
body{margin:0;background:#f9fafb;color:#111827;font-family:system-ui,-apple-system,sans-serif}
4848
.home-page{min-height:100vh;background:linear-gradient(145deg,#84c6ff 0%,#a6b3ff 40%,#b5daf8 100%)}
49-
.home-page .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
50-
.home-page .hero-title{font-size:3rem;font-weight:900;color:#fff;margin:0}
49+
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem;position:relative}
50+
.hero-main{display:flex;flex-direction:column;align-items:center;max-width:1100px;width:100%;justify-content:center}
51+
.hero-content{color:#fff;max-width:420px;text-align:center;width:100%}
52+
.hero-title{font-size:3rem;font-weight:900;color:#fff;margin-bottom:auto;display:flex;align-items:center;justify-content:center;gap:.4rem}
5153
.hero-subtitle{font-size:1.2rem;opacity:.95;margin-right:.5rem;margin-bottom:.5rem;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.25);color:#fff}
54+
.rotating-text{display:inline-block;min-width:7em;text-align:center}
55+
.btn-primary{background:#fff;color:#3d5a99;font-size:1.05rem;font-weight:700;padding:1rem 2.25rem;border-radius:9999px;border:none;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.15)}
56+
.hero-cta{display:flex;flex-direction:column;gap:.75rem;align-items:center;margin:auto}
57+
@media(min-width:900px){.hero-main{flex-direction:row;justify-content:space-between}}
5258
</style>
5359
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"たびたび","description":"旅のしおりをサクッと作成・共有できる無料Webアプリ","url":"https://tabitabi.pages.dev","applicationCategory":"TravelApplication","operatingSystem":"Web","offers":{"@type":"Offer","price":"0","priceCurrency":"JPY"},"inLanguage":"ja"}</script>
54-
<script>
55-
window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
56-
if(typeof requestIdleCallback!=='undefined'){requestIdleCallback(function(){var s=document.createElement('script');s.src='https://www.googletagmanager.com/gtag/js?id=G-T80SMS1MXE';s.async=true;document.head.appendChild(s);gtag('js',new Date());gtag('config','G-T80SMS1MXE')})}else{setTimeout(function(){var s=document.createElement('script');s.src='https://www.googletagmanager.com/gtag/js?id=G-T80SMS1MXE';s.async=true;document.head.appendChild(s);gtag('js',new Date());gtag('config','G-T80SMS1MXE')},2000)}
57-
</script>
5860

5961
%sveltekit.head%
6062
</head>
61-
<body data-sveltekit-preload-data="hover">
63+
<body data-sveltekit-preload-data="tap">
64+
<script>
65+
window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
66+
function loadGA(){if(window._gaLoaded)return;window._gaLoaded=true;var s=document.createElement('script');s.src='https://www.googletagmanager.com/gtag/js?id=G-T80SMS1MXE';s.async=true;document.head.appendChild(s);gtag('js',new Date());gtag('config','G-T80SMS1MXE')}
67+
['scroll','click','touchstart'].forEach(function(e){document.addEventListener(e,loadGA,{once:true,passive:true})});
68+
setTimeout(loadGA,5000);
69+
</script>
6270
<div style="display: contents">%sveltekit.body%</div>
6371
</body>
6472
</html>

‎apps/web/src/routes/+page.svelte‎

Lines changed: 35 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,11 @@
3838
let heroIconRef = $state<HTMLButtonElement | null>(null);
3939
let isFlying = $derived(flyingAirplanes.length > 0);
4040
41-
let scrollY = $state(0);
4241
let featuresRef = $state<HTMLElement | null>(null);
4342
let createRef = $state<HTMLElement | null>(null);
4443
let featuresVisible = $state(false);
4544
let createVisible = $state(false);
46-
let pageReady = $state(false);
45+
let heroHidden = $state(false);
4746
4847
function spawnFlyingAirplane() {
4948
if (!heroIconRef || isFlying) return;
@@ -67,7 +66,6 @@
6766
6867
onMount(() => {
6968
resetDemoMode();
70-
pageReady = true;
7169
7270
recentItineraries = auth.getRecentItineraries();
7371
showRecent = true;
@@ -78,7 +76,7 @@
7876
7977
const handleScroll = () => {
8078
showScrollButton = window.scrollY > 300;
81-
scrollY = window.scrollY;
79+
heroHidden = window.scrollY > 400;
8280
};
8381
window.addEventListener("scroll", handleScroll, { passive: true });
8482
@@ -119,16 +117,13 @@
119117
auth.removeFromHistory(id);
120118
recentItineraries = auth.getRecentItineraries();
121119
}
122-
123-
let heroParallax = $derived(scrollY * 0.3);
124-
let heroOpacity = $derived(Math.max(0, 1 - scrollY / 600));
125120
</script>
126121

127122
<svelte:head>
128123
<title>たびたび - 旅のしおり作成アプリ</title>
129124
</svelte:head>
130125

131-
<div class="home-page" class:page-ready={pageReady}>
126+
<div class="home-page">
132127
{#each flyingAirplanes as id (id)}
133128
{@const pos = getHeroIconPosition()}
134129
<FlyingAirplane
@@ -138,10 +133,7 @@
138133
/>
139134
{/each}
140135

141-
<section
142-
class="hero"
143-
style="transform: translateY({heroParallax}px); opacity: {heroOpacity};"
144-
>
136+
<section class="hero" class:hero-hidden={heroHidden}>
145137
<div class="hero-bg-decoration">
146138
<div class="bg-circle bg-circle-1"></div>
147139
<div class="bg-circle bg-circle-2"></div>
@@ -310,7 +302,12 @@
310302
justify-content: center;
311303
padding: 1.5rem 1rem;
312304
position: relative;
313-
will-change: transform, opacity;
305+
transition: opacity 0.3s ease-out;
306+
}
307+
308+
.hero.hero-hidden {
309+
opacity: 0;
310+
pointer-events: none;
314311
}
315312
316313
.hero-bg-decoration {
@@ -341,18 +338,18 @@
341338
}
342339
343340
.animate-slide-up {
344-
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
341+
animation: slideUp 0.5s ease-out forwards;
345342
}
346343
347344
.animate-delay-1 {
348-
animation-delay: 0.15s;
345+
animation-delay: 0.1s;
349346
opacity: 0;
350347
}
351348
352349
@keyframes slideUp {
353350
from {
354351
opacity: 0;
355-
transform: translateY(30px);
352+
transform: translateY(20px);
356353
}
357354
to {
358355
opacity: 1;
@@ -550,15 +547,17 @@
550547
margin-bottom: 2.5rem;
551548
opacity: 1;
552549
transform: translateY(0);
553-
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
550+
transition:
551+
opacity 0.4s ease-out,
552+
transform 0.4s ease-out;
554553
position: relative;
555554
z-index: 1;
556555
}
557556
558557
@media (min-width: 769px) {
559558
.section-header {
560559
opacity: 0;
561-
transform: translateY(20px);
560+
transform: translateY(15px);
562561
}
563562
564563
.section-visible .section-header {
@@ -652,13 +651,15 @@
652651
.feature-item {
653652
opacity: 1;
654653
transform: translateY(0);
655-
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
654+
transition:
655+
opacity 0.4s ease-out,
656+
transform 0.4s ease-out;
656657
}
657658
658659
@media (min-width: 769px) {
659660
.feature-item {
660661
opacity: 0;
661-
transform: translateY(30px);
662+
transform: translateY(20px);
662663
}
663664
664665
.section-visible .feature-item {
@@ -668,16 +669,16 @@
668669
}
669670
670671
.feature-delay-0 {
671-
transition-delay: 0.1s;
672+
transition-delay: 0s;
672673
}
673674
.feature-delay-1 {
674-
transition-delay: 0.2s;
675+
transition-delay: 0.05s;
675676
}
676677
.feature-delay-2 {
677-
transition-delay: 0.3s;
678+
transition-delay: 0.1s;
678679
}
679680
.feature-delay-3 {
680-
transition-delay: 0.4s;
681+
transition-delay: 0.15s;
681682
}
682683
683684
.hero-preview {
@@ -722,32 +723,36 @@
722723
723724
.create-form-wrapper {
724725
opacity: 1;
725-
transform: translateY(0) scale(1);
726-
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
726+
transform: translateY(0);
727+
transition:
728+
opacity 0.4s ease-out,
729+
transform 0.4s ease-out;
727730
}
728731
729732
@media (min-width: 769px) {
730733
.create-form-wrapper {
731734
opacity: 0;
732-
transform: translateY(30px) scale(0.98);
735+
transform: translateY(20px);
733736
}
734737
735738
.section-visible .create-form-wrapper {
736739
opacity: 1;
737-
transform: translateY(0) scale(1);
740+
transform: translateY(0);
738741
}
739742
}
740743
741744
.recent-wrapper {
742745
opacity: 1;
743746
transform: translateY(0);
744-
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
747+
transition:
748+
opacity 0.4s ease-out 0.1s,
749+
transform 0.4s ease-out 0.1s;
745750
}
746751
747752
@media (min-width: 769px) {
748753
.recent-wrapper {
749754
opacity: 0;
750-
transform: translateY(20px);
755+
transform: translateY(15px);
751756
}
752757
753758
.section-visible .recent-wrapper {
@@ -756,22 +761,7 @@
756761
}
757762
}
758763
759-
.home-page {
760-
opacity: 1;
761-
}
762-
763-
.home-page.page-ready {
764-
animation: fadeIn 0.4s ease-out forwards;
765-
}
766-
767-
@keyframes fadeIn {
768-
to {
769-
opacity: 1;
770-
}
771-
}
772-
773764
@media (prefers-reduced-motion: reduce) {
774-
.home-page.page-ready,
775765
.animate-slide-up {
776766
animation: none !important;
777767
}
@@ -780,10 +770,6 @@
780770
opacity: 1 !important;
781771
}
782772
783-
.hero {
784-
will-change: auto;
785-
}
786-
787773
.feature-item,
788774
.section-header,
789775
.create-form-wrapper,

‎apps/web/src/routes/home/DemoThemeSelector.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,10 @@
124124
padding: 1rem;
125125
text-align: left;
126126
cursor: pointer;
127-
transition: all 0.2s;
127+
transition:
128+
border-color 0.2s,
129+
background 0.2s,
130+
transform 0.2s;
128131
display: flex;
129132
flex-direction: column;
130133
gap: 0.25rem;
@@ -161,7 +164,9 @@
161164
font-weight: 500;
162165
color: #6b7280;
163166
cursor: pointer;
164-
transition: all 0.2s;
167+
transition:
168+
background 0.2s,
169+
color 0.2s;
165170
}
166171
167172
.close-btn:hover {

‎apps/web/src/routes/home/FeatureCard.svelte‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@
5858
.feature-icon {
5959
margin-bottom: 0.75rem;
6060
color: #6b8cce;
61-
transition: transform 0.3s;
6261
background: none;
6362
border: none;
6463
padding: 0.75rem;
@@ -69,6 +68,10 @@
6968
justify-content: center;
7069
min-width: 48px;
7170
min-height: 48px;
71+
will-change: transform;
72+
transition:
73+
transform 0.3s,
74+
background 0.2s;
7275
}
7376
7477
.feature-icon:hover {
@@ -97,6 +100,7 @@
97100
98101
.anim-flip {
99102
animation: iconFlip 0.6s ease-in-out;
103+
backface-visibility: hidden;
100104
}
101105
102106
@keyframes iconBounce {
@@ -148,37 +152,26 @@
148152
}
149153
150154
@keyframes iconPulse {
151-
0% {
155+
0%,
156+
100% {
152157
transform: scale(1);
153158
opacity: 1;
154159
}
155-
25% {
156-
transform: scale(1.3);
157-
opacity: 0.6;
158-
}
159160
50% {
160-
transform: scale(0.8);
161-
opacity: 0.3;
162-
}
163-
75% {
164-
transform: scale(1.1);
165-
opacity: 0.8;
166-
}
167-
100% {
168-
transform: scale(1);
169-
opacity: 1;
161+
transform: scale(1.15);
162+
opacity: 0.6;
170163
}
171164
}
172165
173166
@keyframes iconFlip {
174167
0% {
175-
transform: perspective(400px) rotateY(0);
168+
transform: rotateY(0deg);
176169
}
177170
50% {
178-
transform: perspective(400px) rotateY(180deg) scale(1.1);
171+
transform: rotateY(180deg) scale(1.1);
179172
}
180173
100% {
181-
transform: perspective(400px) rotateY(360deg);
174+
transform: rotateY(360deg);
182175
}
183176
}
184177

0 commit comments

Comments
 (0)