ページを読み込んだ直後に画像が表示されません

前提・実現したいこと

ページのトップに画面いっぱいに写真を表示させて、スクロールするごとに上からcssの色で塗りつぶしていくサイトを作りたいです。

発生している問題・エラーメッセージ

大まかには完成しているのですが、ページを読み込んだタイミングで画像が表示されません。
少しでもスクロールすると表示されます。

問題の画像はこれです
url(./img/portfolio-main.jpg)

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10    <link rel="stylesheet" type="text/css" href="css/style.css">
11    
12    
13    <title>Hello,world</title>
14    <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>
15    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,500,900&amp;subset=japanese" rel="stylesheet">
16    <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
17    <link rel="icon" href="img/favicon.ico">
18    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
19    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
20    <script type="text/javascript" src="js/style.js"></script>
21  </head>
22  <body>
23    <a class="anchor" href="#">Scroll</a>
24    <!--start portfolio　details -->
25
26    <div id="portfolio-static">
27
28    </div>
29  
30    <div class="detail-set">
31      <div id="accordion-btn">
32    
33      </div>
34    
35      <div id="accordion-tgt"> 
36        <h4 class="tantou">
37          担当業務
38        </h4>
39        <p class="tantou-p">
40          企画/情報設計/コーディング/javascriptプログラミング/phpプログラミング
41        </p>
42        
43        <hr class="sport1">
44        
45        
46        <p class="one-scroll">
47          ワンスクロール型を見る
48        </p>
49        <p class="five-pages">
50          5ページ型を見る
51        </p>
52        
53        <div class="container-1">
54          <a href="#" class="btn-open">PUSH ME</a>
55        </div>
56      
57        <div class="container-2">
58          <a href="#" class="btn-open">PUSH ME</a>
59        </div>
60      </div>
61    
62    </div>
63    <div class="portfolio-detail-1"></div>
64    <div class="portfolio-detail-2"></div>
65
66
67
68  <script type="text/javascript" src="js/style.js"></script></body>
69</html>

sass
1html{
2    font-family: 'Noto Sans JP', sans-serif;
3  }
4
5  @font-face {
6    font-family: 'Calluna';
7    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/CallunaSansRegular.otf') format('opentype');
8  }
9  * { 
10    box-sizing: border-box;
11  }
12  body {
13    font-family: Calluna, Arial, sans-serif;
14    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/portfolio-main.jpg);
15    background-repeat: no-repeat;
16    background-attachment: fixed !important;
17    background-size: cover !important;
18    background-position: center top !important;
19    padding: 1rem;
20    padding-top: 45%;
21    color: #fff;
22    z-index: 1;
23    height: 10000px;
24  }
25  
26
27
28
29
30
31
32
33
34
35
36
37
38a{
39  &.anchor {
40    display: inline-block;
41    position: absolute;
42    right: 50vw;
43    bottom: 0;
44    z-index: 2;
45    padding: 10px 10px 110px;
46    overflow: hidden;
47    color: #fff;
48    font-size: 14px;
49    font-family: 'Josefin Sans', sans-serif;
50    line-height: 1;
51    letter-spacing: .2em;
52    text-transform: uppercase;
53    text-shadow: 0 0 7px rgba(0, 0, 0, 1) !important;
54    text-decoration: none;
55    writing-mode: vertical-lr;
56    &::after {
57      content: '';
58      position: absolute;
59      bottom: 0;
60      left: 50%;
61      width: 1px;
62      height: 100px;
63      background: #fff;
64    }
65      
66    &::before {
67      content: '';
68      position: absolute;
69      bottom: 0;
70      left: 50%;
71      width: 1px;
72      height: 100px;
73      background: rgba(255, 255, 255, .4);
74    }
75    
76    &::after {
77      animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
78    }
79        
80    @keyframes sdl {
81      0% {
82        transform: scale(1, 0);
83        transform-origin: 0 0;
84      }
85      50% {
86        transform: scale(1, 1);
87        transform-origin: 0 0;
88      }
89      51% {
90        transform: scale(1, 1);
91        transform-origin: 0 100%;
92      }
93      100% {
94        transform: scale(1, 0);
95        transform-origin: 0 100%;
96      }
97    }
98     
99  }
100}
101
102div {
103  &#portfolio-static {
104    background-image:
105       url(../img/portfolio-logo.png);
106    height: 300px;
107    width: 700px;
108    background-size: cover;
109    transform: rotate(-90deg);
110    display: none;
111    margin: 0;
112    padding: 0;
113    position: fixed;
114    top: 38vh;
115    left: -200px;
116  }
117}
118
119div {
120  &.detail-set {
121    position: absolute;
122    top: 1000px;
123    right: 5vw;
124  }
125  div {
126    &#accordion-btn {
127      height: 400px;
128      width: 1000px;
129      background-image:
130       url(../img/yukawaarch-portfolio.jpg);
131      background-size: cover;
132    }
133
134  }
135
136  
137
138    }
139
140    div {
141      &.container-2 {
142        font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
143        text-align: center;
144        padding: 0;
145        margin: 0;
146        width: 180px;
147        position: relative;
148        top: -58px;
149        left: 43.5vw;
150      }
151      a {
152        &.btn-open {
153          display: inline-block;
154          width: 180px;
155          height:50px;
156          text-align: center;
157          background-color: #9ec34b;
158          font-size: 16px;
159          line-height: 50px;
160          color: #FFF;
161          text-decoration: none;
162          font-weight: bold;
163          border: 2px solid #9ec34b;
164          position: relative;
165          overflow: hidden;
166          z-index: 1;
167          &:after{
168            width: 100%;
169            height: 0;
170            content:"";
171            position: absolute;
172            top: 50%;
173            left: 50%;
174            background : #FFF;
175            opacity: 0;
176            transform: translateX(-50%) translateY(-50%) rotate(45deg);
177            transition: .2s;
178            z-index: -1;
179          }
180          &:hover{
181            color: #9ec34b;
182          }
183          &:hover:after{
184            height: 240%;
185            opacity: 1;
186          }
187          &:active{
188            &:after{
189              height: 340%;
190              opacity: 1;
191            }
192          }
193        }
194      }
195
196    }
197
198  }
199
200}

javascript
1var nystories = document.querySelector(".anchor").offsetTop;
2window.onscroll = function gradation() {
3  if (window.pageYOffset > 0) {
4 var opac = (window.pageYOffset / nystories);
5    console.log(opac);
6  document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(./img/portfolio-main.jpg) no-repeat";
7  }
8}
9
10
11$(function(){
12  $("#accordion-btn,#accordion-tgt").hover(function() {
13  $("#accordion-tgt").stop().slideToggle();
14  });
15  });
16  
17
18$(window).scroll(function() {
19  if ($(this).scrollTop() > 700) {
20    $('#portfolio-static').fadeIn();
21  } else {
22    $('#portfolio-static').fadeOut();
23  }
24});

試したこと

javascriptを>0から>1にしてみましたが解決しませんでした。（20とかでも）

行動規範の内容に同意します

回答1件

ベストアンサー

ページを読み込んだタイミングで画像が表示されません。

画像が何を指しているのかわかりかねますが、
こうゆうことでしょうか？

JavaScript
1var nystories = document.querySelector(".anchor").offsetTop;
2
3function gradation() {
4    if (window.pageYOffset > 0) {
5        var opac = (window.pageYOffset / nystories);
6        console.log(opac);
7        document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(./img/portfolio-main.jpg) no-repeat";
8    }
9}
10
11window.onscroll = gradation;
12window.onload   = gradation;
13
14$(function(){
15    $("#accordion-btn,#accordion-tgt").hover(function() {
16        $("#accordion-tgt").stop().slideToggle();
17    });
18});
19
20
21$(window).scroll(function() {
22    if ($(this).scrollTop() > 700) {
23        $('#portfolio-static').fadeIn();
24    } else {
25        $('#portfolio-static').fadeOut();
26    }
27});

投稿2020/08/25 18:32

kyoya0819

総合スコア10429

rio13

2020/08/26 06:19

kyoyaさんのアイデアのおかげで無事に解決しました。ありがとうございます！！結果としてjavascriptはこうなりました var nystories = document.querySelector(".anchor").offsetTop; function gradation() { if (window.pageYOffset > 0) { var opac = (window.pageYOffset / nystories); console.log(opac); document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(./img/portfolio-main.jpg) no-repeat"; } } function topimage() { document.body.style.background = "url(./img/portfolio-main.jpg) no-repeat" } window.onscroll = gradation; window.onload = topimage; $(function(){ $("#accordion-btn,#accordion-tgt").hover(function() { $("#accordion-tgt").stop().slideToggle(); }); }); $(window).scroll(function() { if ($(this).scrollTop() > 700) { $('#portfolio-static').fadeIn(); } else { $('#portfolio-static').fadeOut(); } });

行動規範の内容に同意します