- 締切済み
div要素でfadeinclass
こんばんは、お世話になります。 また似た様な質問で大変申し訳ないのですが 画像をフェードインするのに 画像の初期設定で画像コンテンツを消したいのですが 消せないんですが あれってjavascriptコードだけでできなかったのでしょうか？ animate.cssなるものがあった気がしたのですが、 因みにhtmlとcssが問題だと思うので 回答して頂ける方は、お礼と補足欄に随時記述するので ご教示宜しくお願い致します。
- JackTheRipper99
- お礼率88% (648/730)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7474)
回答No.1
その画像の、初期値がopacity: 0 になればいいだけだと思う。 でそのセレクタに対してアニメーションを すればいいだけだとおもいますよ～ （ここで言う事じゃないが、３連休は基本、 呑んで寝てます！）
お礼
おかしいですね、ちゃんとOpacityになっているはずなんですが CSS---------------------------------------------------------------------------- /* ページ全体のスタイル */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* ヘッダーのスタイル */ header { background-color: #2d2d2d; color: #fff; padding: 20px 0; text-align: center; } .logo { font-size: 36px; font-weight: bold; } nav ul { list-style: none; } nav li { display: inline; margin: 0 15px; } nav a { text-decoration: none; color: #fff; font-weight: bold; font-size: 18px; } /* イントロセクション（ホーム）のスタイル */ .intro { background-image: url('intro-background.jpg'); background-size: cover; color: #fff; text-align: center; padding: 100px 0; } .intro h1 { font-size: 48px; margin-bottom: 20px; } /* ポートフォリオセクションのスタイル */ .portfolio { background-color: #f4f4f4; padding: 40px 0; } .portfolio h2 { text-align: center; font-size: 36px; } /* ポートフォリオグリッドのスタイル */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .portfolio-item { position: relative; overflow: hidden; box-sizing: border-box; /* 余白を要素の幅と高さに含める */ margin-bottom: 20px; /* 下部の余白 */ background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: auto; /* イメージの高さを自動調整 */ width: 100%; /* 例: 幅を100%に */ } .portfolio-item img { max-width: 100%; height: auto; width: 100%; /* 画像を親要素に合わせて幅を100%に */ height: auto; /* アスペクト比を維持 */ } /* コンタクトセクションのスタイル */ .contact { background-color: #333; color: #fff; text-align: center; padding: 100px 0; } .contact h2 { font-size: 36px; } /* フッターのスタイル */ .footer { background-color: #2d2d2d; color: #fff; text-align: center; padding: 20px 0; } .contact-info, .social-media { margin: 20px 0; } .social-media a { margin: 0 10px; } .portfolio-item { /* 既存のスタイル */ display: inline-block; vertical-align: middle; width: 200; } /* フェードインの初期設定 */ .fadein { opacity: 0; transform: translateY(20px); /* 下から上にスライドさせる */ transition: opacity 0.5s, transform 0.5s; } /* フェードインアクティブ時の設定 */ .fade-in-active { opacity: 1; transform: translateY(0); /* 上にスライドさせない */ } これでhtmlのdiv要素のクラスにfadeinを追加したんですが、 飲んで寝ますか（笑 結構お酒、好きな人多いですよね。
補足
補足情報です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script> <script src="js/fadein.js"></script> <script src="js/masonry.js"></script> <title>Illustfolio 3風のポートフォリオ</title> <body> <header> <div class="logo">Illustfolio</div> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section id="home"> <h1>Welcome to my Portfolio</h1> <p>Explore my artwork and designs.</p> </section> <section id="portfolio"> <h2>Portfolio</h2> <div class="portfolio-grid text-center"> <!-- div要素に変更 --> <div class="portfolio-item fadein"> <img src="img/img1.jpg" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img5.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img6.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img1.jpg" class="text-center" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img5.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img6.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img1.jpg" class="text-center" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <