js実装

写真のスライドショー
juliecogley · Mar 24, 2024 · d6c1ca7 · d6c1ca7
1 parent 849a107
commit d6c1ca7
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 42 deletions.
diff --git a/common.css b/common.css
@@ -408,4 +408,36 @@ width: 100%;
     right: 80%;
     left: auto;
   }
+}
+
+.back-to-works {
+	position: relative;
+	display: flex;
+	text-align: right;
+	margin-bottom: 80px;
+}
+
+.back-to-works__text {
+	position: absolute;
+	right: 0px;
+	padding-right: 24px;
+	text-decoration: none;
+	color: #212427;
+}
+
+.back-to-works__line {
+	position: absolute;
+	right: 124px;
+	top: 10px;
+}
+
+
+@media (min-width: 1060px) {
+	.back-to-works__text {
+		padding: 0;;
+	}
+
+	.back-to-works__line {
+		right: 100px;
+	}
 }
diff --git a/works1.css b/works1.css
@@ -1,4 +1,15 @@
 @charset "UTF-8";
+.body{
+	margin: 0;
+}
+#mainvisual {
+    height: 50vh;
+  }
+  @media (min-width: 1060px) {
+	#mainvisual {
+		height: 100vh;
+	  }
+  }
 
 .main {
 	max-width: 1208px;
@@ -124,7 +135,7 @@
 	}
 }
 
-
+/*画面サイズ1060以上での指定
 .img-frame {
 	position: relative;
 	width: 100%;
@@ -293,35 +304,4 @@
 	}
 
 }
-
-.back-to-works {
-	position: relative;
-	display: flex;
-	text-align: right;
-	margin-bottom: 80px;
-}
-
-.back-to-works__text {
-	position: absolute;
-	right: 0px;
-	padding-right: 24px;
-	text-decoration: none;
-	color: #212427;
-}
-
-.back-to-works__line {
-	position: absolute;
-	right: 124px;
-	top: 10px;
-}
-
-
-@media (min-width: 1060px) {
-	.back-to-works__text {
-		padding-right: 50px;
-	}
-
-	.back-to-works__line {
-		right: 150px;
-	}
-}
+*/
diff --git a/works1.html b/works1.html
@@ -22,8 +22,6 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap" rel="stylesheet">
-  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
-  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.css">
 </head>
 <body>
@@ -64,17 +62,14 @@
     </div>
   </header>
   <main class="main">
-
     <section class="section-works1__top">
-
       <div class="section-works1__title">
         <h1>そっと水をあげる</h1>
         <h2>watering flowers,is it love or not?</h2>
         <p>ミクストメディア<br>
           可変<br>
           2024</p>
       </div>
-
       <div class="section-works1__image-body">
         <img class="section-works1__image" src="photo/01utuwa/utuwa01.JPG" alt="top_image">
       </div>
@@ -93,14 +88,17 @@ <h2>watering flowers,is it love or not?</h2>
       <p>確かにそこにあったことを思い出して</p><br>
       <p>覗き込んでみてください。</p><br>
     </div>
-
+    <!-- Provide a short description of the page. 
     <div class="img-frame">
       <div class="img-01"></div>
       <div class="img-02"></div>
       <div class="img-03"></div>
       <div class="img-04"></div>
     </div>
-
+    -->
+    　<section id="first-view" class="position-relative">
+      　　　<div id="mainvisual"></div>
+      　　</section>
     <div class="back-to-works">
       <img class="back-to-works__line" src="photo/line.svg" alt="line">
       <a class="back-to-works__text" href="works.html">作品集へ戻る</a>
@@ -140,6 +138,37 @@ <h2>SNS</h2>
     </div>
   </footer>
 </body>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js">
-
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"
+  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js"></script>
+<script type="text/javascript">
+  'use strict';
+  jQuery(function ($) {
+    $('#mainvisual').vegas({
+      slides: [
+        { src: 'photo/01utuwa/utuwa02.JPG' },
+        { src: 'photo/01utuwa/utuwa03.JPG' },
+        { src: 'photo/01utuwa/utuwa04.JPG' },
+        { src: 'photo/01utuwa/utuwa05.JPG' },
+        { src: 'photo/01utuwa/utuwa06.JPG' },
+        { src: 'photo/01utuwa/utuwa07.JPG' },
+        { src: 'photo/01utuwa/utuwa08.JPG' },
+        { src: 'photo/01utuwa/utuwa09.JPG' },
+        { src: 'photo/01utuwa/utuwa10.JPG' },
+        { src: 'photo/01utuwa/utuwa11.JPG' },
+        { src: 'photo/01utuwa/utuwa12.JPG' },
+        { src: 'photo/01utuwa/utuwa13.JPG' },
+        { src: 'photo/01utuwa/utuwa14.JPG' },
+        { src: 'photo/01utuwa/utuwa15.JPG' },
+      ],
+      transition: 'fade',
+      transitionDuration: 4000,
+      delay: 18000,
+      cover: true,
+      animation: 'random',
+      animationDuration: 20000,
+      timer: true
+    });
+  });
+</script>
 </html>