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.

Yeni konular

Geri
Yukarı