Home Explore Help
Register Sign In
choozmo
/
hhh-home-pc
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

close banner

huaisianhuang 3 years ago
parent
f38cc342d2
commit
82be469fd7
5 changed files with 96 additions and 4 deletions
Split View Show Diff Stats
  1. 47 1
      css/style.css
  2. 0 0
      css/style.css.map
  3. 37 2
      css/style.scss
  4. 4 0
      index.html
  5. 8 1
      js/index.js

+ 47 - 1
css/style.css
View File 

@@ -2,6 +2,40 @@ body {
 
   font-family: 'Helvetica Neue';
 
 }
 
 
+.sec-00 {
 
+  height: 250px;
 
+  -webkit-transition-property: height;
 
+  transition-property: height;
 
+  -webkit-transition-duration: 500ms;
 
+          transition-duration: 500ms;
 
+}
 
+
 
+.sec-00__close {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 20px;
 
+  width: 50px;
 
+  height: 30px;
 
+  background-color: rgba(255, 255, 255, 0.66);
 
+  border-radius: 0 0 50px 50px;
 
+  color: #888;
 
+  border: none;
 
+  outline: none;
 
+  font-size: 11px;
 
+  -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+          box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+  line-height: 12px;
 
+}
 
+
 
+.sec-00.bannerClose {
 
+  height: 0;
 
+  overflow: hidden;
 
+  -webkit-transition-property: height;
 
+  transition-property: height;
 
+  -webkit-transition-duration: 500ms;
 
+          transition-duration: 500ms;
 
+}
 
+
 
 .sec-00 .container-fluid {
 
   background-color: #cacaca;
 
   height: 250px;
 
@@ -34,6 +68,18 @@ body {
 
   }
 
 }
 
 
+@-webkit-keyframes slidein {
 
+  100% {
 
+    height: 0px;
 
+  }
 
+}
 
+
 
+@keyframes slidein {
 
+  100% {
 
+    height: 0px;
 
+  }
 
+}
 
+
 
 .navbar {
 
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 
   -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 
@@ -435,7 +481,7 @@ body {
 
 }
 
 
 .navbar-main.sticky + .sec-02 {
 
-  padding-top: 55px;
 
+  padding-top: 53.5px;
 
 }
 
 
 .sec-02__slider {

File diff suppressed because it is too large
+ 0 - 0
css/style.css.map


+ 37 - 2
css/style.scss
View File 

@@ -3,6 +3,30 @@ body {
 
 }
 
 
 .sec-00 {
 
+    height: 250px;
 
+    transition-property: height;
 
+    transition-duration: 500ms;
 
+    &__close {
 
+        position: absolute;
 
+        top: 0;
 
+        right: 20px;
 
+        width: 50px;
 
+        height: 30px;
 
+        background-color: hsla(0,0%,100%,.66);
 
+        border-radius: 0 0 50px 50px;
 
+        color: #888;
 
+        border: none;
 
+        outline: none;
 
+        font-size: 11px;
 
+        box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+        line-height: 12px;
 
+    }
 
+    &.bannerClose {
 
+        height: 0;
 
+        overflow: hidden;
 
+        transition-property: height;
 
+        transition-duration: 500ms;
 
+    }
 
     .container-fluid {
 
         background-color: rgb(202, 202, 202);
 
         height: 250px;
 
@@ -28,6 +52,18 @@ body {
 
     }
 
 }
 
 
+@-webkit-keyframes slidein {
 
+    100% {
 
+        height: 0px;
 
+      }
 
+}
 
+
 
+@keyframes slidein {
 
+    100% {
 
+        height: 0px;
 
+    }
 
+}
 
+
 
 .navbar {
 
     box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
 
     -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
 
@@ -349,7 +385,6 @@ body {
 
     }
 
 }
 
 
-
 
 .navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
 
     opacity: 1;
 
 }
 
@@ -360,7 +395,7 @@ body {
 
 }
 
 
 .navbar-main.sticky + .sec-02 {
 
-    padding-top: 55px;
 
+    padding-top: 53.5px;
 
 }
 
 
 .sec-02 {

+ 4 - 0
index.html
View File 

@@ -43,6 +43,10 @@
 
 <body>
 
     <div style="overflow-x:hidden;">
 
         <section class="sec-00 w-100">
 
+            <button class="text-center sec-00__close">
 
+              <i class="fas fa-chevron-up" style="transform:translateY(-2px);"></i>
 
+              <p>隱藏</p>
 
+            </button>
 
             <div class="container-fluid" style="padding:0;margin:0;">
 
                 <div class="sec-00__slider">

+ 8 - 1
js/index.js
View File 

@@ -343,12 +343,12 @@ function tab2 () {
 
 
 tab2();
 
 
+let sticky = 250;
 
 window.addEventListener('scroll', fixedOnScroll);
 
     
 const navbar = document.querySelector('.navbar-main');
 
     
 function fixedOnScroll() {
 
-    const sticky = 250;
 
     if(window.pageYOffset >= sticky){
 
         navbar.classList.add('sticky');
 
     } else {
 
@@ -374,6 +374,13 @@ $('.navbar-search img').click(function(){
 
     $('.navbar-search .dropbox').toggleClass('open');
 
 });
 
 
+$('.sec-00__close').click(function(){
 
+    $(this).css('display', 'none');
 
+    $('.sec-00').addClass('bannerClose');
 
+    //$('.sec-02').css('padding-top', '53px');
 
+    sticky = 0;
 
+});
 
+
 
 // search
 
 
 const searchBtn = document.querySelector('.dropbox__searchBar__submit');

Some files were not shown because too many files changed in this diff