Parallax fare efekti olmuyor

Dorukkfy12

Hectopat
Katılım
9 Eylül 2017
Mesajlar
1
Daha fazla  
Cinsiyet
Erkek
Parallax mouse efekti yapmaya çalıştım ama nerede sıkıntı var?
Yardım ederseniz çok sevinirim.

Kodlar:

HTML:

HTML:
<div id="image8" style="position:absolute; overflow:hidden; left:73px; top:357px; width:194px; height:242px; z-index:8"><img src="file:///C:/Users/98KurtLar/Desktop/parallax-master/Hot_Air_Ballons_Media_Militia_0006 (1).png" class="balon2" alt="balon2" title="" border=0 width=194 height=242></div>


<div id="image9" style="position:absolute; overflow:hidden; left:1132px; top:366px; width:183px; height:228px; z-index:9"><img src="file:///C:/Users/98KurtLar/Desktop/parallax-master/Hot_Air_Ballons_Media_Militia_0006 (2).png" class="balon1" alt="balon1" title="" border=0 width=183 height=228></div>


<div id="image10" style="position:absolute; overflow:hidden; left:582px; top:546px; width:181px; height:226px; z-index:10"><img src="file:///C:/Users/98KurtLar/Desktop/parallax-master/Hot_Air_Ballons_Media_Militia_0006.png" class="balon" alt="balon" title="" border=0 width=181 height=226></div>


<div id="image11" style="position:absolute; overflow:hidden; left:1239px; top:147px; width:146px; height:146px; z-index:11"><img src="file:///C:/Users/98KurtLar/Desktop/parallax-master/sun_PNG13434.png" alt="gunes" class="gunes" title="" border=0 width=146 height=146></div>


<div id="image7" style="position:absolute; overflow:hidden; left:0px; top:115px; width:1408px; height:793px; z-index:0"><img src="file:///C:/Users/98KurtLar/Desktop/earth-mountain-range-wallpaper-1920x1080-wallpaper.jpg" class="dag" alt="dag" title="" border=0 width=1408 height=793></div>



CSS:

Kod:
.body {
        padding: 0; margin: 0;
        overflow: hidden;
    }
 
    .dag {
        position: absolute; top: -10%; left: -10%;
        width: 120%; height: 120%;
        z-index: 1;
        font-family: Courier;
    }
   
    .balon {
        position: absolute; top: 0; left: 0;
        width: auto; height: auto;
        z-index: 2;
        opacity: 0.8;
    }
    .balon1 {
        position: absolute; top: 0; left: 0;
        width: auto; height: auto;
        z-index: 2;
        opacity: 0.8;
    }
            .balon2 {
        position: absolute; top: 0; left: 0;
        width: auto; height: auto;
        z-index: 2;
        opacity: 0.8;
            }


Java(js):

Kod:
        <!--/*TweenMax' asıl meseleyi sağlayan  hazır Jquery */-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
 
<script>
        $( ******** ).mousemove( function( e ) {
     
            $( '.dag' ).parallax( -30, e );
            $( '.balon' )      .parallax( 10, e );
            $( '.balon1' )      .parallax( 20, e );
            $( '.balon2' )      .parallax( 70, e );
        });
 
 

        $.fn.parallax = function ( resistance, mouse )
        {
            $el = $( this );
            TweenLite.to( $el, 0.2,
                {
                    x : -(( mouse.clientX - (window.innerWidth/2) ) / resistance ),
                    y : -(( mouse.clientY - (window.innerHeight/2) ) / resistance )
                });
 
        };
 
Son düzenleyen: Moderatör:
Uyarı! Bu konu 7 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Geri
Yukarı