質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

アニメーションの開始位置や終了位置を同じにしたい。

kusaka00
kusaka00

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

36閲覧

投稿2019/06/24 21:50

■デモページ
http://manajp.com/sample2/sample.html

■前情報
・サイトはレスポンシブ
・パララックスとCSSアニメーションを使用
・アニメーションの開始はjQueryで座標を取得クラスを差し替え
・今回アニメーションがかかる要素はパララックスの要素と同じ階層

■質問内容
横幅1500px~1920px位だと大体イメージ通りの位置に要素が動きます。
しかし、1500px以下になるとどうしても位置がずれてしまいます。

他のパララックスのサイトを見るとウィンドウサイズを縮めても同じ位置を保って要素が配置されるのですが、どうすればそうなるのかがわかりません。

ウィンドウサイズを変更しても位置がずれないようにするにはどうすれば良いのでしょうか。

下記にソースを記載します。
宜しくお願い致します。

■HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>パララックステスト</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/animation.js"></script> <script src="js/jquery.easeScroll.js"></script> </head> <body> <article class="first_box"> <section class="first_text"> <h1>ああああああああああああああ</h1> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい。</p> </section> <section class="second_text"> <h1>ううううううううううううううう</h1> <p>えええええええええええええええええええええええええええええええええええええええええええええええええええええええ。</p> </section> <section class="third_text"> <h1>おおおおおおおおおおおおお</h1> <p>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか。</p> </section> <section class="forth_text"> <h1>きききききききききききききき</h1> <p>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくくく。</p> </section> </article> <div id="first" class="content"> <p class="logo">jQuery x HTML5 x CSS3</p> </div> <div id="second" class="content"> <article class="second_box"> <h2>Only CSS.</h2> </article> </div> <div id="third" class="content"> <article class="third_box"> <h2>Without jQuery</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <img class="img_box" src="img/img-parallaxsample01.jpg" /> </div> <div id="forth" class="content"> <h2>The End.</h2> </div> </body> </html>

■CSS

html { margin: 0; font-size: 16px; font-size: 100%; } body { min-width: 320px; font-size: 1rem; } img { width: 100%; height: auto; } article h2, article h1 { font-size: 3.6em; line-height: 1em; margin: 25px 0; } .content { border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); color: #333; margin: 0 auto; /*padding-top: calc(1150 / 1150 * 100%);*/ position: relative; width: 100%; height: 100vh; overflow: hidden; } #first { background: url(../img/bg-parallaxsample01.jpg) 50% 0 no-repeat fixed; background-size: cover; } #second { background: url(../img/bg-parallaxsample02.jpg) 50% 0 no-repeat fixed black; background-size: cover; } #third { background: url(../img/bg-parallaxsample03.jpg) 50% 0 no-repeat fixed black; background-size: cover; } #forth { background: url(../img/bg-parallaxsample04.jpg) 50% 0 no-repeat fixed #e6cda4; background-size: cover; } /* section first */ .logo { color: rgba(255, 255, 255, 0.9); font-size: 4em; font-weight: bold; margin: 0; position: fixed; top: calc(100 / 1150 * 100%); left: calc(50 / 1150 * 100%); text-shadow: 0 -1px rgba(0, 0, 0, 0.4); } .first_box { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); padding: 18px; position: absolute; top: calc(300 / 1150 * 100%); width: calc(800 / 1150 * 100%); left: -100%; transition: all 1s 0s ease; z-index: 3; } .odd_movie, .even_movie { text-shadow: 0 -1px rgba(0, 0, 0, 0.4); } .first_box.right_move { -webkit-transform:translateX(150%); transform:translateX(150%); } .first_box.riguht_doun { -webkit-transform:translateX(180%) translateY(200%) rotate(-720deg); transform:translateX(180%) translateY(200%) rotate(-720deg); } .first_box.left_top { -webkit-transform:translateX(150%) translateY(600%) rotate(720deg); transform:translateX(150%) translateY(600%) rotate(720deg); } .first_box.right_top { -webkit-transform:translateX(180%) translateY(1200%) rotate(-720deg); transform:translateX(180%) translateY(1200%) rotate(-720deg); } .first_box.right_move [class*="_text"], .first_box.riguht_doun [class*="_text"], .first_box.left_top [class*="_text"], .first_box.right_top [class*="_text"] { display: none; } .first_box.right_move .first_text, .first_box.riguht_doun .second_text, .first_box.left_top .third_text, .first_box.right_top .forth_text { display: block; } /* section second */ .second_box { position: absolute; top: calc(80 / 1150 * 100%); background: rgba(51, 51, 51, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); color: white; margin-left: calc(100 / 1150 * 100%); padding: calc(10 / 1150 * 100%) calc(20 / 1150 * 100%); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); line-height: 1.5em; width: calc(445 / 1150 * 100%); transition: all 1s 0s ease; } /* section third */ .third_box { background: rgba(51, 51, 51, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); color: white; padding: calc(10 / 1150 * 100%) calc(20 / 1150 * 100%); margin: calc(100 / 1150 * 100%) 0 0 60%; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); line-height: 1.5em; color: white; position: absolute; top: 0; right: -50%; transition: all 1s 0s ease; width: 40%; } .third_box.left_move { -webkit-transform: translateX(-116%); transform: translateX(-116%); } .img_box { border: 8px solid white; box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); height: auto; width: calc(400 / 1150 * 100%); position: absolute; left: calc(30 / 1150 * 100%); top: 0; /*-webkit-transform: rotate(-8deg); transform: rotate(-8deg);*/ transition: all 1s 0s ease; } .img_box.bottom_move { -webkit-transform: translateY(116%) rotate(-12deg); transform: translateY(116%) rotate(-12deg); } /* section the end */ #theend h2 { color: white; font-size: 4em; left: 50%; margin-left: calc(150 / 1150 * -100%); position: absolute; text-shadow: 0 0 16px rgba(140, 123, 96, 0.8); top: calc(180 / 1150 * 100%); width: calc(300 / 1150 * 100%); }

■jQuery

$(function(){ var imgTopImgBox = $("#first").offset().top; var imgTopSecond = $("#second").offset().top; var imgTopThird = $("#third").offset().top; var imgTopForth = $("#forth").offset().top; var difference = imgTopSecond/1.2; var windowHeight = $(window).height(); var TopClass = imgTopSecond/3; console.log("1つめの"+imgTopImgBox); console.log("2つめの"+imgTopSecond); console.log("3つめの"+imgTopThird); console.log("ウィンドウの高さ"+windowHeight); console.log("座標"+TopClass); window.onload = function () { var aa = $('.first_box').attr('class'); var classVals = aa.split(' '); console.log("classVals"+classVals.length); if(classVals.length <= 1){ $('.first_box').addClass('right_move'); } }; $(window).scroll(function (){ var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if(0 <= scroll && scroll < windowHeight){ $("#first").each(function(){ if (0 <= scroll && scroll < windowHeight / 4){ $('.first_box').css("left",""); $('.first_box').removeClass('riguht_doun'); $('.first_box').addClass('right_move'); } else if (scroll > windowHeight / 4){ $('.first_box').removeClass('right_move'); $('.first_box').removeClass('left_top'); $('.first_box').addClass('riguht_doun'); } }); }; if(scroll >= imgTopSecond - 1 && scroll < imgTopThird){ $("#second").each(function(){ $('.first_box').removeClass('riguht_doun'); $('.first_box').addClass('left_top'); if(scroll < imgTopForth - difference){ $('.first_box').removeClass('right_top'); $('.first_box').addClass('left_top'); }; }) }; if(scroll >= imgTopThird - 1 && scroll < imgTopForth){ $("#third").each(function(){ $('.first_box').addClass('right_top'); $('.first_box').removeClass('left_top'); if(scroll < imgTopSecond){ //$('.first_box').removeClass('left_top'); //$('.first_box').addClass('riguht_doun'); }; }) }; $(".img_box").each(function(){ var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > imgTopImgBox - windowHeight + windowHeight/2){ $('.img_box').addClass('bottom_move'); $('.img_box').css("opacity","1" ); } else { $('.img_box').removeClass('bottom_move'); $('.img_box').css("opacity","0" ); } }); }); });

以上となります。
宜しくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。