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

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

ただいまの
回答率

90.48%

  • JavaScript

    20880questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11813questions

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

  • jQuery

    8320questions

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

  • CSS

    7731questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

スライドのガタガタを解決、背景のmousemoveを効かせる

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 549
退会済みユーザー

退会済みユーザー

 前提・実現したいこと

スライダー作成での動きでTよりも右に行こうとすると一時停止してガタつきながら右に移動することを解消したい。
文字の背景画像をmousemoveさせようとしたがしない

参考資料

https://www.youtube.com/watch?v=deufp4NK4PI&t=54s

 該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="JQUERY%20Main.js"></script>
</head>
<body>
    <div id="main">
        <div id="slider">
            <div id="F">
            F
            </div>
            <div class="line"></div>
            <div id="data">
                    CASE 1<br>
                    <hr size="2" width="50px" color="#111" align="left"/>
                    <div class="title">title1<br>DESIGN</div>
                    <div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
            </div>

            <div id="T">
            T
            </div>
            <div class="line"></div>
            <div id="data2">
                    CASE 2<br>
                    <hr size="2" width="50px" color="#111" align="left"/>
                    <div class="title">title2<br>DESIGN</div>
                    <div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
            </div>

            <div id="A">
            A
            </div>
            <div class="line"></div>
            <div id="data3">
                    CASE 3<br>
                    <hr size="2" width="50px" color="#111" align="left"/>
                    <div class="title">title3<br>DESIGN</div>
                    <div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
            </div>


            <div id="X">
            X
            </div>
            <div class="line"></div>
            <div id="data4">
                    CASE 4<br>
                    <hr size="2" width="50px" color="#111" align="left"/>
                    <div class="title">title4<br>DESIGN</div>
                    <div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
            </div>
        </div>
    </div>
            <div id="navigation">
                <a href="#" id="circle1"></a>
                <a href="#" id="circle2"></a>
                <a href="#" id="circle3"></a>
                <a href="#" id="circle4"></a>
            </div>
            <script type="text/javascript">
    var  l1=$("#F");
    var  l2=$("#T");
    var  l3=$("#A");
    var  l4=$("#X");

    var layer=$("#main");

    layer.mousemove(function(e){
        var valueX=(e.pageX * -1 / 40);
        l1.css({'background-position':(valueX-200)+' '+ 0});
        l2.css({'background-position':(valueX)+' '+ 0});
        l3.css({'background-position':(valueX-200)+' '+ 0});
        l4.css({'background-position':(valueX+600)+' '+ 0});
    });


</script>
</body>



</html>
body{
    margin:0px;
    padding:0px;
}

#main{
    height: 100vh;
    width:100%;
    background-color:#03A9F4;
    overflow: hidden;
}

#slider{
    position: relative;
    width: 400%;
    margin: 0px;
    left: 5%;
}

#F, #T, #A, #X{
    width: 25%;
    font-size: 20cm;
    font-family: serif;
    line-height: 16.5cm;
    background-image: url(00012.jpg);
    background-position: -200px 0px; /* addd if requied*/
    background-size: cover;
    background-attachment: fixed;
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
    float: left;

}

#T{
    background-image: url(00001.jpg);
    background-position: 0px 0px;
}

#A{
    background-image: url(00008.jpg);
    background-position: -200px 0px;
}

#X{
    background-image: url(00004.jpg);
    background-position: 600px 0px;
}



#data,#data2,#data3,#data4{
    width: 350px;
    font-family: arial;
    font-size: 14px;
    color: #111;
    line-height: 35px;
    position: fixed;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
}


#data2{
    left: 40%;
        display:none;
}

#data2 .info .title{
    display:none;
}


#data3{
    left: 70%;
        display:none;
}

#data3 .info .title{
    display:none;
}

#data4{
    left: 40%;
        display:none;
}


#data4 .info .title{
    display:none;
}

.title{
    margin-top: 5px;
    font-size: 35px;
    font-family: serif;
}

.info{
    width: 350px;
    margin-top: 5px;
    font-family: arial;
    font-size: 12px;
    line-height: 25px;
    text-align: justify;
}

.line{
    height: 80%;
    width: 2px;
    position: fixed;
    top: 15%;
    left: 60%;
    background: linear-gradient(#111 0%,#03A9F4 90%);
}

hr{
    margin: 0px;
    padding: 0px;
    margin-top: -6px;
}


#navigation{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

a{
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #111;
    border-radius: 50%;
    outline: none;
    border: 2px solid #111;
    transition: all .5s;
}
JQUERY Main.js

$(document).ready(function() {
    $("a:nth-child(1)").css("background-color","white");

    $("#circle1").click(function(){
        $("#slider").animate({'left':'5%'},500);
        $("#data").fadeIn(700);
        $("#data2,#data3,#data4").fadeOut(500);
        $(".line").animate({'left':'60%'});
        $("a:nth-child(1)").css("background-color","white");
        $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black");
    });

    $("#circle2").click(function(){
        $("#slider").animate({'left':'-45%'},500);
        $("#data2").fadeIn(700);
        $("#data,#data3,#data4").fadeOut(500);
        $(".line").animate({'left':'25%'});
        $("a:nth-child(2)").css("background-color","white");
        $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black");
    });

    $("#circle3").click(function(){
        $("#slider").animate({'left':'-190%'},500);
        $("#data3").fadeIn(700);
        $("#data,#data2,#data4").fadeOut(500);
        $(".line").animate({'left':'55%'});
        $("a:nth-child(3)").css("background-color","white");
        $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black");
    });

    $("#circle4").click(function(){
        $("#slider").animate({'left':'-245%'},500);
        $("#data4").fadeIn(700);
        $("#data,#data2,#data3").fadeOut(500);
        $(".line").animate({'left':'25%'});
        $("a:nth-child(4)").css("background-color","white");
        $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black");
    });
});

 試したこと

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
のバージョンを最新に変更。しかし効果なし

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • turbgraphics200

    2018/01/28 11:08

    ナビゲーションクリック時のコードが書かれていません。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/01/28 18:29

    申し訳ありません。 jsファイルを追加しましたので可能でしたら解決お願いします。

    キャンセル

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

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

  • JavaScript

    20880questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11813questions

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

  • jQuery

    8320questions

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

  • CSS

    7731questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。