Skip to content

Instantly share code, notes, and snippets.

View 01kamishibai.css
.page-outer{
position: sticky;
bottom: 0;
box-shadow: 0 10px 5px -5px rgba(0,0,0,.5);
}
.page-outer.z1{
z-index: 10;
}
.page-outer.z2{
z-index: 9;
View 01parallax01.css
.parallax-outer{
margin: 300px 0;
}
.parallax{
box-shadow: 0 0 2px 2px rgba(245,124,0 ,.7);
}
.parallax.p1-1{
display: flex;
justify-content: center;
align-items: center;
View 01chase-mouse.css
.face-outer{
width: 60%;
margin: 0 auto;
}
.face-outline{
position: relative;
border: 1px solid #333;
border-radius: 50%;
}
.face-outline::before{
View get-query-string2.js
function get_params2(){
const params = (new URL(document.location)).searchParams;
output_query2(params);
}
function output_query2(params){
output[1].textContent = '';
let str = '';
for(key of params.keys()){
str += esc_html(key) +'='+ esc_html(params.get(key)) + '<br>';
}
View 01analog-clock.css
.anaclo{
position: relative;
width: 80%;
margin: 0 auto;
}
.anaclo-frame{
box-sizing: border-box;
position: relative;
width: 100%;
border: 5px solid #444;
View get-query-string1.js
function get_params1(){
let params = {};
if(location.search!=''){
location.search.replace('?','').split('&').forEach(str=>{
const kv = str.split('=');
params[kv[0]] = decodeURI(kv[1]);
});
}
output_query1(params);
}
View 01hamburger-menu.css
.hamb-bt-demo{
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
width: 40px;
height: 40px;
background-color: #C8E6C9;
}
.hamb-line{
View 01hamburger-menu-nav.css
.display{
position: relative;
width: 150px;
height: 240px;
border: 1px solid #333;
overflow-x: hidden;
}
.nav{
box-sizing: border-box;
position: absolute;
View 01hamburger-menu-bt.css
.hamb-bt{
display: inline-block;
position: relative;
width: 50px;
height: 50px;
background-color: #C8E6C9;
}
.hamb-line{
position: absolute;
left: 50%;
View example03.html
<!-- 元のhtml -->
<div>
<div id="sample-parent">#sample-parent</div>
<div class="sample-parent">.sample-parent</div>
<div class="sample-parent">.sample-parent</div>
<div class="sample-parent">.sample-parent</div>
</div>
<!-- include処理 -->
<script src="path/to/include-html.js"></script>
<script>