jquery css3 menyedari kesan kelopak jatuh rawak pada kemahiran background_javascript halaman web-tutorial js-php.cn

jquery css3 menyedari kesan kelopak jatuh rawak pada kemahiran background_javascript halaman web

WBOY

Lepaskan： 2016-05-16 15:44:48

asal

2714 orang telah melayarinya

Realisasi kesan bunga terapung - rendering:

Lihat demo Muat turun kod sumber

Keperluan:

Jquery,,, anda boleh tahu ini hanya dengan melihat tajuk

jQuery Transit juga mempunyai perkara ini

http://github.com/rstacruz/jquery.transit

sambungan jquery untuk beberapa kesan

Kesan bunga terapung adalah sedikit lebih rumit. Ia memerlukan sejumlah kod JavaScript dan dicapai melalui gabungan JS dan CSS3. Memerhatikan kesan di sebelah kanan, anda boleh memecahkan secara kasar pelaksanaan bunga terapung

Piaohua lebih tinggi daripada tahap watak
Terdapat banyak bunga terapung
Bunga terapung akan bergerak dalam trajektori tertentu
Bunga terapung mempunyai kesan kecerunan
Bunga terapung mempunyai kesan berputar
Bunga akan hilang apabila ia jatuh ke tanah

Gabungan JS dan CSS3 yang digunakan di sini melaksanakan bahagian putaran Pertama sekali, dari sudut reka letak, bunga terapung adalah lebih tinggi daripada semua elemen dalaman, jadi susun atur mestilah pada tahap yang sama dengan halaman li.

Prinsip pelaksanaan:

Panggil kod JS melalui pemasa untuk mencipta nod kepingan salji secara berterusan dan dinamik, pilih gambar secara rawak sebagai latar belakangnya, tetapkan tiga atribut gaya awal atas, kiri dan kelegapan, dan laksanakan animasi ketiga-tiga atribut ini melalui perubahan animasi. Keseluruhan prinsip sebenarnya sangat mudah, terutamanya melibatkan beberapa butiran: seperti penciptaan unsur, rawak imej, pemprosesan rawak kiri dan kelegapan pada permulaan, pengiraan nilai akhir, dsb.

Proses pelaksanaan:

getImagesName memilih 6 gambar secara rawak, snowflakeURl mentakrifkan julat alamat

createSnowBox mencipta nod elemen kepingan salji dan menambah gaya snowRoll, yang merupakan pelaksanaan rangka utama putaran

Tetapkan pemasa selama 200ms untuk menjana objek kepingan salji secara berterusan, hitung nilai awal bagi tiga atribut, cipta elemen kepingan salji melalui createSnowBox dan lampirkan nilai awal, kemudian laksanakan peralihan untuk melampirkan nilai akhir, dan laksanakan animasi

Selepas animasi tamat, laksanakan $(this).remove() untuk memadam objek ini

Kemudian mudahkan kod, kerana saya hanya mahukan kesan bunga terapung

 <div id='content'>
 <!-- 飘花 -->
 <div id="snowflake"></div>
 </div>

Salin selepas log masuk

Dapatkan lebar dan tinggi #kandungan luar

Kemudian lakukan kesan di dalam #snowflake

#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }

Salin selepas log masuk

Kemudian css adalah seperti ini, atas: 42px adalah kerana ketinggian navigasi saya

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
 @-webkit-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -webkit-transform: rotate(1080deg);
}
 100% {
 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
 @-moz-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -moz-transform: rotate(1080deg);
}
 100% {
 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}

Salin selepas log masuk

Berikut ialah kesan khas css3 seperti menambah putaran pada bunga terapung

<script type="text/javascript">
$(function() {

 var snowflakeURl = [
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'
 ] //js设置数组存储6张花瓣的图片
　　
 var container = $("#content");
 visualWidth = container.width();
 visualHeight = container.height();
　　//获取content的宽高
 ///////
 //飘雪花 //
 ///////
 function snowflake() {
 // 雪花容器
 var $flakeContainer = $('#snowflake');
　　　　　　
 // 随机六张图
 function getImagesName() {
 return snowflakeURl[[Math.floor(Math.random() * 6)]];
 }
 // 创建一个雪花元素
 function createSnowBox() {
 var url = getImagesName();
 return $('<div class="snowbox" />').css({
 'width': 41,
 'height': 41,
 'position': 'absolute',
 'backgroundSize': 'cover',
 'zIndex': 100000,
 'top': '-41px',
 'backgroundImage': 'url(' + url + ')'
 }).addClass('snowRoll');
 }
 // 开始飘花
 setInterval(function() {
 // 运动的轨迹
 var startPositionLeft = Math.random() * visualWidth - 100,
 startOpacity = 1,
 endPositionTop = visualHeight - 40,
 endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
 duration = visualHeight * 10 + Math.random() * 5000;

 // 随机透明度，不小于0.5
 var randomStart = Math.random();
 randomStart = randomStart < 0.5 &#63; startOpacity : randomStart;
 // 创建一个雪花
 var $flake = createSnowBox();
 // 设计起点位置
 $flake.css({
 left: startPositionLeft,
 opacity : randomStart
 });
 // 加入到容器
 $flakeContainer.append($flake);
 // 开始执行动画
 $flake.transition({
 top: endPositionTop,
 left: endPositionLeft,
 opacity: 0.7
 }, duration, 'ease-out', function() {
 $(this).remove() //结束后删除
 });
 
 }, 200);
 } 　　
 snowflake()
　　　//执行函数

})
</script>

Salin selepas log masuk

Kod di atas ialah cara artikel ini menggunakan jquery untuk mencapai kesan kelopak jatuh rawak pada latar belakang halaman web saya harap anda menyukainya.