Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| start [2023/06/07 20:34] – steve.wang | start [2023/06/08 18:55] (current) – steve.wang | ||
|---|---|---|---|
| Line 3: | Line 3: | ||
| === A presentation of work by a group of students in experimental education in Taipei, Taiwan === | === A presentation of work by a group of students in experimental education in Taipei, Taiwan === | ||
| < | < | ||
| + | <meta property=" | ||
| < | < | ||
| .level4 { | .level4 { | ||
| Line 148: | Line 149: | ||
| let info=[{ | let info=[{ | ||
| - | imageSrc:' | + | imageSrc:' |
| - | portraitSrc:' | + | portraitSrc:' |
| - | href:' | + | href:' |
| description:' | description:' | ||
| },{ | },{ | ||
| - | imageSrc:' | + | imageSrc:' |
| - | portraitSrc:' | + | portraitSrc:' |
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| href:' | href:' | ||
| description:' | description:' | ||
| Line 577: | Line 608: | ||
| document.body.style.transitionProperty = ' | document.body.style.transitionProperty = ' | ||
| - | document.body.style.transitionDuration = '8s' | + | document.body.style.transitionDuration = '4s' |
| - | let higs; | + | let higs; |
| window.addEventListener(" | window.addEventListener(" | ||
| document.body.style.opacity = ' | document.body.style.opacity = ' | ||
| Line 607: | Line 638: | ||
| // | // | ||
| setTimeout(()=> | setTimeout(()=> | ||
| - | // | + | // |
| higs.carosel.style.width=' | higs.carosel.style.width=' | ||
| higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' | higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' | ||
| Line 617: | Line 648: | ||
| higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' | higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' | ||
| higs.addSpaceAbove(2) | higs.addSpaceAbove(2) | ||
| - | | + | setTimeout(() => { |
| - | },300) | + | higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' |
| + | }, 1000) | ||
| + | | ||
| + | },400) | ||
| }) | }) | ||
| Line 694: | Line 728: | ||
| } | } | ||
| // | // | ||
| - | else{ | + | else{ |
| // | // | ||
| console.log(' | console.log(' | ||
| Line 718: | Line 752: | ||
| } | } | ||
| // | // | ||
| - | else{ | + | else{ |
| // | // | ||
| console.log(' | console.log(' | ||
| Line 831: | Line 865: | ||
| */ | */ | ||
| - | window.addEventListener(' | + | window.addEventListener(' |
| window.addEventListener(' | window.addEventListener(' | ||
| - | var xDown = null; | + | var xDown = null; |
| var yDown = null; | var yDown = null; | ||
| Line 840: | Line 874: | ||
| return evt.touches || // browser API | return evt.touches || // browser API | ||
| | | ||
| - | } | + | } |
| - | | + | |
| function handleTouchStart(evt) { | function handleTouchStart(evt) { | ||
| - | const firstTouch = getTouches(evt)[0]; | + | const firstTouch = getTouches(evt)[0]; |
| - | xDown = firstTouch.clientX; | + | xDown = firstTouch.clientX; |
| - | yDown = firstTouch.clientY; | + | yDown = firstTouch.clientY; |
| - | }; | + | }; |
| - | | + | |
| let swipeCooldown=false | let swipeCooldown=false | ||
| function handleTouchMove(evt) { | function handleTouchMove(evt) { | ||
| Line 855: | Line 889: | ||
| } | } | ||
| console.log(' | console.log(' | ||
| - | var xUp = evt.touches[0].clientX; | + | var xUp = evt.touches[0].clientX; |
| var yUp = evt.touches[0].clientY; | var yUp = evt.touches[0].clientY; | ||
| var xDiff = xDown - xUp; | var xDiff = xDown - xUp; | ||
| var yDiff = yDown - yUp; | var yDiff = yDown - yUp; | ||
| - | + | ||
| if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | ||
| if ( xDiff > 0 && swipeCooldown==false) { | if ( xDiff > 0 && swipeCooldown==false) { | ||
| Line 870: | Line 904: | ||
| swipeCooldown=false | swipeCooldown=false | ||
| },500) | },500) | ||
| - | } | + | } |
| else if (swipeCooldown==false) { | else if (swipeCooldown==false) { | ||
| evt.preventDefault() | evt.preventDefault() | ||
| Line 879: | Line 913: | ||
| swipeCooldown=false | swipeCooldown=false | ||
| },500) | },500) | ||
| - | } | + | } |
| } else { | } else { | ||
| if ( yDiff > 0 ) { | if ( yDiff > 0 ) { | ||
| - | } else { | + | } else { |
| - | } | + | } |
| } | } | ||
| /* reset values */ | /* reset values */ | ||
| xDown = null; | xDown = null; | ||
| - | yDown = null; | + | yDown = null; |
| }; | }; | ||
| Line 917: | Line 951: | ||
| margin: 3px; | margin: 3px; | ||
| } | } | ||
| + | |||
| + | @media only screen and (max-width: 767px) { | ||
| + | .button { | ||
| + | width: 79%; | ||
| + | height: 79%; | ||
| + | background-color: | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | margin: 3px; | ||
| + | } | ||
| + | .title { | ||
| + | font-family:' | ||
| + | position: absolute; | ||
| + | top: 1.7%; | ||
| + | left: 10%; | ||
| + | font-size: 10%; | ||
| + | color: white; | ||
| + | font-weight: | ||
| + | } | ||
| + | .description { | ||
| + | line-height: | ||
| + | position: absolute; | ||
| + | top: 150%; | ||
| + | left: 10%; | ||
| + | font-size: 20%; | ||
| + | color: white; | ||
| + | transition: top 0.45s ease-in-out; | ||
| + | overflow-wrap: | ||
| + | word-break: normal; | ||
| + | max-width: 330px; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| .image { | .image { | ||
| Line 1052: | Line 1120: | ||
| </ | </ | ||
| - | |||