|
@@ -2,53 +2,112 @@
|
|
|
|
|
|
|
|
|
|
|
|
+$('.designer-bannerslider').slick({
|
|
|
+ slidesToShow: 1, //預設 1 幻燈片顯示幾張
|
|
|
+ slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
|
|
|
+ arrows: true, // 預設 true 左右箭頭是否顯示
|
|
|
+ dots: true,
|
|
|
+ prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px; transform: rotate(180deg);" src="./img/sec04/arrow-left.png" alt=""><div></button>',
|
|
|
+ nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+$('.designer-bannerslider-mb').slick({
|
|
|
+ slidesToShow: 1, //預設 1 幻燈片顯示幾張
|
|
|
+ slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
|
|
|
+ arrows: false, // 預設 true 左右箭頭是否顯示
|
|
|
+ dots: true,
|
|
|
+ prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px; transform: rotate(180deg);" src="./img/sec04/arrow-left.png" alt=""><div></button>',
|
|
|
+ nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
$('designer-nav').hide();
|
|
|
|
|
|
$(".item-down").click(function () {
|
|
|
$('.designer-nav').slideToggle();
|
|
|
});
|
|
|
|
|
|
+$(".playbutton").click(function () {
|
|
|
+ var videosrc = $(this).data("info");
|
|
|
+ $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
|
|
|
+});
|
|
|
+
|
|
|
+$(".btn-close").click(function () {
|
|
|
+ $('.youtube-video').attr('src', ``);
|
|
|
+});
|
|
|
+
|
|
|
+$('#yt-video').on('hidden.bs.modal', function () {
|
|
|
+ $('.youtube-video').attr('src', ``);
|
|
|
+});
|
|
|
+
|
|
|
+$('#yt-video-mb').on('hidden.bs.modal', function () {
|
|
|
+ $('.youtube-video').attr('src', ``);
|
|
|
+});
|
|
|
+
|
|
|
+let videoId = ['XlPxHa9BcKY', 'xc6SNElGDIM', 'xc6SNElGDIM'];
|
|
|
|
|
|
+var index=0;
|
|
|
|
|
|
-$("*").each(function (index, element) {
|
|
|
- // 此元素被點選後執行
|
|
|
- $(this).click(function (e) {
|
|
|
- // 取得被點選元素的屬性:data-gt-target
|
|
|
- var target = $(this).attr("data-gt-target");
|
|
|
- var duration = $(this).attr("data-gt-duration");
|
|
|
- var offset = $(this).attr("data-gt-offset");
|
|
|
+function getSlideNNext(){
|
|
|
+ index++
|
|
|
+ if (index == videoId.length) index = 0;
|
|
|
+ console.log(videoId[index]);
|
|
|
|
|
|
- // JS 語法:判斷式
|
|
|
- // if (條件) {程式區塊}
|
|
|
- // 當條件成立,會執行程式區塊
|
|
|
+
|
|
|
+};
|
|
|
|
|
|
- // 如果 目標有資料 才會執行 { } 內的程式
|
|
|
- // 避免出現 undefine (未定義 - 不存在的資料)
|
|
|
- if (target) {
|
|
|
- //console.log("目標:" + target);
|
|
|
- //console.log("時間:" + duration);
|
|
|
- //console.log("位移:" + offset);
|
|
|
+$(document).on("click", ".slick-next", function (event) {
|
|
|
+
|
|
|
+ getSlideNNext();
|
|
|
+ $('.youtube-video2').each(function() {
|
|
|
+ this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
|
|
|
+ });
|
|
|
+});
|
|
|
|
|
|
- // 上方位置 = 目標區塊.位移().上方位置
|
|
|
- var top = $(target).offset().top;
|
|
|
- //console.log("要前往元素的上方位置:" + top);
|
|
|
+function getSlidePrev(){
|
|
|
+ index--
|
|
|
+ if (index == -1) index = videoId.length - 1;
|
|
|
+ console.log(videoId[index]);
|
|
|
|
|
|
- // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
|
|
|
- // parseInt() 將文字轉為數字
|
|
|
+};
|
|
|
|
|
|
- $("html").stop().animate({
|
|
|
- scrollTop: top - offset
|
|
|
- }, parseInt(duration));
|
|
|
- }
|
|
|
+$(document).on("click", ".slick-prev", function (event) {
|
|
|
+
|
|
|
+ getSlidePrev();
|
|
|
+ $('.youtube-video2').each(function() {
|
|
|
+ this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
|
|
|
});
|
|
|
+
|
|
|
});
|
|
|
|
|
|
-// 避免動畫與使用者滾輪衝突
|
|
|
-// html 在滾動滾輪時 停止 html 所有效果
|
|
|
-$("html").on("mousewheel", function () {
|
|
|
- $("html").stop();
|
|
|
+$('.designer-bannerslider2').slick({
|
|
|
+ slidesToShow: 1, //預設 1 幻燈片顯示幾張
|
|
|
+ slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
|
|
|
+ arrows: true, // 預設 true 左右箭頭是否顯示
|
|
|
+ dots: true,
|
|
|
+ prevArrow: '<button type="button" class="slick-prev""><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px; transform: rotate(180deg);" src="./img/sec04/arrow-left.png" alt=""><div></button>',
|
|
|
+ nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+$(".play-mb").click(function () {
|
|
|
+ // $('.modal-box-mb').css('width','100%');
|
|
|
+ var videosrc = $(this).data("info");
|
|
|
+ var slidenumber = $(this).data("slide");
|
|
|
+
|
|
|
+ console.log(slidenumber);
|
|
|
+ console.log(videosrc);
|
|
|
+
|
|
|
+ $('.designer-bannerslider2').slick('slickGoTo',0);
|
|
|
});
|
|
|
|
|
|
+
|
|
|
// 手機選單彈跳視窗
|
|
|
$("#menu-box2").hide();
|
|
|
$("#menu-box").hide();
|
|
@@ -66,62 +125,8 @@ $(".link").click(function () {
|
|
|
});
|
|
|
});
|
|
|
|
|
|
-// 文字動畫
|
|
|
-const sec = document.querySelectorAll('.sec');
|
|
|
-console.log(sec.length);
|
|
|
-const title = document.querySelectorAll('.title');
|
|
|
-const cover = document.querySelectorAll('.cover');
|
|
|
-const test_content = document.querySelectorAll('.test_content');
|
|
|
-
|
|
|
-function checkSlide() {
|
|
|
- console.log('pass');
|
|
|
- sec.forEach((block, i) => {
|
|
|
- // half way through the image
|
|
|
- //const test = document.querySelector('.test');
|
|
|
- const slideInAt = window.scrollY + window.innerHeight;
|
|
|
- console.log(slideInAt);
|
|
|
- //console.log(test.offsetTop);
|
|
|
- // bottom of the image
|
|
|
- const isHalfShown = slideInAt > block.offsetTop;
|
|
|
- if (isHalfShown) {
|
|
|
- console.log('active');
|
|
|
- title[i].style.bottom = '0em';
|
|
|
- //document.querySelector('.title').style.bottom = '0em';
|
|
|
- test_content[i].classList.add('fadein');
|
|
|
- cover[i].classList.add('slidein');
|
|
|
- //test.firstElementChild.classList.add('fadein');
|
|
|
-
|
|
|
- //test_content[i].fadeIn(1500);
|
|
|
-
|
|
|
- // $('.test_content').fadeIn(1500);
|
|
|
- }
|
|
|
- })
|
|
|
-};
|
|
|
-window.addEventListener('scroll', checkSlide);
|
|
|
-window.addEventListener('scroll', sec03PlantImg);
|
|
|
-window.addEventListener('scroll', sec03BottomImg);
|
|
|
-
|
|
|
-console.log(document.querySelector('.sec03-big').offsetTop);
|
|
|
-
|
|
|
-function sec03PlantImg() {
|
|
|
- const slideInAt = window.scrollY + window.innerHeight;
|
|
|
- const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec03_plant').offsetTop;
|
|
|
- const isHalfShown = slideInAt > toTop ;
|
|
|
- console.log(toTop);
|
|
|
- if (isHalfShown) {
|
|
|
- document.querySelector('.sec03_plant .p_cover').classList.add('slidein');
|
|
|
- }
|
|
|
-};
|
|
|
|
|
|
-function sec03BottomImg() {
|
|
|
- const slideInAt = window.scrollY + window.innerHeight;
|
|
|
- const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec_bottom').offsetTop + 300;
|
|
|
- const isHalfShown = slideInAt > toTop ;
|
|
|
- console.log(toTop);
|
|
|
- if (isHalfShown) {
|
|
|
- document.querySelector('.sec_bottom .b_cover').classList.add('slidein');
|
|
|
- }
|
|
|
-};
|
|
|
+
|
|
|
// var flagX = 0;
|
|
|
// var flagXM = 0;
|
|
|
|
|
@@ -144,25 +149,3 @@ function sec03BottomImg() {
|
|
|
// $("#carousel-example-generic").carousel(direction);
|
|
|
// }
|
|
|
|
|
|
-var scene = document.getElementById('scene');
|
|
|
-var parallaxInstance = new Parallax(scene);
|
|
|
-
|
|
|
-var scene1 = document.getElementById('scene1');
|
|
|
-var parallaxInstance = new Parallax(scene1);
|
|
|
-
|
|
|
-var scene2 = document.getElementById('scene2');
|
|
|
-var parallaxInstance = new Parallax(scene2);
|
|
|
-
|
|
|
-$(window).bind('scroll',function(e){
|
|
|
- parallaxScroll();
|
|
|
- });
|
|
|
-
|
|
|
- function parallaxScroll(){
|
|
|
- var scrolled = $(window).scrollTop();
|
|
|
- $('.object178').css('top',(200-(scrolled*.2))+'px');
|
|
|
- $('.object188').css('top',(150-(scrolled*.1))+'px');
|
|
|
- $('.object177').css('top',(600-(scrolled*.25))+'px');
|
|
|
- $('.object182').css('top',(400-(scrolled*.2))+'px');
|
|
|
- $('.object241').css('top',(600-(scrolled*.1))+'px');
|
|
|
- $('.object242').css('top',(700-(scrolled*.1))+'px');
|
|
|
-}
|