Q&A
前提・実現したいこと
表題の機能を反映させたく、質問します。
skills_itemまでスクロールしたときに、裏の要素（.pc-skills_back）
を表示させたい
試したこと
私のほうで試行錯誤し、下記のJsコードを書きましたが、うまくいきませんでした。
裏側の部分が既に表示されてしまいます。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link rel="stylesheet" href="./css/destyle.css"> 6 <link rel="stylesheet" href="./css/style.css"> 7</head> 8<body> 9 <section class="skills js-scroll" id="js-skills"> 10 <div class="container"> 11 <h2 class="skills-ttl">Skills</h2><!-- /.about-ttl --> 12 <ul class="skills_list"> 13 <li class="skills_item pc-skills passive" id="passive"> 14 <h3 class="pc-skills_ttl">HTML</h3><!-- /.pc-skills_ttl --> 15 <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img --> 16 <a href=""></a> 17 </li><!-- /.skills_item --> 18 <!--2--> 19 <li class="skills_item pc-skills pc-skills_back active" id="active"> 20 <h3 class="pc-skills_ttl">HTML</h3><!-- /.pc-skills_ttl --> 21 <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img --> 22 <p class="skills-desc_back">HTML5は基本的な文法や基礎は自信をもってコードを書けます。</p><!-- /.skills-desc --> 23 <a href=""></a> 24 </li><!-- /.skills_item --> 25 </ul> 26 </div> 27 </section> 28</body> 29</html>
CSS
1 2.skills_list { 3 display: -ms-grid; 4 display: grid; 5 -ms-grid-columns: (minmax(26%, 1fr))[auto-fit]; 6 grid-template-columns: repeat(auto-fit, minmax(26%, 1fr)); 7 gap: 5%; 8} 9 10.skills_item { 11 width: 100%; 12 height: 80%; 13 margin-top: 60px; 14 -webkit-transform-style: preserve-3d; 15 transform-style: preserve-3d; 16 -webkit-transition: opacity 0.5s, -webkit-transform 1s; 17 transition: opacity 0.5s, -webkit-transform 1s; 18 transition: transform 1s, opacity 0.5s; 19 transition: transform 1s, opacity 0.5s, -webkit-transform 1s; 20 background-color: #fff; 21} 22 23.skills_item:nth-of-type(2n) { 24 margin: 60px 1%; 25} 26 27.skills_item .skills_img img { 28 width: 40%; 29} 30 31.skills_item > a { 32 position: absolute; 33 width: 100%; 34 height: 100%; 35 top: 0; 36 left: 0; 37 text-indent: 100%; 38 /*テキスト非表示*/ 39 white-space: nowrap; 40 /*テキスト非表示*/ 41 overflow: hidden; 42 /*テキスト非表示*/ 43} 44 45.skills_item > a:hover { 46 opacity: .5; 47 -webkit-transform: rotate(-180deg); 48 transform: rotate(-180deg); 49} 50 51.pc-skills { 52 position: relative; 53 background-color: rgba(255, 255, 255, 0.7); 54 -webkit-box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15); 55 box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15); 56 padding: 0 30px 30px 30px; 57 border-radius: 30px; 58} 59 60.pc-skills.passive { 61 z-index: 1; 62 -webkit-transform: rotateY(0deg); 63 transform: rotateY(0deg); 64} 65 66.pc-skills_ttl { 67 text-align: center; 68 font-size: 2.5rem; 69 line-height: 3; 70 text-align: center; 71} 72 73.pc-skills_img { 74 width: 60%; 75 margin: 5% auto; 76} 77 78.pc-skills_back.active { 79 z-index: 0; 80 -webkit-transform: rotateY(-180deg); 81 transform: rotateY(-180deg); 82} 83 84.pc-skills_back .pc-skills_img_back { 85 opacity: .5; 86} 87 88.pc-skills_back .skills-desc_back { 89 color: #0fe4a4; 90 font-size: 1.0rem; 91}
JS
1$(function(){ 2 $(window).scroll(function() { 3 const sec_skill = $(".skills_item") 4 var fix = $(".skills_item"); 5 var fixskill = fix.offset().top; 6 7 if($(window).scrollTop() >= sec_skill) { 8 // $('.pc-skills_back').toggleClass('active') 9 $("#passive").css({'z-index':'0', 'transform':'rotateY(-180deg)'}); 10 $('#active').css({'z-index':'1', 'transform':'rotateY(0deg)'}); 11 } else{ 12 // $('.pc-skills').toggleClass('passive') 13 $("#active").css({'z-index':'0', 'transform':'rotateY(-180deg)'}); 14 $('#passive').css({'z-index':'1', 'transform':'rotateY(0deg)'}); 15 } 16 17}); 18})
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
ぱっと見た感じ、座標取ってるのはfixskillの方なので
javascript
1if($(window).scrollTop() >= sec_skill) { 2↓ 3if ($(window).scrollTop() >= fixskill) {
でいけるんじゃないでしょうか？
裏表が別々に表示されてるのは問題ないんでしょうか？
一応アップデートしました。
codepenサンプル
skills_listと命名しているからには、html以外のスキルも書き連ねるのかな？と思いましたが
その場合ulを束ねる親要素にgridを当てないと
.skills_listにdisplay: grid;使ってたら
子要素はliになるわけで分離しちゃうのは当然かと思います。
.skills_containerというdivを作成して、そこに指定しました(現在コメントアウトしてdisplay:flex当ててます)。
その他htmlタグを変更したり、よくわからないclassは統廃合しました。
普通に作ると右から裏返ったら戻る時も右に裏返っていきますが
この方(https://www.kansuke-prg.com/jquery/rotation)の方法では、
常に同じ方向に回転しているように見えるんですね。
投稿2021/12/27 19:15
編集2021/12/28 20:58
総合スコア1126
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/28 04:31 編集
2021/12/29 05:18
2021/12/29 08:47
2021/12/29 08:54
2021/12/29 09:05
2021/12/29 10:31
2021/12/29 10:46 編集
2021/12/30 02:55
2021/12/30 03:55
2021/12/30 05:55 編集
2021/12/30 07:50
2021/12/30 08:05
2021/12/30 08:34
2021/12/30 09:33
2021/12/30 09:57
2021/12/31 04:08