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:
CSS:
Java(js):
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: