- 締切済み
スクロールで画面が読み込まれたら動くようにしたい
下記html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 素人なのでコピペで教えて欲しいです。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">テキスト</p> </div> <div> <p class="slide-up">テキスト</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }
- yamasusu
- お礼率0% (0/4)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7472)
https://okwave.jp/qa/q10072473.html で回答していますが、動きましたか？
関連するQ&A
- スクロールで画面が読み込まれたら動くようにしたい
html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">salon</p> </div> <div> <p class="slide-up">info</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }
- 締切済み
- JavaScript
- 4つのセクションをそれぞれ左右に分けるには
<body> <section id="s1"></section> <section id="s2"></section> <section id="s3"></section> <section id="s4"></section> </body> #s1{width:200px;height:400px} #s2{width:200px;height:600px} #s3{width:800px;height:800px} #s4{width:800px;height:200px} 以上のセクションを1つ目と2つ目を左に、3つ目と4つ目を右に並べてbodyの幅・高さともに1000pxにおさめる方法はありますか？ ただし各セクションを<div>で囲むことはできません ご回答よろしくおねがいします
- 締切済み
- HTML
- アニメーションのプログラムの挙動の意味
@charset "utf-8"; .box { width: 80px; height: 80px; background: pink; animation-name: move-around; animation-duration: 4s; animation-iteration-count: infinite; } ここから意味を知りたい。 @keyframes move-around { 25% { transform: translate(100px, 0); } 50% { transform: translate(100px, 100px); } 75% { transform: translate(0, 100px); } } ここまで ▢ → ▢ ↑ ↓ ▢ ← ▢ このプログラムを実行すると。 四角がこのように移動するのですが 自分の考えていた命令文と違う気がするのですが ご教示お願いしたいです、宜しくお願いします。 因みにドットインストールのアニメーション編の問題です。
- ベストアンサー
- CSS
- position: sticky;で教えてください
何が間違っているのかわかりません。 間違いを指摘していただきたいです。 ●HTML <body> <article> <header> ヘッダ </header> <div class="content"> <section class="right"> <div class="sticky">ここをスクロール追従させたい</div> </section> <section class="left"> <p>左側ボックス</p> </section> </div> <footer> <address>Copyright (C) 2018All Rights Reserved.</address> </footer> </article> </body> </html> ●CSS article{ width:800px; margin-left:auto; margin-right:auto; } header{margin-bottom:50px;} .right{ width:200px; float:right; } .left{ width:550px; float:left; } footer{clear:both;} .sticky { postion: -webkit-sticky; position: sticky; top:0px; background-color:#09F; } よろしくお願いいたします。
- ベストアンサー
- CSS
- safariでのtransformを有効にさせたい
webデザインについてです。 BODY <div id="wrap"> <main> <h1> <ruby> <span>題</span><rt>dai</rt>名<rt>mei</rt> </h1> <hr> <nav> #page2_INFO# #page4_MAIN# #blog1_LOG# </nav> </main> </div> CSS * { -webkit-box-sizing: border-box; box-sizing: border-box; } *:before,*:after { position: absolute; content: ""; } body { text-align: center; font-family: 'Lora','IPA 明朝'; font-size: 15px; letter-spacing: 1.5px; margin: 0 auto; animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; } @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } #wrap:after { background: url(画像url) right center; z-index: -9999; position: fixed; top: 0; left: 0; width: 100vw; height: auto; min-height:100vh; background-size: cover; } h1{ font-size: 60px; font-weight: normal; line-height: 1; letter-spacing: 4px; font-family: 'Lora','IPA 明朝'; text-align: center; margin: 0 auto; } h1 span { display: block; padding-top: 8px; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -webkit-transform: -webkit-translateY (180px); -webkit-backface-visibility: visible; backface-visibility: visible; } ruby rt { font-size: 8px; letter-spacing: 8px; line-height: 1; text-align: center; } nav{ text-align: center; } nav a{ font-size: 20px; font-family: Cinzel; line-height: 2; color: #000; text-align: center; background: url(画像url); background-size: 300px; padding: 2px; margin: 0 5px; } a{ background: rgba(255,255,255,0.5); color: #000; font-size: 10px; line-height: 14px; text-decoration: none; } main { background: rgba(255,255,255,0.9); padding: 5%; margin: 100px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } main hr{ width: 70%; border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc); margin-top: 10px; } （サイトタイトルや画像url等を一部ぼかしています。web fontのコードは省略しています。） この状態で、chromeやfirefoxから閲覧すると、題名の題という文字がY軸180度回転(鏡文字のような状態)になっているのですが、なぜかsafariから確認すると題という文字がすっぽりと消えてしまいます。ルビ部分はそのまま消えていません。 safariからでも題の文字の部分が鏡文字のように見える状態で閲覧するにはどうしたら良いでしょうか。 よろしくお願い致します。
- ベストアンサー
- CSS
- 次のhtml・cssでspan内の文字を点滅させる
次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 但し、テスト1が表示されている間は、テスト2と3は消えており、 テスト2、3が表示されている間はテスト1が消えている状態にしたいです。 なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。 <div class="test"> <span class="brinking1">テスト1</span> <span class="brinking2">テスト2</span> <span class="brinking3">テスト3</span> </div> <style> .test { margin: auto; background-color: white; position: relative; } .test blinking { width: 50%; animation-name: test; -webkit-animation-name: test; animation-duration:blink 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;} .test .brinking1 { display: block; margin: 0 auto; } .test .brinking2,.test .brinking3 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 25%; } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } </style>
- 締切済み
- CSS
- CSS/HTML で画像 2枚重ねた上に文字。
最近ホームページを作成しているのですが、画像 2 枚を重ねて、その上にリンク付きの文字を のせるにはどのようにしたらよいでしょうか。 CSS を構い始めたのは 1 週間程度なので、基礎的なこともわかってない部分があります。 いろいろ試して、(3)が近いような気がしますが、(1)、(2)に付け加える形でもよいので、 ご教授お願いします。 以下、私が試した 3 パターンの方法です。数値、画像は適当な値です。 (1) 画像 1 枚の上に文字を入れた形。※画像 2 枚目を重ねられませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } --- HTML --- <DIV class="img1">タイトルなどのテキスト</div> --------------------------- (2) 画像を 2 枚重ねた形。 ※文字を上に載せれませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .img2 { padding: 50px 0 0 0px; /*2枚目の画像の位置調整*/ } --- HTML --- <div id="img1"> <img class="img2" src="red-star.png" width="横" height="高さ"> </div> --------------------------- (3) 画像 2 枚を重ねた上に文字を載せた場合。 ※思ったとおりに表示できました。が、何故か<a href="#">テスト</a> のリンクができません。。。 --------------------------- --- CSS --- #img1 { position: relative; bottom :-100px; left: -80px; width : 250px; height : 80px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 2; } #img2 { position: relative; bottom :90px; left: 80px; width : 200px; height : 40px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 1; } #MENU { position: relative; bottom :725px; left: -25px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 3; } --- HTML --- <div id="img1"><img src="img1" width="100" height="100"></div> <div id="img2"><img src="img1" width="100" height="100"></div> <div id="MENU"><a href="#">テスト</a></div> ---------------------------
- 締切済み
- HTML
- 範囲を固定してスクロール
<div id="s1"> <div id="s2"></div> <div id="s3"></div> </div> css #s1{ width:300px; height300px } #s2{ float:left; width50px; height:100px; } #s3{ float:left; width230px; height:300px; } この場合s2の部分を固定して s3をスクロールしたい場合 s2にdisplay:bolck;をするのがいいのか もしくはpositionをしたほうがいいのか あまり使わない技術なんですが s2を固定する方法を教えてください。
- 締切済み
- CSS
- CSSに詳しい方
ブログで「マウスオーバーで画像を拡大」っていうのを取り入れたいのですが、上手くいきません。 画像は拡大されますが、外枠を固定できず困ってます。 http://webya-tm.com/archives/1703 こちらのページを参考に 「画像をマウスオーバーしたときに「拡大」する」がやりたいことです。 <html> ・・・ <div class="entry_body"> <p style="text-align: right;">公開日：2014/10/04</p> <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> ＜本文＞ </div> ・・・ </html> htmlの構造的にはこういう感じになってて、 <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> の部分を <div class="img-block"> <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> </div> と書き換え、さらにCSSに .img-block { width: 600px; height: 300px; overflow: hidden; } と追記すれば上手くいきました。 ただ、すべての<img src～の部分を <div class="img-block"> <img src～ </div> と書き換えるのは、すごく大変な作業なので、その方法以外で 今のままのHTMLで、CSSを書き換えるだけで http://webya-tm.com/archives/1703 こちらのページの「画像をマウスオーバーしたときに「拡大」する」を やる方法はないでしょうか？ ↓今のCSSです。 img { transition: 0.4s; } .entry_body { width: 600x; overflow: hidden; } img:hover { -moz-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); } ※overflow: hidden;というのが働いてくれない状態です。
- ベストアンサー
- CSS
- height:100%を使用してボーダーで囲む
下記のソースのボーダー代替で使用している部分 body { padding: 5px 5px 0 5px; background:#000; } .container:last-child { border-bottom: solid 5px #000; } を削除し body { border: solid 5px #000; } もしくは他の要素を追加で ボーダー(border: solid 5px #000;)で表示させること出来ないでしょうか？ *#headerを画面一杯に表示させたいのでhtml,body,#headerにはheight:100%,width: 100%;を掛けています。 *HTMLソース (インデントの代わりにアンダースコアを使用しているので戻してください) <body> __<div id="header" class="container"> ____<div class="inner"> ______<header> ________<p>Header</p> ______</header> ____</div> __</div> __<div class="container"> ____<div class="inner"> ______<section> ________<p>Section-1st<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</section> ____</div> __</div> __<div class="container"> ____<div class="inner"> ______<section> ________<p>Section-2nd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</section> ____</div> __</div> __<div class="container"> ____<div class="inner"> ______<section> ________<p>Section-3rd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</section> ____</div> __</div> __<div id="footer" class="container"> ____<div class="inner"> ______<footer> ________<p>Footer<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</footer> ____</div> __</div> </body> *CSSソース * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; } body { padding: 5px 5px 0 5px; background: #000; } .container { width: 100%; height: auto; background: #fff; } .inner { max-width: 960px; width: 100%; height: auto; margin: 0 auto; } .container:first-child { width: 100%; height: 100%; background: #3498db; } .container:last-child { border-bottom: solid 5px #000; }
- 締切済み
- CSS
