Created
November 29, 2016 01:37
-
-
Save basictomonokai/0a845d5aa3698a3e7c87473f79941f94 to your computer and use it in GitHub Desktop.
スライド表示プログラムとロード用HTMLファイル(BASIC! for Android)
This file contains 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 charset="UTF-8"> | |
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" /> | |
<style> | |
.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; } | |
</style> | |
<style> | |
/* Slicebox Style */ | |
.sb-slider { | |
margin: 10px auto; | |
position: relative; | |
overflow: hidden; | |
width: 100%; | |
list-style-type: none; | |
padding: 0; | |
} | |
.sb-slider li { | |
margin: 0; | |
padding: 0; | |
display: none; | |
} | |
.sb-slider li > a { | |
outline: none; | |
} | |
.sb-slider li > a img { | |
border: none; | |
} | |
.sb-slider img { | |
max-width: 100%; | |
display: block; | |
} | |
.sb-description { | |
padding: 20px; | |
bottom: 10px; | |
left: 10px; | |
right: 10px; | |
z-index: 1000; | |
position: absolute; | |
background: #CBBFAE; | |
background: rgba(190,176,155, 0.4); | |
border-left: 4px solid rgba(255,255,255,0.7); | |
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
filter: alpha(opacity=0); | |
opacity: 0; | |
color: #fff; | |
-webkit-transition: all 200ms; | |
-moz-transition: all 200ms; | |
-o-transition: all 200ms; | |
-ms-transition: all 200ms; | |
transition: all 200ms; | |
} | |
.sb-slider li.sb-current .sb-description { | |
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | |
filter: alpha(opacity=80); | |
opacity: 1; | |
} | |
.sb-slider li.sb-current .sb-description:hover { | |
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; | |
filter: alpha(opacity=99); | |
background: rgba(190,176,155, 0.7); | |
} | |
.sb-perspective { | |
position: relative; | |
} | |
.sb-perspective > div { | |
position: absolute; | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
-o-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-webkit-backface-visibility : hidden; | |
-moz-backface-visibility : hidden; | |
-o-backface-visibility : hidden; | |
-ms-backface-visibility : hidden; | |
backface-visibility : hidden; | |
} | |
.sb-side { | |
margin: 0; | |
display: block; | |
position: absolute; | |
-moz-backface-visibility : hidden; | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
-o-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
/* custom style */ | |
.container { | |
margin: 30px; | |
} | |
.shadow { | |
width: 100%; | |
height: 168px; | |
position: relative; | |
margin-top: -110px; | |
background: transparent url(http://tympanus.net/Development/Slicebox/images/shadow.png) no-repeat bottom center; | |
background-size: 100% 100%; /* stretches it */ | |
z-index: -1; | |
display: none; | |
} | |
.sb-description h3 { | |
font-size: 20px; | |
text-shadow: 1px 1px 1px rgba(0,0,0,0.3); | |
} | |
.sb-description h3 a { | |
color: #4a3c27; | |
text-shadow: 0 1px 1px rgba(255,255,255,0.5); | |
} | |
.nav-arrows { | |
display: none; | |
} | |
.nav-arrows a { | |
width: 42px; | |
height: 42px; | |
background: #cbbfae url(http://tympanus.net/Development/Slicebox/images/nav.png) no-repeat top left; | |
position: absolute; | |
top: 50%; | |
left: 2px; | |
text-indent: -9000px; | |
cursor: pointer; | |
margin-top: -21px; | |
opacity: 0.9; | |
border-radius: 50%; | |
box-shadow: 0 1px 1px rgba(255,255,255,0.8); | |
} | |
.nav-arrows a:first-child{ | |
left: auto; | |
right: 2px; | |
background-position: top right; | |
} | |
.nav-arrows a:hover { | |
opacity: 1; | |
} | |
.nav-dots { | |
text-align: center; | |
position: absolute; | |
bottom: -5px; | |
height: 30px; | |
width: 100%; | |
left: 0; | |
display: none; | |
} | |
.nav-dots span { | |
display: inline-block; | |
width: 16px; | |
height: 16px; | |
border-radius: 50%; | |
margin: 3px; | |
background: #cbbfae; | |
cursor: pointer; | |
box-shadow: | |
0 1px 1px rgba(255,255,255,0.6), | |
inset 0 1px 1px rgba(0,0,0,0.1); | |
} | |
.nav-dots span.nav-dot-current { | |
box-shadow: | |
0 1px 1px rgba(255,255,255,0.6), | |
inset 0 1px 1px rgba(0,0,0,0.1), | |
inset 0 0 0 3px #cbbfae, | |
inset 0 0 0 8px #fff; | |
} | |
.nav-options { | |
width: 70px; | |
height: 30px; | |
position: absolute; | |
right: 70px; | |
bottom: 0px; | |
display: none; | |
} | |
.nav-options span { | |
width: 30px; | |
height: 30px; | |
background: #cbbfae url(http://tympanus.net/Development/Slicebox/images/options.png) no-repeat top left; | |
text-indent: -9000px; | |
cursor: pointer; | |
opacity: 0.7; | |
display: inline-block; | |
border-radius: 50%; | |
} | |
.nav-options span:first-child{ | |
background-position: -30px 0px; | |
margin-right: 3px; | |
} | |
.nav-options span:hover { | |
opacity: 1; | |
} | |
</style> | |
<title>Slicebox - 3D Image Slider</title> | |
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> | |
<link rel='stylesheet prefetch' href='http://tympanus.net/Development/Slicebox/css/demo.css'> | |
<link rel="stylesheet" href="css/style.css"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="wrapper"> | |
<ul id="sb-slider" class="sb-slider"> | |
<li> | |
<a id="aaa"><img src="m01.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>このスライドはMorning Project Samurai Advent Calendar 2016の○日目の記事として作りました</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m02.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>私は2015-16で3回MPSのイベントに参加させていただいた者です。ありがとうございます。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m03.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>私はAndroidでBASIC!を使う変わり者です。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m04.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>BASICしかできない低リテラシーのいい年こいたおっさんです。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m05.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>最近のBASIC!は、BASICといえどもJSやCSSの知識が必要な時代になりました。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m06.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>JSなんてさっぱりわからず困っていました…</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m07.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>たまたまネットでみつけたMPS世田谷がJSネタだったので飛びついたものの…</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m08.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>真面目に聞きましたがほぼわかりませんでした…</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m09.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>でもその時にいろいろググったおかげで少し調べる力がついた気がします。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m10.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>今はCodepenやJsfiddleやGithubまで見るようになりました。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m11.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>パクって…(^_^;)少しカスタマイズするくらいはなんとかできています。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m12.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>これじゃダメなんでしょうが…</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m13.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>このスライド自体もCodepenのパクリです。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m14.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>MPSに参加させていただいて自分のできる範囲がほんの少し増えました</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m15.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>ありがとうございます。今後のMPSのご発展をお祈りいたします。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m16.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>以上でごのスライドはおしまいです。</h3> | |
</div> | |
</li> | |
<li> | |
<a id="aaa"><img src="m16.jpg" alt="image1"/></a> | |
<div class="sb-description wf-roundedmplus1c"> | |
<h3>最後に…実はこのスライドもBASIC!上で動かしています。では…</h3> | |
</div> | |
</li> | |
</ul> | |
<div id="shadow" class="shadow"></div> | |
<div id="nav-arrows" class="nav-arrows"> | |
<a href="#">Next</a> | |
<a href="#">Previous</a> | |
</div> | |
</div> | |
</div> | |
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | |
<script src='http://tympanus.net/Development/Slicebox/js/jquery.slicebox.js'></script> | |
<script> | |
$(function() { | |
var Page = (function() { | |
var $navArrows = $( '#nav-arrows' ).hide(), | |
$shadow = $( '#shadow' ).hide(), | |
slicebox = $( '#sb-slider' ).slicebox( { | |
onReady : function() { | |
$navArrows.show(); | |
$shadow.show(); | |
}, | |
orientation : 'r', | |
cuboidsRandom : true, | |
disperseFactor : 30 | |
} ), | |
init = function() { | |
initEvents(); | |
}, | |
initEvents = function() { | |
// add navigation events | |
$navArrows.children( ':first' ).on( 'click', function() { | |
slicebox.next(); | |
return false; | |
} ); | |
$navArrows.children( ':last' ).on( 'click', function() { | |
slicebox.previous(); | |
return false; | |
} ); | |
}; | |
return { init : init }; | |
})(); | |
Page.init(); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains 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
console.title "HTML test" | |
nxttest: | |
! HTMLモードの開始 | |
HTML.OPEN | |
! HTMLファイルのロード | |
HTML.LOAD.URL "advindex.html" | |
xnextUserAction: | |
! loop until data$ is not "" | |
DO | |
HTML.GET.DATALINK data$ | |
UNTIL data$ <> "" | |
type$ = LEFT$(data$, 4) | |
data$ = MID$(data$,5) | |
! Act on the data type | |
! Shown are all the current data types | |
SW.BEGIN type$ | |
! Back Key hit. | |
! if we can go back then do it | |
SW.CASE "BAK:" | |
PRINT "BACK key: " + data$ | |
popup "終了します",0,0,0 | |
pause 2000 | |
end | |
SW.BREAK | |
! A hyperlink was clicked on | |
SW.CASE "LNK:" | |
PRINT "Hyperlink selected: "+ data$ | |
popup "リンク先をロード中",0,0,1 | |
browse data$ | |
SW.BREAK | |
! An error occured | |
SW.CASE "ERR:" | |
PRINT "Error: " + data$ | |
popup "エラーが発生しました 終了します",0,0,0 | |
pause 2000 | |
exit | |
SW.BREAK | |
! User data returned | |
SW.CASE "DAT:" | |
PRINT "User data: " + data$ | |
! Check for Exit | |
IF data$ = "//x//" then | |
PRINT "User ended demo." | |
HTML.CLOSE | |
popup "終了します",0,0,0 | |
pause 5000 | |
end | |
else | |
msx$=data$+"←データの内容" | |
popup msx$,0,0,0 | |
pause 1000 | |
goto xnextUserAction | |
ENDIF | |
SW.BREAK | |
! Form data returned. | |
! Note: Form data returning | |
! always exits the html. | |
SW.CASE "FOR:" | |
PRINT "Form data: "+data$ | |
popup "終了します",0,0,0 | |
pause 2000 | |
exit | |
SW.BREAK | |
SW.DEFAULT | |
PRINT "Unexpected data type:", type$ + data$ | |
popup "終了します",0,0,0 | |
pause 2000 | |
exit | |
SW.END | |
GOTO xnextUserAction | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment