diff --git a/common.css b/common.css index 3f7f12c..9c73e82 100644 --- a/common.css +++ b/common.css @@ -315,6 +315,12 @@ body { padding-right: 1.4px; } +@media (min-width: 1060px) { + .footer__copyright { + left: -50px; + } + +} .start { background: #FFF; position: fixed; diff --git a/reset.css b/reset.css index d918eeb..a29947d 100644 --- a/reset.css +++ b/reset.css @@ -101,20 +101,3 @@ padding:0; input, select { vertical-align:middle; } -/* リセットCSS */ -body,ul,li { padding: 0; margin: 0;} -/* スリックスライダー */ -.slider li { - width: 100%; - height: 100vh; - object-fit: cover; - } - .slider li:first-of-type { - background-image: url(photo/01utuwa/utuwa01.JPG); - } - .slider li:nth-of-type(2) { - background-image: url(photo/01utuwa/utuwa02.JPG); - } - .slider li:last-of-type { - background-image: url(photo/01utuwa/utuwa03.JPG); - } \ No newline at end of file diff --git a/works1.css b/works1.css index ff2050f..4f2d197 100644 --- a/works1.css +++ b/works1.css @@ -124,14 +124,6 @@ } } -/* -.img-01,.img-02,.img-03,.img-04 { - width: 130px; - height: 130px; - object-fit: cover; - object-position: 0% 0%; -} - .img-frame { position: relative; @@ -163,78 +155,32 @@ background-size: cover; background-repeat: no-repeat; display: block; + object-fit: cover; + object-position: 0% 0%; } + .img-01 { - background-image: url('photo/01utuwa/utuwa02.JPG'); - animation: slide-animation-01 40s infinite; + background-image: url('photo/01utuwa/utuwa01.JPG'); + animation: slide-animation-01 24s infinite; } .img-02 { - background-image: url('photo/01utuwa/utuwa03.JPG'); - animation: slide-animation-02 40s infinite; + background-image: url('photo/01utuwa/utuwa02.JPG'); + animation: slide-animation-02 24s infinite; } .img-03 { - background-image: url('photo/01utuwa/utuwa04.JPG'); - animation: slide-animation-03 40s infinite; + background-image: url('photo/01utuwa/utuwa03.JPG'); + animation: slide-animation-03 24s infinite; } .img-04 { - background-image: url('photo/01utuwa/utuwa05.JPG'); - animation: slide-animation-04 40s infinite; -} -/* -.img-05 { - background-image: url('photo/01utuwa/utuwa06.JPG'); - animation: slide-animation-05 24s infinite; -} - -.img-06 { - background-image: url('photo/01utuwa/utuwa07.JPG'); - animation: slide-animation-06 24s infinite; -} - -.img-07 { - background-image: url('photo/01utuwa/utuwa08.JPG'); - animation: slide-animation-07 24s infinite; -} - -.img-08 { - background-image: url('photo/01utuwa/utuwa09.JPG'); - animation: slide-animation-08 24s infinite; -} - -.img-09 { - background-image: url('photo/01utuwa/utuwa10.JPG'); - animation: slide-animation-09 24s infinite; + background-image: url('photo/01utuwa/utuwa04.JPG'); + animation: slide-animation-04 24s infinite; } -.img-10 { - background-image: url('photo/01utuwa/utuwa11.JPG'); - animation: slide-animation-10 24s infinite; -} -.img-11 { - background-image: url('photo/01utuwa/utuwa12.JPG'); - animation: slide-animation-02 24s infinite; -} - -.img-12 { - background-image: url('photo/01utuwa/utuwa13.JPG'); - animation: slide-animation-03 24s infinite; -} - -.img-13 { - background-image: url('photo/01utuwa/utuwa14.JPG'); - animation: slide-animation-01 24s infinite; -} - -.img-14 { - background-image: url('photo/01utuwa/utuwa15.JPG'); - animation: slide-animation-02 24s infinite; -} -*/ @keyframes slide-animation-01 { 0% { @@ -242,16 +188,16 @@ transform: scale(1.0); } - 30% { + 10% { opacity: 1; } - 40% { + 30% { opacity: 0; transform: scale(1.15); } - 90% { + 60% { opacity: 0 } @@ -294,16 +240,16 @@ opacity: 0; } - 60% { + 45% { opacity: 0; transform: scale(1.0); } - 70% { + 55% { opacity: 1; } - 90% { + 65% { opacity: 1; } @@ -338,135 +284,6 @@ } } -@keyframes slide-animation-05 { - 0% { - opacity: 0; - } - - 30% { - opacity: 0; - transform: scale(1.1); - } - - 40% { - opacity: 1; - } - - 60% { - opacity: 1; - } - - 70% { - opacity: 0; - transform: scale(1.0); - } - - 100% { - opacity: 0; - } -} - -@keyframes slide-animation-06 { - 0% { - opacity: 0; - } - - 60% { - opacity: 0; - transform: scale(1.0); - } - - 70% { - opacity: 1; - } - - 90% { - opacity: 1; - } - - 100% { - opacity: 0; - transform: scale(1.1); - } -} - -@keyframes slide-animation-07 { - 0% { - opacity: 1; - transform: scale(1.0); - } - - 30% { - opacity: 1; - } - - 40% { - opacity: 0; - transform: scale(1.15); - } - - 90% { - opacity: 0 - } - - 100% { - opacity: 1; - transform: scale(1.0); - } -} - -@keyframes slide-animation-08 { - 0% { - opacity: 0; - } - - 30% { - opacity: 0; - transform: scale(1.1); - } - - 40% { - opacity: 1; - } - - 60% { - opacity: 1; - } - - 70% { - opacity: 0; - transform: scale(1.0); - } - - 100% { - opacity: 0; - } -} - -@keyframes slide-animation-09 { - 0% { - opacity: 0; - } - - 60% { - opacity: 0; - transform: scale(1.0); - } - - 70% { - opacity: 1; - } - - 90% { - opacity: 1; - } - - 100% { - opacity: 0; - transform: scale(1.1); - } -} - @media (min-width: 1060px) { .img-frame { @@ -476,7 +293,7 @@ } } -*/ + .back-to-works { position: relative; display: flex; diff --git a/works1.html b/works1.html index 1ecd6d4..35019c9 100644 --- a/works1.html +++ b/works1.html @@ -22,36 +22,8 @@ - - Slick Demo - - - - -
-
-
-
-
-
@@ -119,29 +91,12 @@

watering flowers,is it love or not?

覗き込んでみてください。


- - - +
line diff --git a/works3.css b/works3.css index 42886c8..6d5eaff 100644 --- a/works3.css +++ b/works3.css @@ -120,15 +120,6 @@ } } -/* -.img-01,.img-02,.img-03,.img-04 { - width: 130px; - height: 130px; - object-fit: cover; - object-position: 0% 0%; -} - -*/ .img-frame { position: relative; width: 100%; @@ -139,7 +130,8 @@ .img-01, .img-02, -.img-03 { +.img-03, +.img-04 { position: absolute; top: 0; left: 0; @@ -147,37 +139,33 @@ height: 100%; background-size: cover; background-repeat: no-repeat; - display: block; } .img-01 { background-image: url('photo/03moon/moon01.JPG'); - animation: slide-animation-01 24s infinite; + animation: slide-animation-01 48s infinite; background-position: 50% 50%; } .img-02 { background-image: url('photo/03moon/moon02.JPG'); - animation: slide-animation-02 24s infinite; + animation: slide-animation-02 48s infinite; background-position: 50% 50%;} .img-03 { background-image: url('photo/03moon/moon01.JPG'); - animation: slide-animation-01 24s infinite; + animation: slide-animation-01 48s infinite; background-position: 50% 50%; } .img-04 { background-image: url('photo/03moon/moon02.JPG'); - animation: slide-animation-02 24s infinite; + animation: slide-animation-02 48s infinite; background-position: 50% 50%; } - - - @keyframes slide-animation-01 { 0% { opacity: 1; diff --git a/works4.css b/works4.css index 8d8df2e..1f3296c 100644 --- a/works4.css +++ b/works4.css @@ -118,26 +118,18 @@ } } -/* -.img-01,.img-02,.img-03,.img-04 { - width: 130px; - height: 130px; - object-fit: cover; - object-position: 0% 0%; -} - -*/ .img-frame { position: relative; width: 100%; - height: 600px; + height:500px; overflow: hidden; margin: 80px auto; } .img-01, .img-02, -.img-03 { +.img-03, +.img-04{ position: absolute; top: 0; left: 0; @@ -145,37 +137,30 @@ height: 100%; background-size: cover; background-repeat: no-repeat; - + background-position: 0% 0%; display: block; - } .img-01 { - background-image: url('photo/04hidamari/hidamari01.JPG"'); - animation: slide-animation-01 24s infinite; - background-position: 50% 50%; + background-image: url('photo/04hidamari/hidamari01.JPG'); + animation: slide-animation-01 48s infinite; } .img-02 { background-image: url('photo/04hidamari/hidamari02.JPG'); - animation: slide-animation-02 24s infinite; - background-position: 50% 50%;} + animation: slide-animation-02 48s infinite;} .img-03 { - background-image: url('photo/04hidamari/hidamari01.JPG"'); - animation: slide-animation-01 24s infinite; - background-position: 50% 50%; + background-image: url('photo/04hidamari/hidamari01.JPG'); + animation: slide-animation-01 48s infinite; } .img-04 { - background-image: url('photo/04hidamari/hidamari02.JPG"'); - animation: slide-animation-02 24s infinite; - background-position: 50% 50%; + background-image: url('photo/04hidamari/hidamari02.JPG'); + animation: slide-animation-02 48s infinite; } - - @keyframes slide-animation-01 { 0% { opacity: 1; @@ -256,9 +241,7 @@ .img-frame { height:800px; width: 100%; - } - } .back-to-works { diff --git a/works5.css b/works5.css index 028e3d2..580d39a 100644 --- a/works5.css +++ b/works5.css @@ -122,15 +122,6 @@ } } -/* -.img-01,.img-02,.img-03,.img-04 { - width: 130px; - height: 130px; - object-fit: cover; - object-position: 0% 0%; -} - -*/ .img-frame { position: relative; width: 100%; @@ -141,7 +132,8 @@ .img-01, .img-02, -.img-03 { +.img-03, +.img-04 { position: absolute; top: 0; left: 0; @@ -149,7 +141,7 @@ height: 100%; background-size: cover; background-repeat: no-repeat; - + background-position: 50% 50%; display: block; } @@ -171,17 +163,17 @@ .img-04 { background-image: url('photo/05mi/mi04.JPG'); - animation: slide-animation-01 24s infinite; + animation: slide-animation-04 24s infinite; } .img-05 { background-image: url('photo/05mi/mi05.JPG'); - animation: slide-animation-02 24s infinite; + animation: slide-animation-01 24s infinite; } .img-06 { background-image: url('photo/05mi/mi06.JPG'); - animation: slide-animation-03 24s infinite; + animation: slide-animation-02 24s infinite; } @@ -245,6 +237,30 @@ opacity: 0; } + 45% { + opacity: 0; + transform: scale(1.0); + } + + 55% { + opacity: 1; + } + + 65% { + opacity: 1; + } + + 100% { + opacity: 0; + transform: scale(1.1); + } +} + +@keyframes slide-animation-04 { + 0% { + opacity: 0; + } + 60% { opacity: 0; transform: scale(1.0); diff --git a/works5.html b/works5.html index 5f80290..a420ed9 100644 --- a/works5.html +++ b/works5.html @@ -91,7 +91,6 @@

I sow the seeds of tropical fruits of memories.

-