Html hakkında
- Konbuyu başlatan akmed2121
- Başlangıç tarihi
CSS KODLARI:
HTML KODLARI:
JAVASCRİPT KODLARI:
JavaScript
Bunun gibi birşey istiyorsunuz sanırım arka planda resim hareket ediyor (bazı kodlar ** ile gösterilmiş siteden bakabilirsin.)
https://kodblogum.com/web-sitemize-mouse-ile-hareketlilik-katmak-parallax-efekti/
Kod:
*********
body {
padding: 0; margin: 0;
overflow: hidden;
}
.arkaplan {
position: absolute; top: -10%; left: -10%;
width: 120%; height: 120%;
z-index: 1; /*Görselin katman numarası 1*/
font-family: Courier;
}
.bulut {
position: absolute; top: 0; left: 0;
width: auto; height: auto;
z-index: 2; /*Görselin katman numarası 2 yanı 1'in üstüne gelecek demek*/
opacity: 0.8;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*********
body {
padding: 0; margin: 0;
overflow: hidden;
}
.arkaplan {
position: absolute; top: -10%; left: -10%;
width: 120%; height: 120%;
z-index: 1; /*Görselin katman numarası 1*/
font-family: Courier;
}
.bulut {
position: absolute; top: 0; left: 0;
width: auto; height: auto;
z-index: 2; /*Görselin katman numarası 2 yanı 1'in üstüne gelecek demek*/
opacity: 0.8;
}
</style>
Kod:
<body>
<img src="images/background.jpg" alt="New York" class="arkaplan">
<img src="images/1.png" alt="Clouds" class="bulut bulut1">
<img src="images/2.png" alt="Clouds" class="bulut bulut2">
<img src="images/3.png" alt="Clouds" class="bulut bulut3">
</body>
1
2
3
4
5
6
7
8
<body>
<img src="images/background.jpg" alt="New York" class="arkaplan">
<img src="images/1.png" alt="Clouds" class="bulut bulut1">
<img src="images/2.png" alt="Clouds" class="bulut bulut2">
<img src="images/3.png" alt="Clouds" class="bulut bulut3">
</body>JavaScript
Kod:
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--/*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 ) {
/*-30 10 gibi değerle farenin aksi yönünde giden görselin gitme mesafesini belirler. */
$( '.arkaplan' ).parallax( -30, e );
$( '.bulut1' ) .parallax( 10, e );
$( '.bulut2' ) .parallax( 20, e );
$( '.bulut3' ) .parallax( 70, e );
});
/*Aşağıdaki değerlerle oynamayın mousen kordinatları ve zıt yönde hareket ettirmeyle alakalı*/
$.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 )
});
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--/*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 ) {
/*-30 10 gibi değerle farenin aksi yönünde giden görselin gitme mesafesini belirler. */
$( '.arkaplan' ).parallax( -30, e );
$( '.bulut1' ) .parallax( 10, e );
$( '.bulut2' ) .parallax( 20, e );
$( '.bulut3' ) .parallax( 70, e );
});
/*Aşağıdaki değerlerle oynamayın mousen kordinatları ve zıt yönde hareket ettirmeyle alakalı*/
$.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 )
});
};
</script>Bunun gibi birşey istiyorsunuz sanırım arka planda resim hareket ediyor (bazı kodlar ** ile gösterilmiş siteden bakabilirsin.)
https://kodblogum.com/web-sitemize-mouse-ile-hareketlilik-katmak-parallax-efekti/
