html,Code片段,代码实例,代码示例,代码片段库

html 00_CircleLikeAmeba.md

00_CircleLikeAmeba.md

アメーバのように、もぞもぞうにょうにょうごめく円

[![Image from Gyazo](https://i.gyazo.com/d3d867a791696f4697703ca050339410.gif)](https://gyazo.com/d3d867a791696f4697703ca050339410)

https://codepen.io/mo4_9/pen/jONmwVb

以下のスクリプトはNuxtに向けて書き直してみたもの

cf. [canvasで ”うにょうにょ動く円” を ”複数” 作ってみました](https://blog.splout.co.jp/6280/)

MultipleCircleLikeAmeba.vue

<template>
    <canvas></canvas>
</template>

<script>
// 座標の計算
let Point = function(c, r, rota) {
  this.x, this.y;
  this.centerX = c.x;
  this.centerY = c.y;
  this.radian = rota * (Math.PI / 180);
  this.radius = r;

  this.speed = Math.random() * 8 + 2;
  this.r = Math.random() * 0.5;
  this.rota = 0;

  this.update = function() {
    let plus = Math.cos(this.rota * (Math.PI / 180)) * this.r;

    this.radius += plus;

    let cos = Math.cos(this.radian) * this.radius;
    let sin = Math.sin(this.radian) * this.radius;

    this.x = cos + this.centerX;
    this.y = sin + this.centerY;

    this.rota += this.speed;

    if(this.rota > 360){ this.rota -= 360; };
  }
}

export default {
  data() {
    return {
      dpr: 2,
      vertexs_num: 10,
      circles: [
        {
          center: {x:150, y:250},
          color: '#f00',
          radius: 100,
          point: []
        },
        {
          center:  {x:250, y:150},
          color: '#00f',
          radius: 100,
          point: []
        },
        {
          center: {x:300, y:250},
          color: '#0f0',
          radius: 100,
          point: []
        }
      ]
    }
  },
  props: {
    width: Number,
    height: Number,
  },
  mounted() {
    this.init()
    this.setPoints()
    requestAnimationFrame(this.tick)
  },
  methods: {
    init() {
      this.$el.width = this.width * this.dpr
      this.$el.height = this.height * this.dpr
      this.ctx = this.$el.getContext('2d')
      this.ctx.scale(this.dpr,this.dpr)
      this.$el.style.width = this.width + 'px'
      this.$el.style.height = this.height + 'px'
    },
    setPoints() {
      const rota = Math.floor(360 / this.vertexs_num)
      for(let i = 0; i < this.circles.length; i++){
        for(let j = 0; j < this.vertexs_num; j++){
          this.circles[i].point[j] = new Point(this.circles[i]['center'], this.circles[i]['radius'], rota * j)
        }
      }
    },
    tick() {
      for(let i = 0; i < this.circles.length; i++){
        for(let j = 0; j < this.vertexs_num; j++){
          this.circles[i].point[j].update()
        }
      }
      this.draw()
      requestAnimationFrame(this.tick)
    },
    draw() {
      this.ctx.clearRect(0, 0, this.$el.width, this.$el.height);
      for(let i = 0; i < this.circles.length; i++) {
        this.drawCircle(this.circles[i]['color'], this.circles[i]['point'], 0.7);
      }
    },
    drawCircle(color, point, alpha) {
      this.ctx.fillStyle = color
      this.ctx.globalAlpha = alpha

      this.ctx.beginPath()

      const xc1 = (point[0].x + point[this.vertexs_num - 1].x) / 2
      const yc1 = (point[0].y + point[this.vertexs_num - 1].y) / 2
      this.ctx.moveTo(xc1, yc1)
      for(let i = 0; i < this.vertexs_num - 1; i++){
        const xc = (point[i].x + point[i + 1].x) / 2
        const yc = (point[i].y + point[i + 1].y) / 2
        this.ctx.quadraticCurveTo(point[i].x, point[i].y, xc, yc)
      }
      this.ctx.quadraticCurveTo(point[this.vertexs_num-1].x, point[this.vertexs_num-1].y, xc1, yc1)

      this.ctx.closePath()
      this.ctx.fill()
    },
  }
}
</script>

SingleCircleLikeAmeba.vue

<template>
    <canvas></canvas>
</template>

<script>
// 座標の計算
let Point = function(c, r, rota) {
  this.x, this.y;
  this.centerX = c.x;
  this.centerY = c.y;
  this.radian = rota * (Math.PI / 180);
  this.radius = r;

  this.speed = Math.random() * 8 + 2;
  this.r = Math.random() * 0.5;
  this.rota = 0;

  this.update = function() {
    let plus = Math.cos(this.rota * (Math.PI / 180)) * this.r;

    this.radius += plus;

    let cos = Math.cos(this.radian) * this.radius;
    let sin = Math.sin(this.radian) * this.radius;

    this.x = cos + this.centerX;
    this.y = sin + this.centerY;

    this.rota += this.speed;

    if(this.rota > 360){ this.rota -= 360; };
  }
}

export default {
  data() {
    return {
      dpr: 2,
      vertexs_num: 10,
      circles: [
        {
          point: []
        }
      ]
    }
  },
  props: {
    width: Number,
    height: Number,
    color: String,
    radius: Number,
  },
  mounted() {
    this.init()
    this.setPoints()
    requestAnimationFrame(this.tick)
  },
  methods: {
    init() {
      this.$el.width = this.width * this.dpr
      this.$el.height = this.height * this.dpr
      this.ctx = this.$el.getContext('2d')
      this.ctx.scale(this.dpr,this.dpr)
      this.$el.style.width = this.width + 'px'
      this.$el.style.height = this.height + 'px'
    },
    setPoints() {
      const rota = Math.floor(360 / this.vertexs_num)
      for(let i = 0; i < this.circles.length; i++){
        for(let j = 0; j < this.vertexs_num; j++){
          this.circles[i].point[j] = new Point({x:this.width/2, y:this.height/2}, this.radius, rota * j)
        }
      }
    },
    tick() {
      for(let i = 0; i < this.circles.length; i++){
        for(let j = 0; j < this.vertexs_num; j++){
          this.circles[i].point[j].update()
        }
      }
      this.draw()
      requestAnimationFrame(this.tick)
    },
    draw() {
      this.ctx.clearRect(0, 0, this.$el.width, this.$el.height);
      for(let i = 0; i < this.circles.length; i++) {
        this.drawCircle(this.color, this.circles[i]['point'], 0.7);
      }
    },
    drawCircle(color, point, alpha) {
      this.ctx.fillStyle = color
      this.ctx.globalAlpha = alpha

      this.ctx.beginPath()

      const xc1 = (point[0].x + point[this.vertexs_num - 1].x) / 2
      const yc1 = (point[0].y + point[this.vertexs_num - 1].y) / 2
      this.ctx.moveTo(xc1, yc1)
      for(let i = 0; i < this.vertexs_num - 1; i++){
        const xc = (point[i].x + point[i + 1].x) / 2
        const yc = (point[i].y + point[i + 1].y) / 2
        this.ctx.quadraticCurveTo(point[i].x, point[i].y, xc, yc)
      }
      this.ctx.quadraticCurveTo(point[this.vertexs_num-1].x, point[this.vertexs_num-1].y, xc1, yc1)

      this.ctx.closePath()
      this.ctx.fill()
    },
  }
}
</script>

html 00_VideoMask.md

00_VideoMask.md

[![Image from Gyazo](https://i.gyazo.com/1b4a73ef059bf37f143bfd23a921ee2f.png)](https://gyazo.com/1b4a73ef059bf37f143bfd23a921ee2f)

以下のスクリプトで作成したcanvasをビデオの上からかぶせる。  
※ビデオをcanvasの中に描画しているわけではない。

cf. [Canvas の組み込み](https://cr-vue.mio3io.com/examples/canvas.html)

VideoMask.vue

<template>
  <canvas></canvas>
</template>

<script>
export default {
  data() {
    return {
      width: 1280,
      height: 720,
    }
  },
  mounted() {
    this.$el.width = this.width * 2
    this.$el.height = this.height * 2
    this.ctx = this.$el.getContext('2d')
    this.ctx.scale(2,2);
    this.$el.style.width = this.width + 'px';
    this.$el.style.height = this.height + 'px';

    this.draw();
  },
  methods: {
    draw() {
      this.ctx.clearRect(0, 0, this.width, this.height);

      // 背景の白を描画
      this.ctx.fillStyle = 'rgba(255,255,255,1)';
      this.ctx.fillRect(0, 0, this.width, this.height);

      // 新しく描画する部分と重なったら透過 ＝ 円を描画した部分のみ透過される
      this.ctx.globalCompositeOperation = 'destination-out';
      this.ctx.beginPath();
      this.ctx.arc(
        this.width/2, 0,
        600,
        0, Math.PI*2
      );
      this.ctx.closePath();

      this.ctx.fill();
    }
  },
}
</script>

html 确保div位于everythng之上

div_on_top.html


style="position: relative;z-index: 9999!important"

html 向下滚动

scripts.js

 public OnWindowScroll() {
    const conditionCompareContainer = document.querySelector<HTMLElement>(`[data-switching="condition compare"]`);
    const conditionCompareCard = document.querySelector<HTMLElement>(`[data-switching="condition compare new card"]`);

    if (!conditionCompareContainer) { return; }
    if (!conditionCompareCard) { return; }

    conditionCompareContainer.addEventListener('scroll', () => {
        const x = (conditionCompareContainer.scrollTop * -1).toString();
        console.log(x);
        conditionCompareCard.style.bottom = `${x}px`;
    });
}

template.html

data-switching="condition compare new card"

html 布兰达的仪表板小工具

brandawidget

Welcome to your new site! Remember Cousett @ Techie Mamma is here to support you.

Need help with your website? Contact <a href="mailto:hellotechiemamma@gmail.com">Techie Mamma</a>!

<a href="http://techiemamma.com">Visit my site</a> for tutorials and all things WordPress, Tech and Mom. Visit the built-in videos for custom videos and basics of WordPress!

Have a new issue or ticket? <a href="https://techiemamma.com/ongoing-support-15-minute-task/" target="_blank" rel="noopener">Submit it and we will get on it right away!</a>

html Deshabilitar链接

disable-link.html

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

<a class="isDisabled" href="https://decano.com">Disabled Link</a>

html 视差滚动

Parallax au scroll倒入背景。

parallax.js

$(window).scroll(function (event) {
      var scroll = $(window).scrollTop() *0.2;
      $('.parallax').css("background-position-y", -Math.abs(scroll))
});

parallax.css

.parallax {
    transition: all 0.2s ease-out;
}

parallax.html

<div class="parallax" style="background-image:url(<?php the_field('background_page'); ?>)"></div>

html 单击JavaScript全屏视频

点击全屏打开视频，在全屏退出/更改时触发事件

fs-video.html

<script>
/**
 * @param {string} id video element css ID
 * 
 */
function openFullscreen(id) {
    
    event.preventDefault();

    elem = document.getElementById(id);
    elem.parentNode.classList.remove("uk-hidden");

    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }

}

function closefullScreen() {

    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {

        //console.log("close");

        let fsVideo = document.querySelector("#tm-fs-video");
        fsVideo.classList.add("uk-hidden");

    } else {
       //console.log("open");
    }

}

if (document.addEventListener) {
    document.addEventListener("fullscreenchange", closefullScreen, false);      
    document.addEventListener("webkitfullscreenchange", closefullScreen, false);
    document.addEventListener("mozfullscreenchange", closefullScreen, false);
}
</script>

<a href="#" onclick='openFullscreen("my-video-id")'>
	Play Video
</a>
                        
<div id="tm-fs-video" class="uk-hidden">
    <video width="100%" id="video-id>" controls autoplay>
        <source src="VIDEO_URL" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

html 将脚本文件添加到html

script.html

<head>
<script src="myscripts.js"></script>
</head>

html 配置 - 侧面导航

side-nav

                <ul class="side-nav">
                    <li>General</li>
                    <li>Organization</li>
                    <li class="active">Moderation</li>
                    <li>Banned and suspect words</li>
                    <li>Authentication</li>
                    <li>Email</li>
                    <li>Advanced</li>
                </ul>