افکت نمایش باکس [بایگانی]

imdeveloper

چهارشنبه 23 تیر 1395, 20:31 عصر

سلام
من میخوام باکسی که دارم این امکان رو داشته باشه که وقتی صفحه رو اسکرول میکنم اون باکس هم آهسته بیاد بالا یعنی یه حالت انیمیشنی مانند داشته باشه
ممنون میشم راهنمایی کنید!

imdeveloper

دوشنبه 28 تیر 1395, 11:12 صبح

ممنون میشم راهنمایی کنید!!

Moien Tajik

دوشنبه 28 تیر 1395, 14:52 عصر

http://banago.github.io/Stickr.js/

imdeveloper

سه شنبه 29 تیر 1395, 01:38 صبح

متاسفانه اونچیزی که میخواستم نبود :(
میخوام مثل سایت اپل باشه!!

Moien Tajik

سه شنبه 29 تیر 1395, 11:38 صبح

فکر میکنم منظورتون Parallax هستش که با فریمورک هایی مثل Stellar.js ساخته میشن .
نمونه : http://www.mightydeals.com/deal/parallax-templates.html?ref=psdvibeparallaxthemes
آموزش : http://webcity.ir/training-coding-and-design-techniques-parallax/

javad dehnavi

سه شنبه 29 تیر 1395, 20:44 عصر

سلام!

<html>
<head>

</head>
<body onscroll="test();">
<div id="box"></div>
<style>
body{
height: 500vh;
}
#box{
top: 10%;
left: 10%;
width: 10%;
height: 10%;
background: red;
position: absolute;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
}
</style>
<script>
function test(){
document.getElementById("box").style.top=document.body.scrollTop + 50;
}
</script>
</body>
</html>

مهران موسوی

چهارشنبه 30 تیر 1395, 02:26 صبح

بسیار خوب بزارید این کار رو با هم انجامش بدیم :متفکر:

کدهای HTML

<div class="item"> <div class="block"></div> <div class="info"> My info </div></div>

خب حالا CSS های ما

.item {
background: #ccc;
width: 200px;
height: 300px;
}
.block {
height: 50px;
background: red;
width: 100%;
}
.info{
background: green;
height: 20px;
width: 100%;
}

و در نهایت JavaScript ما :

jQuery(document).ready(function($) {
$(".item").mouseout(function(){
$(this).find('.info').css('marginTop', '0');
}).mouseover(function(){
$(this).find('.info').animate({ marginTop: '-50px', opacity: 0.5 }, 1000);
});
});

خب حالا بریم نموه عملی این کدها رو تماشا کنیم با هم :

http://jsfiddle.net/kX7b6/1

موفق باشید دوست عزیز

میتوانید من را در linked-in دنبال کنید. اینجا (https://www.linkedin.com/in/mehran-mousavi)