Created
October 29, 2014 16:56
-
-
Save naeluh/8edb943b5ec79be170ec to your computer and use it in GitHub Desktop.
Template OLE App working touch slider for nhm // source http://jsbin.com/mujuc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="working touch slider for nhm" /> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <title>Template OLE App</title> | |
| <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <meta name="apple-mobile-web-app-title" content="Posture Survey" /> | |
| <style id="jsbin-css"> | |
| .animate { | |
| -webkit-transition: -webkit-transform 200ms ease-out; | |
| transition: transform 200ms ease-out; | |
| } | |
| .textAnimate { | |
| -webkit-transition: -webkit-transform 1500ms ease-out; | |
| transition: transform 1500ms ease-out; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| /* | |
| #slide1{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_one.png'); | |
| } | |
| #slide2{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_two.png'); | |
| } | |
| #slide3{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_three.png'); | |
| } | |
| #slide4{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_four.png'); | |
| } | |
| #slide5{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_five.png'); | |
| } | |
| #slide6{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_one.png'); | |
| } | |
| */ | |
| .slider-wrap { | |
| /*width: 320px;*/ | |
| /* height: 568px;*/ | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| .slider { | |
| width: 100%; | |
| /*height: 100%; | |
| overflow: hidden;*/ | |
| } | |
| .ms-touch.slider { | |
| overflow-x: scroll; | |
| overflow-y: hidden; | |
| -ms-overflow-style: none; | |
| /* Hides the scrollbar. */ | |
| -ms-scroll-chaining: none; | |
| /* Prevents Metro from swiping to the next tab or app. */ | |
| -ms-scroll-snap-type: mandatory; | |
| /* Forces a snap scroll behavior on your images. */ | |
| -ms-scroll-snap-points-x: snapInterval(0%, 100%); | |
| /* Defines the y and x intervals to snap to when scrolling. */ | |
| } | |
| .holder { | |
| /* width: 300%; | |
| max-height: 500px; | |
| height: 100%; | |
| overflow-y: hidden; */ | |
| } | |
| .slide-wrapper { | |
| /* width: 33.333%; */ | |
| float: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .slide { | |
| height: 100%; | |
| position: relative; | |
| } | |
| .text { | |
| color: white; | |
| font-size: 40px; | |
| font-weight: 700; | |
| font-family: sans-serif; | |
| width: 67%; | |
| height: 50%; | |
| overflow: auto; | |
| margin: auto; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 1; | |
| text-shadow: 2px 3px 5px #000; | |
| } | |
| .green { | |
| color: #c0cc2f; | |
| margin:0; | |
| } | |
| .slide img { | |
| position: absolute; | |
| z-index: 0; | |
| /*transform: translatex(-100px);*/ | |
| } | |
| .slide:before { | |
| content: ""; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 40%; | |
| background: -webkit-gradient(linear, left top, left bottom, from(transparent), to('#c0cc2f')); | |
| background: -webkit-linear-gradient(transparent, #c0cc2f); | |
| background: linear-gradient(transparent, #c0cc2f); | |
| } | |
| .slide div { | |
| width: 300px; | |
| height: 500px; | |
| z-index: 0; | |
| } | |
| .frame-indicator-wrap { | |
| padding:10px 0 0; | |
| width:100%; | |
| text-align:center; | |
| position:absolute; | |
| bottom:12px; | |
| z-index: 1; | |
| } | |
| .frame-indicator-wrap span{ | |
| color: #fff; | |
| font-family: sans-serif; | |
| margin-bottom: 1px; | |
| display: inline-block; | |
| font-weight: 700; | |
| text-shadow: 1px 1px 5px #000; | |
| } | |
| #swipe > span:nth-child(2){ | |
| line-height:10px; | |
| font-size:11px ; | |
| } | |
| #frame-indicator li { | |
| background-color: #fff; | |
| border-radius: 5px; | |
| display: inline-block; | |
| height: 10px; | |
| margin: 0 5px; | |
| width: 10px; | |
| box-shadow: 1px 1px 5px #000; | |
| } | |
| #frame-indicator li.selected { | |
| background-color:#c0cc2f | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| @media screen and (orientation:landscape) { | |
| .tablet .frame-indicator-wrap { | |
| padding:80px 0 0; | |
| text-align:center; | |
| width:100% | |
| } | |
| } | |
| @media (max-width:320px) and (max-height:480px) { | |
| .frame-indicator-wrap { | |
| padding-top:10px | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slider-wrap" id="sWrap"> | |
| <div class="slider" id="slider"> | |
| <div class="holder"> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide1"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_one.png"/> | |
| </div> | |
| <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide2"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_two.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide3"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_three.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide4"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_four.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide5"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_five.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide6"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_one.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="frame-indicator-wrap"> | |
| <div id="swipe"> | |
| <span>←</span> | |
| <span>SWIPE</span> | |
| <span>→</span> | |
| </div> | |
| <ul id="frame-indicator"></ul> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| var sWrap = document.querySelector('.slider-wrap'); | |
| var hWrap = document.querySelector('.holder'), | |
| stop, containerWidth, sNum, panSlideNum; | |
| var frameLi = document.querySelectorAll("ul > li")[this.index]; | |
| var frameIndicator = function (numFrames) { | |
| var f = document.getElementById('frame-indicator'); | |
| for (var i = numFrames - 1; i >= 0; i--) { | |
| var li = document.createElement("li"); | |
| f.appendChild(li); | |
| } | |
| document.querySelectorAll("ul > li")[0].className = 'selected'; | |
| }; | |
| if (navigator.msMaxTouchPoints) { | |
| $('#slider').addClass('ms-touch'); | |
| $('#slider').on('scroll', function () { | |
| $('.slide-image').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)'); | |
| }); | |
| } else { | |
| var slider = { | |
| el: { | |
| slider: $("#slider"), | |
| holder: $(".holder"), | |
| imgSlide: $(".slide"), | |
| grnTxt: $(".green"), | |
| frameDot: $("#frame-indicator li") | |
| }, | |
| slideWidth: window.innerWidth, | |
| touchstartx: undefined, | |
| touchmovex: undefined, | |
| movex: undefined, | |
| index: 0, | |
| longTouch: undefined, | |
| init: function () { | |
| this.bindUIEvents(); | |
| sWrap.style.width = window.innerWidth + "px"; | |
| sWrap.style.height = window.innerHeight + "px"; | |
| sNum = $('.slide').length; | |
| hWrap.style.width = 100 * Number(sNum) + "%"; | |
| panSlideNum = window.innerWidth * sNum; | |
| Array.prototype.forEach.call(document.querySelectorAll(".slide-wrapper"), function (arr) { | |
| arr.style.height = window.innerHeight + "px"; | |
| arr.style.width = 100 / Number(sNum) + "%"; | |
| }); | |
| Array.prototype.forEach.call(document.querySelectorAll(".slide"), function (arr) { | |
| arr.style.backgroundSize = 'cover'; | |
| }); | |
| stop = window.innerWidth * sNum; | |
| frameIndicator(sNum); | |
| }, | |
| bindUIEvents: function () { | |
| this.el.holder.on("touchstart", function (event) { | |
| slider.start(event); | |
| }); | |
| this.el.holder.on("touchmove", function (event) { | |
| slider.move(event); | |
| }); | |
| this.el.holder.on("touchend", function (event) { | |
| slider.end(event); | |
| }); | |
| }, | |
| start: function (event) { | |
| // Test for flick. | |
| this.longTouch = false; | |
| setTimeout(function () { | |
| window.slider.longTouch = true; | |
| }, 250); | |
| // Get the original touch position. | |
| this.touchstartx = event.originalEvent.touches[0].pageX; | |
| // The movement gets all janky if there's a transition on the elements. | |
| $('.animate').removeClass('animate'); | |
| $('.textAnimate').removeClass('textAnimate'); | |
| //console.log('start ' + this.index); | |
| var frameLiRemove = document.querySelectorAll("ul > li")[this.index]; | |
| frameLiRemove.className = ""; | |
| event.preventDefault(); | |
| }, | |
| move: function (event) { | |
| // Continuously return touch position. | |
| this.touchmovex = event.originalEvent.touches[0].pageX; | |
| // Calculate distance to translate holder. | |
| this.movex = this.index * this.slideWidth + (this.touchstartx - this.touchmovex); | |
| // Defines the speed the images should move at. | |
| var panx = 100-this.movex/6; | |
| if (this.movex < stop) { // Makes the holder stop moving when there is no more content. | |
| this.el.holder.css('transform', 'translate3d(-' + this.movex + 'px,0,0)'); | |
| } | |
| //console.log(panx); | |
| //if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving. | |
| //this.el.imgSlide.css('transform', 'translate3d(-' + panx + 'px,0,0)'); | |
| //} | |
| //console.log('move ' + this.index); | |
| event.preventDefault(); | |
| }, | |
| end: function (event) { | |
| // Calculate the distance swiped. | |
| var absMove = Math.abs(this.index * this.slideWidth - this.movex); | |
| // Calculate the index. All other calculations are based on the index. | |
| if (absMove > this.slideWidth / 2 || this.longTouch === false) { | |
| if (this.movex > this.index * this.slideWidth && this.index < Number(sNum) - 1) { | |
| this.index++; | |
| } else if (this.movex < this.index * this.slideWidth && this.index > 0) { | |
| this.index--; | |
| } | |
| } | |
| // Move and animate the elements. | |
| this.el.holder.addClass('animate').css('transform', 'translate3d(-' + ((this.index * this.slideWidth) / (window.innerWidth*sNum)) * 100 + '%,0,0)'); | |
| //this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 300 - this.index * 50 + 'px,0,0)'); | |
| //this.el.grnTxt.addClass('textAnimate'); | |
| console.log('end: ' + ((this.index * this.slideWidth) / (window.innerWidth*sNum)) * 100 + '%'); | |
| var frameLiAdd = document.querySelectorAll("ul > li")[this.index]; | |
| frameLiAdd.className = 'selected'; | |
| event.preventDefault(); | |
| } | |
| }; | |
| slider.init(); | |
| } | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="working touch slider for nhm" /> | |
| <script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <title>Template OLE App</title> | |
| <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <meta name="apple-mobile-web-app-title" content="Posture Survey" /> | |
| </head> | |
| <body> | |
| <div class="slider-wrap" id="sWrap"> | |
| <div class="slider" id="slider"> | |
| <div class="holder"> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide1"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_one.png"/> | |
| </div> | |
| <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide2"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_two.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide3"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_three.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide4"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_four.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide5"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_five.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| <div class="slide-wrapper"> | |
| <div class="slide" id="slide6"> | |
| <img src="http://www.hartmuseum.org/test/app/img/global/blur_one.png"/> | |
| </div> <span class="text"> | |
| <p class="green">hint:</p> | |
| i’m outside | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="frame-indicator-wrap"> | |
| <div id="swipe"> | |
| <span>←</span> | |
| <span>SWIPE</span> | |
| <span>→</span> | |
| </div> | |
| <ul id="frame-indicator"></ul> | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css"> .animate { | |
| -webkit-transition: -webkit-transform 200ms ease-out; | |
| transition: transform 200ms ease-out; | |
| } | |
| .textAnimate { | |
| -webkit-transition: -webkit-transform 1500ms ease-out; | |
| transition: transform 1500ms ease-out; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| /* | |
| #slide1{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_one.png'); | |
| } | |
| #slide2{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_two.png'); | |
| } | |
| #slide3{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_three.png'); | |
| } | |
| #slide4{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_four.png'); | |
| } | |
| #slide5{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_five.png'); | |
| } | |
| #slide6{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_one.png'); | |
| } | |
| */ | |
| .slider-wrap { | |
| /*width: 320px;*/ | |
| /* height: 568px;*/ | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| .slider { | |
| width: 100%; | |
| /*height: 100%; | |
| overflow: hidden;*/ | |
| } | |
| .ms-touch.slider { | |
| overflow-x: scroll; | |
| overflow-y: hidden; | |
| -ms-overflow-style: none; | |
| /* Hides the scrollbar. */ | |
| -ms-scroll-chaining: none; | |
| /* Prevents Metro from swiping to the next tab or app. */ | |
| -ms-scroll-snap-type: mandatory; | |
| /* Forces a snap scroll behavior on your images. */ | |
| -ms-scroll-snap-points-x: snapInterval(0%, 100%); | |
| /* Defines the y and x intervals to snap to when scrolling. */ | |
| } | |
| .holder { | |
| /* width: 300%; | |
| max-height: 500px; | |
| height: 100%; | |
| overflow-y: hidden; */ | |
| } | |
| .slide-wrapper { | |
| /* width: 33.333%; */ | |
| float: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .slide { | |
| height: 100%; | |
| position: relative; | |
| } | |
| .text { | |
| color: white; | |
| font-size: 40px; | |
| font-weight: 700; | |
| font-family: sans-serif; | |
| width: 67%; | |
| height: 50%; | |
| overflow: auto; | |
| margin: auto; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 1; | |
| text-shadow: 2px 3px 5px #000; | |
| } | |
| .green { | |
| color: #c0cc2f; | |
| margin:0; | |
| } | |
| .slide img { | |
| position: absolute; | |
| z-index: 0; | |
| /*transform: translatex(-100px);*/ | |
| } | |
| .slide:before { | |
| content: ""; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 40%; | |
| background: -webkit-gradient(linear, left top, left bottom, from(transparent), to('#c0cc2f')); | |
| background: -webkit-linear-gradient(transparent, #c0cc2f); | |
| background: linear-gradient(transparent, #c0cc2f); | |
| } | |
| .slide div { | |
| width: 300px; | |
| height: 500px; | |
| z-index: 0; | |
| } | |
| .frame-indicator-wrap { | |
| padding:10px 0 0; | |
| width:100%; | |
| text-align:center; | |
| position:absolute; | |
| bottom:12px; | |
| z-index: 1; | |
| } | |
| .frame-indicator-wrap span{ | |
| color: #fff; | |
| font-family: sans-serif; | |
| margin-bottom: 1px; | |
| display: inline-block; | |
| font-weight: 700; | |
| text-shadow: 1px 1px 5px #000; | |
| } | |
| #swipe > span:nth-child(2){ | |
| line-height:10px; | |
| font-size:11px ; | |
| } | |
| #frame-indicator li { | |
| background-color: #fff; | |
| border-radius: 5px; | |
| display: inline-block; | |
| height: 10px; | |
| margin: 0 5px; | |
| width: 10px; | |
| box-shadow: 1px 1px 5px #000; | |
| } | |
| #frame-indicator li.selected { | |
| background-color:#c0cc2f | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| @media screen and (orientation:landscape) { | |
| .tablet .frame-indicator-wrap { | |
| padding:80px 0 0; | |
| text-align:center; | |
| width:100% | |
| } | |
| } | |
| @media (max-width:320px) and (max-height:480px) { | |
| .frame-indicator-wrap { | |
| padding-top:10px | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> var sWrap = document.querySelector('.slider-wrap'); | |
| var hWrap = document.querySelector('.holder'), | |
| stop, containerWidth, sNum, panSlideNum; | |
| var frameLi = document.querySelectorAll("ul > li")[this.index]; | |
| var frameIndicator = function (numFrames) { | |
| var f = document.getElementById('frame-indicator'); | |
| for (var i = numFrames - 1; i >= 0; i--) { | |
| var li = document.createElement("li"); | |
| f.appendChild(li); | |
| } | |
| document.querySelectorAll("ul > li")[0].className = 'selected'; | |
| }; | |
| if (navigator.msMaxTouchPoints) { | |
| $('#slider').addClass('ms-touch'); | |
| $('#slider').on('scroll', function () { | |
| $('.slide-image').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)'); | |
| }); | |
| } else { | |
| var slider = { | |
| el: { | |
| slider: $("#slider"), | |
| holder: $(".holder"), | |
| imgSlide: $(".slide"), | |
| grnTxt: $(".green"), | |
| frameDot: $("#frame-indicator li") | |
| }, | |
| slideWidth: window.innerWidth, | |
| touchstartx: undefined, | |
| touchmovex: undefined, | |
| movex: undefined, | |
| index: 0, | |
| longTouch: undefined, | |
| init: function () { | |
| this.bindUIEvents(); | |
| sWrap.style.width = window.innerWidth + "px"; | |
| sWrap.style.height = window.innerHeight + "px"; | |
| sNum = $('.slide').length; | |
| hWrap.style.width = 100 * Number(sNum) + "%"; | |
| panSlideNum = window.innerWidth * sNum; | |
| Array.prototype.forEach.call(document.querySelectorAll(".slide-wrapper"), function (arr) { | |
| arr.style.height = window.innerHeight + "px"; | |
| arr.style.width = 100 / Number(sNum) + "%"; | |
| }); | |
| Array.prototype.forEach.call(document.querySelectorAll(".slide"), function (arr) { | |
| arr.style.backgroundSize = 'cover'; | |
| }); | |
| stop = window.innerWidth * sNum; | |
| frameIndicator(sNum); | |
| }, | |
| bindUIEvents: function () { | |
| this.el.holder.on("touchstart", function (event) { | |
| slider.start(event); | |
| }); | |
| this.el.holder.on("touchmove", function (event) { | |
| slider.move(event); | |
| }); | |
| this.el.holder.on("touchend", function (event) { | |
| slider.end(event); | |
| }); | |
| }, | |
| start: function (event) { | |
| // Test for flick. | |
| this.longTouch = false; | |
| setTimeout(function () { | |
| window.slider.longTouch = true; | |
| }, 250); | |
| // Get the original touch position. | |
| this.touchstartx = event.originalEvent.touches[0].pageX; | |
| // The movement gets all janky if there's a transition on the elements. | |
| $('.animate').removeClass('animate'); | |
| $('.textAnimate').removeClass('textAnimate'); | |
| //console.log('start ' + this.index); | |
| var frameLiRemove = document.querySelectorAll("ul > li")[this.index]; | |
| frameLiRemove.className = ""; | |
| event.preventDefault(); | |
| }, | |
| move: function (event) { | |
| // Continuously return touch position. | |
| this.touchmovex = event.originalEvent.touches[0].pageX; | |
| // Calculate distance to translate holder. | |
| this.movex = this.index * this.slideWidth + (this.touchstartx - this.touchmovex); | |
| // Defines the speed the images should move at. | |
| var panx = 100-this.movex/6; | |
| if (this.movex < stop) { // Makes the holder stop moving when there is no more content. | |
| this.el.holder.css('transform', 'translate3d(-' + this.movex + 'px,0,0)'); | |
| } | |
| //console.log(panx); | |
| //if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving. | |
| //this.el.imgSlide.css('transform', 'translate3d(-' + panx + 'px,0,0)'); | |
| //} | |
| //console.log('move ' + this.index); | |
| event.preventDefault(); | |
| }, | |
| end: function (event) { | |
| // Calculate the distance swiped. | |
| var absMove = Math.abs(this.index * this.slideWidth - this.movex); | |
| // Calculate the index. All other calculations are based on the index. | |
| if (absMove > this.slideWidth / 2 || this.longTouch === false) { | |
| if (this.movex > this.index * this.slideWidth && this.index < Number(sNum) - 1) { | |
| this.index++; | |
| } else if (this.movex < this.index * this.slideWidth && this.index > 0) { | |
| this.index--; | |
| } | |
| } | |
| // Move and animate the elements. | |
| this.el.holder.addClass('animate').css('transform', 'translate3d(-' + ((this.index * this.slideWidth) / (window.innerWidth*sNum)) * 100 + '%,0,0)'); | |
| //this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 300 - this.index * 50 + 'px,0,0)'); | |
| //this.el.grnTxt.addClass('textAnimate'); | |
| console.log('end: ' + ((this.index * this.slideWidth) / (window.innerWidth*sNum)) * 100 + '%'); | |
| var frameLiAdd = document.querySelectorAll("ul > li")[this.index]; | |
| frameLiAdd.className = 'selected'; | |
| event.preventDefault(); | |
| } | |
| }; | |
| slider.init(); | |
| }</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .animate { | |
| -webkit-transition: -webkit-transform 200ms ease-out; | |
| transition: transform 200ms ease-out; | |
| } | |
| .textAnimate { | |
| -webkit-transition: -webkit-transform 1500ms ease-out; | |
| transition: transform 1500ms ease-out; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| /* | |
| #slide1{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_one.png'); | |
| } | |
| #slide2{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_two.png'); | |
| } | |
| #slide3{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_three.png'); | |
| } | |
| #slide4{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_four.png'); | |
| } | |
| #slide5{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_five.png'); | |
| } | |
| #slide6{ | |
| background-image:url('http://www.hartmuseum.org/test/app/img/global/blur_one.png'); | |
| } | |
| */ | |
| .slider-wrap { | |
| /*width: 320px;*/ | |
| /* height: 568px;*/ | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| .slider { | |
| width: 100%; | |
| /*height: 100%; | |
| overflow: hidden;*/ | |
| } | |
| .ms-touch.slider { | |
| overflow-x: scroll; | |
| overflow-y: hidden; | |
| -ms-overflow-style: none; | |
| /* Hides the scrollbar. */ | |
| -ms-scroll-chaining: none; | |
| /* Prevents Metro from swiping to the next tab or app. */ | |
| -ms-scroll-snap-type: mandatory; | |
| /* Forces a snap scroll behavior on your images. */ | |
| -ms-scroll-snap-points-x: snapInterval(0%, 100%); | |
| /* Defines the y and x intervals to snap to when scrolling. */ | |
| } | |
| .holder { | |
| /* width: 300%; | |
| max-height: 500px; | |
| height: 100%; | |
| overflow-y: hidden; */ | |
| } | |
| .slide-wrapper { | |
| /* width: 33.333%; */ | |
| float: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .slide { | |
| height: 100%; | |
| position: relative; | |
| } | |
| .text { | |
| color: white; | |
| font-size: 40px; | |
| font-weight: 700; | |
| font-family: sans-serif; | |
| width: 67%; | |
| height: 50%; | |
| overflow: auto; | |
| margin: auto; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 1; | |
| text-shadow: 2px 3px 5px #000; | |
| } | |
| .green { | |
| color: #c0cc2f; | |
| margin:0; | |
| } | |
| .slide img { | |
| position: absolute; | |
| z-index: 0; | |
| /*transform: translatex(-100px);*/ | |
| } | |
| .slide:before { | |
| content: ""; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 40%; | |
| background: -webkit-gradient(linear, left top, left bottom, from(transparent), to('#c0cc2f')); | |
| background: -webkit-linear-gradient(transparent, #c0cc2f); | |
| background: linear-gradient(transparent, #c0cc2f); | |
| } | |
| .slide div { | |
| width: 300px; | |
| height: 500px; | |
| z-index: 0; | |
| } | |
| .frame-indicator-wrap { | |
| padding:10px 0 0; | |
| width:100%; | |
| text-align:center; | |
| position:absolute; | |
| bottom:12px; | |
| z-index: 1; | |
| } | |
| .frame-indicator-wrap span{ | |
| color: #fff; | |
| font-family: sans-serif; | |
| margin-bottom: 1px; | |
| display: inline-block; | |
| font-weight: 700; | |
| text-shadow: 1px 1px 5px #000; | |
| } | |
| #swipe > span:nth-child(2){ | |
| line-height:10px; | |
| font-size:11px ; | |
| } | |
| #frame-indicator li { | |
| background-color: #fff; | |
| border-radius: 5px; | |
| display: inline-block; | |
| height: 10px; | |
| margin: 0 5px; | |
| width: 10px; | |
| box-shadow: 1px 1px 5px #000; | |
| } | |
| #frame-indicator li.selected { | |
| background-color:#c0cc2f | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| @media screen and (orientation:landscape) { | |
| .tablet .frame-indicator-wrap { | |
| padding:80px 0 0; | |
| text-align:center; | |
| width:100% | |
| } | |
| } | |
| @media (max-width:320px) and (max-height:480px) { | |
| .frame-indicator-wrap { | |
| padding-top:10px | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var sWrap = document.querySelector('.slider-wrap'); | |
| var hWrap = document.querySelector('.holder'), | |
| stop, containerWidth, sNum, panSlideNum; | |
| var frameLi = document.querySelectorAll("ul > li")[this.index]; | |
| var frameIndicator = function (numFrames) { | |
| var f = document.getElementById('frame-indicator'); | |
| for (var i = numFrames - 1; i >= 0; i--) { | |
| var li = document.createElement("li"); | |
| f.appendChild(li); | |
| } | |
| document.querySelectorAll("ul > li")[0].className = 'selected'; | |
| }; | |
| if (navigator.msMaxTouchPoints) { | |
| $('#slider').addClass('ms-touch'); | |
| $('#slider').on('scroll', function () { | |
| $('.slide-image').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)'); | |
| }); | |
| } else { | |
| var slider = { | |
| el: { | |
| slider: $("#slider"), | |
| holder: $(".holder"), | |
| imgSlide: $(".slide"), | |
| grnTxt: $(".green"), | |
| frameDot: $("#frame-indicator li") | |
| }, | |
| slideWidth: window.innerWidth, | |
| touchstartx: undefined, | |
| touchmovex: undefined, | |
| movex: undefined, | |
| index: 0, | |
| longTouch: undefined, | |
| init: function () { | |
| this.bindUIEvents(); | |
| sWrap.style.width = window.innerWidth + "px"; | |
| sWrap.style.height = window.innerHeight + "px"; | |
| sNum = $('.slide').length; | |
| hWrap.style.width = 100 * Number(sNum) + "%"; | |
| panSlideNum = window.innerWidth * sNum; | |
| Array.prototype.forEach.call(document.querySelectorAll(".slide-wrapper"), function (arr) { | |
| arr.style.height = window.innerHeight + "px"; | |
| arr.style.width = 100 / Number(sNum) + "%"; | |
| }); | |
| Array.prototype.forEach.call(document.querySelectorAll(".slide"), function (arr) { | |
| arr.style.backgroundSize = 'cover'; | |
| }); | |
| stop = window.innerWidth * sNum; | |
| frameIndicator(sNum); | |
| }, | |
| bindUIEvents: function () { | |
| this.el.holder.on("touchstart", function (event) { | |
| slider.start(event); | |
| }); | |
| this.el.holder.on("touchmove", function (event) { | |
| slider.move(event); | |
| }); | |
| this.el.holder.on("touchend", function (event) { | |
| slider.end(event); | |
| }); | |
| }, | |
| start: function (event) { | |
| // Test for flick. | |
| this.longTouch = false; | |
| setTimeout(function () { | |
| window.slider.longTouch = true; | |
| }, 250); | |
| // Get the original touch position. | |
| this.touchstartx = event.originalEvent.touches[0].pageX; | |
| // The movement gets all janky if there's a transition on the elements. | |
| $('.animate').removeClass('animate'); | |
| $('.textAnimate').removeClass('textAnimate'); | |
| //console.log('start ' + this.index); | |
| var frameLiRemove = document.querySelectorAll("ul > li")[this.index]; | |
| frameLiRemove.className = ""; | |
| event.preventDefault(); | |
| }, | |
| move: function (event) { | |
| // Continuously return touch position. | |
| this.touchmovex = event.originalEvent.touches[0].pageX; | |
| // Calculate distance to translate holder. | |
| this.movex = this.index * this.slideWidth + (this.touchstartx - this.touchmovex); | |
| // Defines the speed the images should move at. | |
| var panx = 100-this.movex/6; | |
| if (this.movex < stop) { // Makes the holder stop moving when there is no more content. | |
| this.el.holder.css('transform', 'translate3d(-' + this.movex + 'px,0,0)'); | |
| } | |
| //console.log(panx); | |
| //if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving. | |
| //this.el.imgSlide.css('transform', 'translate3d(-' + panx + 'px,0,0)'); | |
| //} | |
| //console.log('move ' + this.index); | |
| event.preventDefault(); | |
| }, | |
| end: function (event) { | |
| // Calculate the distance swiped. | |
| var absMove = Math.abs(this.index * this.slideWidth - this.movex); | |
| // Calculate the index. All other calculations are based on the index. | |
| if (absMove > this.slideWidth / 2 || this.longTouch === false) { | |
| if (this.movex > this.index * this.slideWidth && this.index < Number(sNum) - 1) { | |
| this.index++; | |
| } else if (this.movex < this.index * this.slideWidth && this.index > 0) { | |
| this.index--; | |
| } | |
| } | |
| // Move and animate the elements. | |
| this.el.holder.addClass('animate').css('transform', 'translate3d(-' + ((this.index * this.slideWidth) / (window.innerWidth*sNum)) * 100 + '%,0,0)'); | |
| //this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 300 - this.index * 50 + 'px,0,0)'); | |
| //this.el.grnTxt.addClass('textAnimate'); | |
| console.log('end: ' + ((this.index * this.slideWidth) / (window.innerWidth*sNum)) * 100 + '%'); | |
| var frameLiAdd = document.querySelectorAll("ul > li")[this.index]; | |
| frameLiAdd.className = 'selected'; | |
| event.preventDefault(); | |
| } | |
| }; | |
| slider.init(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment