Add Homepage Banner Wave Animation

footer.php

@@ -95,6 +95,27 @@
 <script type="text/javascript"><?php echo akina_option('site_statistics'); ?></script>
 </div>
 <?php } ?>
+
+<!-- 波浪动画 -->
+<?php if (akina_option('bannerwave') != '0'){ ?>
+<script>
+	$(function () {
+		//底部波浪动画
+		function bannerwave1() {
+			$("#banner_wave_1").css({"left": "-236px"}).animate({"left": "-1233px"}, 25000, 'linear', bannerwave1);
+		}
+		function bannerwave2() {
+			$("#banner_wave_2").css({"left": "0px"}).animate({"left": "-1009px"}, 60000, 'linear', bannerwave2);
+		}
+		//循环播放
+		if (screen && screen.width > 800) {
+		bannerwave1();
+		bannerwave2();
+		}
+	});
+</script>
+<?php } ?>
+
 <div class="changeSkin-gear no-select" style="bottom: -999px;">
     <div class="keys">
         <span id="open-skinMenu">

js/sakura-app.js

@@ -1237,6 +1237,9 @@ var home = location.href,
             $('.focusinfo').css({
                 "top": "-999px"
             });
+            $('#banner_wave_hide_transition').addClass('banner_wave_hide');
+   //         $('#banner_wave_1').addClass('banner_wave_hide');
+			// $('#banner_wave_2').addClass('banner_wave_hide');
             try {
                 for (var i = 0; i < ap.length; i++) {
                     try {
@@ -1254,7 +1257,10 @@ var home = location.href,
             $('.focusinfo').css({
                 "top": "49.3%"
             });
-            s.pause();
+            $('#banner_wave_hide_transition').removeClass('banner_wave_hide');
+   //         $('#banner_wave_1').removeClass('banner_wave_hide');
+			// $('#banner_wave_2').removeClass('banner_wave_hide');
+			s.pause();
         },
         liveplay: function () {
             if (s.oncanplay != undefined && $('.haslive').length > 0) {
@@ -1310,6 +1316,7 @@ var home = location.href,
                     $('.focusinfo').css({
                         "top": "49.3%"
                     });
+                    $('#banner_wave_hide_transition').removeClass('banner_wave_hide');
                 }
             });
             $('#video-add').on('click', function () {

layouts/imgbox.php

@@ -4,6 +4,12 @@
 
 ?>
 <figure id="centerbg" class="centerbg">
+	<?php if (akina_option('bannerwave') != '0'){ ?>
+    	<div id="banner_wave_hide_transition">
+    		<div id="banner_wave_1"></div>
+    		<div id="banner_wave_2"></div>
+    	</div>
+	<?php } ?>
 <?php if ( !akina_option('focus_infos') ){ ?>
 	<div class="focusinfo">
         <?php if (akina_option('focus_logo_text')):?>

options.php

@@ -927,6 +927,13 @@ function optionsframework_options() {
         )
 	);
 
+	$options[] = array(
+		'name' => __('开启波浪动画', 'options_framework_theme'),
+		'desc' => __('默认关闭，勾选开启', 'options_framework_theme'),
+		'id' => 'bannerwave',
+		'std' => '0',
+		'type' => 'checkbox');	
+
 	$options[] = array(
 		'name' => __('Footer float music player', 'sakura'),/*页脚悬浮播放器*/
 		'desc' => __('If you don\'t need the player just leave it blank.Fill in the "song list" ID of Netease Cloud Music, eg: https://music.163.com/#/playlist?id=2288037900 The ID is 2288037900', 'sakura'),/*如果不需要播放器留空即可。填写网易云音乐的「歌单」ID，eg：https://music.163.com/#/playlist?id=2288037900的ID是2288037900*/
@@ -947,7 +954,7 @@ function optionsframework_options() {
 		'id' => 'poi_pjax',
 		'std' => '0',
 		'type' => 'checkbox');
-    
+
     $options[] = array(
 		'name' => __('Enable NProgress progress bar', 'sakura'),/*开启NProgress加载进度条*/
 		'desc' => __('Default off, check on', 'sakura'),/*默认不开启，勾选开启*/

style.css

@@ -8588,3 +8588,73 @@ h1[id*=toc-head]::before,h2[id*=toc-head]::before,h3[id*=toc-head]::before,h4[id
     width: 100%;
     height: 100%;
 }
+
+.lazyload {
+	-webkit-filter: blur(0px);
+	-moz-filter: blur(0px);
+	-ms-filter: blur(0px);
+	filter: blur(0px);
+	-webkit-transition: .3s -webkit-filter linear;
+	-moz-transition: .3s -moz-filter linear;
+	-moz-transition: .3s filter linear;
+	-ms-transition: .3s -ms-filter linear;
+	-o-transition: .3s -o-filter linear;
+	transition: .3s filter linear, .3s -webkit-filter linear
+}
+
+.lazyload[src*="#lazyload-blur"],
+.lazyload[style*="#lazyload-blur"] {
+	-webkit-filter: blur(10px);
+	-moz-filter: blur(10px);
+	-ms-filter: blur(10px);
+	filter: blur(10px)
+}
+
+
+#banner_wave_1 {
+    width: auto;
+    height: 65px;
+    background: url("images/wave1.png") repeat-x;
+    _filter: alpha(opacity=80);
+    position: absolute;
+    bottom: 0px;
+    width: 400%;
+    left: -236px;
+    z-index: 5;
+}
+
+
+#banner_wave_2 {
+    width: auto;
+    height: 80px;
+    background: url("images/wave2.png") repeat-x;
+    _filter: alpha(opacity=80);
+    position: absolute;
+    bottom: 0px;
+    width: 400%;
+    left: 0px;
+    z-index: 4;
+}
+
+.banner_wave_hide,
+.banner_wave_hide_fit_skin {
+	opacity: 0 !important;
+	bottom: -999px !important;
+}
+
+@media (max-width:860px) {
+
+	#banner_wave_1,
+	#banner_wave_2 {
+		display: none
+	}
+}
+
+#banner_wave_hide_transition {
+	transition-duration: .4s,.4s;
+    position: absolute;
+    bottom: 0px;
+    width: 400%;
+    left: 0px;
+    z-index: 3;
+}